Tutoriales Blogger #16: Instala un calendario a nuestro Blog parte 2

Tutorial Blogger #16

¡Que tal mundo!!
si ya vienen siguiendo mi blog sabrán que ya llevo varios tutoriales sencillos, pero útiles en el blog, obviamente este no se quedara atrás. Sin embargo quiero recordares que pueden ver todos los tutoriales que he ido subiendo al blog desde Aquí o se van al menú ➳ índice ➳ tutorialesDesde hay encontraran un menú con todo el contenido subido hasta el momento. Ahora vamos a lo que vinimos.
◈ ━━━━━━━ •◦⚜◦• ━━━━━━ ◈
Les había prometido subir otro modelo de calendario al blog y como ya les dije en el tutorial anterior lo que no me gusta de este calendario que les voy a presentar es que por muy bonito que sea, el problema vien en que todas las modificaciones tienen que ser Manueles. A la larga esto terminara cansando si tienes mucho contenio pero si esto no te molesta, igual aqui te dejo el tutorial con 3 opciones de calendario.

Modelo #1                                      Modelo #2                                       Modelo #3
● Instalación de Calendario
Para esto solo tenemos que ir a Diseño ➳ Añadir Gadget ➳ HTML/javascript ➳ Pegamos el código de calendario ya modificado.
Y listo!! ya tendríamos nuestro calendario.
◈ ━━━━━━━ •◦⚜◦• ━━━━━━ ◈
Modelo #1
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /><div class="widget HTML" id="HTML17"> <div class="widget-content"> <table width="240px;" border="0"> <center> <span style="color: #; font-family: Verdana; font-size: large;">Mes 2021</span> <tbody><tr><div style="background: #; border-color: 3px solid #8bf9af; padding-right: 4px; padding: 8px;"> <td><b>L</b></td> <td><b>M</b></td> <td><b>X</b></td> <td><b>J</b></td> <td><b>V</b></td> <td><b>S</b></td> <td><b>D</b></td> </div></tr><tr> <td><a href="https://entreletrasnoesunblogderesenas.blogspot.com/feeds/posts/www.blablabalbala.com"><div style="BACKGROUND-COLOR:#f15c7b;COLOR:#ffffff;" title="Booktag">1</div></a></td> <td>2</td> <td>3</td> <td><a href="https://entreletrasnoesunblogderesenas.blogspot.com/feeds/posts/www.blabalbalbal.com"><div style="BACKGROUND-COLOR:#f15c7b;COLOR:#ffffff;" title="Reseña: Cazadores de sombras #1">4</div></a></td> <td>5</td> <td>6</td> <td>7</td> </tr><tr> <td>8</td> <td>9</td> <td>10</td> <td>11</td> <td><a href="https://entreletrasnoesunblogderesenas.blogspot.com/feeds/posts/www.blabalbalbal.com"><div style="BACKGROUND-COLOR:#e0dd86;COLOR:#ffffff;" title="✔Reseña: Cazadores de sombras #1">12</div></a></td> <td>13</td> <td>14</td> </tr><tr> <td>15</td> <td><a href="https://entreletrasnoesunblogderesenas.blogspot.com/feeds/posts/www.blabalbalbal.com"><div style="BACKGROUND-COLOR:#e0dd86;COLOR:#ffffff;" title="Reseña: Cazadores de sombras #1">16</div></a></td> <td>17</td> <td>18</td> <td>19</td> <td>20</td> <td>21</td> </tr><tr> <td>22</td> <td>23</td> <td>24</td> <td>25</td> <td>26</td> <td>27</td> <td>28</td> </tr><tr> <td>29</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr></tbody></center></table></div><div class="clear"></div><span class="widget-item-control"> <span class="item-control blog-admin"> <a class="quickedit" href="https://www.blogger.com/rearrange? blogID=3408178773454454465&widgetType=HTML&widgetId=HTML2&action=e ditWidget§ionId=sidebar-right-1" onclick="return _WidgetManager._PopupConfig(document.getElementById(" html2="html2"> <img alt="" height="18" src="https://img1.blogblog.com/img/icon18_wrench_allbkg.png" width="18" /> </a> </span> </span> <div class="clear"></div></div>
◈ ━━━━━━━ •◦⚜◦• ━━━━━━ ◈

Modelo #2
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /><div class="widget HTML" id="HTML17"> <div class="widget-content"> <table width="240px;" border="0"> <center> <span style="color: #71bdcb; font-family: Verdana; font-size: large;">Mes 2021</span> <tbody><tr> <td><div style="background: #71bdcb; padding: 5px;"><b><span style="color: #ffffff;">L</span></b></div></td> <td><div style="background: #71bdcb; padding: 5px;"><b><span style="color: #ffffff;">M</span></b></div></td> <td><div style="background: #71bdcb; padding: 5px;"><b><span style="color: #ffffff;">X</span></b></div></td> <td><div style="background: #71bdcb; padding: 5px;"><b><span style="color: #ffffff;">J</span></b></div></td> <td><div style="background: #71bdcb; padding: 5px;"><b><span style="color: #ffffff;">V</span></b></div></td> <td><div style="background: #71bdcb; padding: 5px;"><b><span style="color: #ffffff;">S</span></b></div></td> <td><div style="background: #71bdcb; padding: 5px;"><b><span style="color: #ffffff;">D</span></b></div></td> </tr><tr> <td><a href="https://entreletrasnoesunblogderesenas.blogspot.com/feeds/posts/www.blablabalbala.com"><div style="BACKGROUND-COLOR:#f15c7b;COLOR:#ffffff;" title="Booktag">1</div></a></td> <td>2</td> <td>3</td> <td><a href="https://entreletrasnoesunblogderesenas.blogspot.com/feeds/posts/www.blabalbalbal.com"><div style="BACKGROUND-COLOR:#f15c7b;COLOR:#ffffff;" title="Reseña: Cazadores de sombras #1">4</div></a></td> <td>5</td> <td>6</td> <td>7</td> </tr><tr> <td>8</td> <td>9</td> <td>10</td> <td>11</td> <td><a href="https://entreletrasnoesunblogderesenas.blogspot.com/feeds/posts/www.blabalbalbal.com"><div style="BACKGROUND-COLOR:#e0dd86;COLOR:#ffffff;" title="✔Reseña: Cazadores de sombras #1">12</div></a></td> <td>13</td> <td>14</td> </tr><tr> <td>15</td> <td><a href="https://entreletrasnoesunblogderesenas.blogspot.com/feeds/posts/www.blabalbalbal.com"><div style="BACKGROUND-COLOR:#e0dd86;COLOR:#ffffff;" title="Reseña: Cazadores de sombras #1">16</div></a></td> <td>17</td> <td>18</td> <td>19</td> <td>20</td> <td>21</td> </tr><tr> <td>22</td> <td>23</td> <td>24</td> <td>25</td> <td>26</td> <td>27</td> <td>28</td> </tr><tr> <td>29</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr></tbody></center></table></div><div class="clear"></div><span class="widget-item-control"> <span class="item-control blog-admin"> <a class="quickedit" href="https://www.blogger.com/rearrange? blogID=3408178773454454465&widgetType=HTML&widgetId=HTML2&action=e ditWidget§ionId=sidebar-right-1" onclick="return _WidgetManager._PopupConfig(document.getElementById(" html2="html2"> <img alt="" height="18" src="https://img1.blogblog.com/img/icon18_wrench_allbkg.png" width="18" /> </a> </span> </span> <div class="clear"></div></div>
◈ ━━━━━━━ •◦⚜◦• ━━━━━━ ◈

Modelo #3<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /><div class="widget HTML" id="HTML17"> <div class="widget-content"> <table width="240px;" border="0"> <center> <div style="background: #71bdcb; padding-right: 8px; padding: 5px;"><span style="color: #ffffff; font-family: Verdana; font-size: large;">Mes 2021</span></div><tbody><tr> <td><b>L</b></td> <td><b>M</b></td> <td><b>X</b></td> <td><b>J</b></td> <td><b>V</b></td> <td><b>S</b></td> <td><b>D</b></td> </tr><tr> <td><a href="https://entreletrasnoesunblogderesenas.blogspot.com/feeds/posts/www.blablabalbala.com"><div style="BACKGROUND-COLOR:#f15c7b;COLOR:#ffffff;" title="Booktag">1</div></a></td> <td>2</td> <td>3</td> <td><a href="https://entreletrasnoesunblogderesenas.blogspot.com/feeds/posts/www.blabalbalbal.com"><div style="BACKGROUND-COLOR:#f15c7b;COLOR:#ffffff;" title="Reseña: Cazadores de sombras #1">4</div></a></td> <td>5</td> <td>6</td> <td>7</td> </tr><tr> <td>8</td> <td>9</td> <td>10</td> <td>11</td> <td><a href="https://entreletrasnoesunblogderesenas.blogspot.com/feeds/posts/www.blabalbalbal.com"><div style="BACKGROUND-COLOR:#e0dd86;COLOR:#ffffff;" title="✔Reseña: Cazadores de sombras #1">12</div></a></td> <td>13</td> <td>14</td> </tr><tr> <td>15</td> <td><a href="https://entreletrasnoesunblogderesenas.blogspot.com/feeds/posts/www.blabalbalbal.com"><div style="BACKGROUND-COLOR:#e0dd86;COLOR:#ffffff;" title="Reseña: Cazadores de sombras #1">16</div></a></td> <td>17</td> <td>18</td> <td>19</td> <td>20</td> <td>21</td> </tr><tr> <td>22</td> <td>23</td> <td>24</td> <td>25</td> <td>26</td> <td>27</td> <td>28</td> </tr><tr> <td>29</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr></tbody></center></table></div></div><div class="clear"></div><span class="widget-item-control"> <span class="item-control blog-admin"> <a class="quickedit" href="https://www.blogger.com/rearrange? blogID=3408178773454454465&widgetType=HTML&widgetId=HTML2&action=e ditWidget§ionId=sidebar-right-1" onclick="return _WidgetManager._PopupConfig(document.getElementById(" html2="html2"> <img alt="" height="18" src="https://img1.blogblog.com/img/icon18_wrench_allbkg.png" width="18" /> </a> </span> </span> <div class="clear"></div>
◈ ━━━━━━━ •◦⚜◦• ━━━━━━ ◈

● Modificando el Código:
Una ves escogido nuestro modelo, abra que modificar algunas cosas pero antes que nada debo explicarles algunas cosas. Todo lo que esta resaltado en verde se debe modificar por lo indicado.
1. Para marcar una fecha o sobre saltar la fecha con titulo, color y icono debes hacer lo siguiente. Digamos que resaltaremos el dia <td>16</td> pues debes añadir el siguiente código o modifica por lo siguiente:

<td><a href="URLDEENLACE" ;="" style="TEXT-DECORATION: NONE"><div style="BACKGROUND-COLOR:#e0dd86;COLOR:#ffffff;"title="✔TITULODEENTRADA">16</div></a></td>

2. El calendario se modifica manualmente, lo que nos indica que al cambiar el mes y fechas haremos lo siguiente:Si nuestro mes inicia un jueves haremos esto:

<tr>
<td></td>/*lunes*/
<td></td>/*martes*/
<td></td>/*miércoles*/
<td>1</td>/*Jueves*/
<td>2</td>/*viernes*/
<td>3</td>/*sábado*/
<td>4</td>/*domingo*/
</tr><tr>
<td>5</td>/*lunes*/
<td>6</td>/*martes*/
<td>7</td>/*miércoles*/
<td>8</td>/*Jueves*/
<td>9</td>/*viernes*/
<td>10</td>/*sábado*/
<td>11</td>/*domingo*/</tr>

Vamos a seguir copiando estos pasos hasta terminar nuestro calendario. Si nuestro calendario termina entre semana, no añadimos fecha y dejamos ese espacio vacío como al inicio de código que te acabo de mostrar.PD: Fíjense que la semana inicia con <tr> y termina cerrando el código asi </tr>
3. Para cambiar MES: Solo debes remplazar Mes 2021 por el Mes correspondiente.
4. Notaran que en los modelos de calendario en la fecha 12, al pasar el cursor notaran un icono ✔ esto pueden cambiarlo por cualquier icono que ustedes deseen.Ejemplo: ✔★ ❤ ● ■ ♫ ▲ ✿ ◆ ☀ ☁ ☻ ✹ ➽ ◆ ✖

5. Para cambiar los color de fondo y de la letra busca este código (para el caso del modelo #3)

<div style="background: #71bdcb; padding-right: 8px; padding: 5px;"><span style="color: #ffffff; font-family: Verdana; font-size: large;">Mes 2021</span></div>

◆ Para el modelo#2Encontraras varios códigos que indican cada día de la semana pero básicamente es lo mismo a modificar que el anterior. 

<td><div style="background: #71bdcb; padding: 5px;">
<b><span style="color: #ffffff;">L</span></b></div>
</td>
<td><div style="background: #71bdcb; padding: 5px;">
<b><span style="color: #ffffff;">M</span></b></div>
</td>
<td><div style="background: #71bdcb; padding: 5px;">
<b><span style="color: #ffffff;">X</span></b></div>
</td>
<td><div style="background: #71bdcb; padding: 5px;">
<b><span style="color: #ffffff;">J</span></b></div>
</td>
<td><div style="background: #71bdcb; padding: 5px;">
<b><span style="color: #ffffff;">V</span></b></div>
</td>
<td><div style="background: #71bdcb; padding: 5px;">
<b><span style="color: #ffffff;">S</span></b></div>
</td>
<td><div style="background: #71bdcb; padding: 5px;">
<b><span style="color: #ffffff;">D</span></b></div>
</td>

Hasta aquí llegara el tutorial de hoy. Espero les a ya ayudado a entenderlo, recuerden que este calendario no es automático como el que presente anterior mente, en esta ocasión les presento otro que aun que para mi gusto no es algo ideal, quiero que puedan ver todas las opciones y sean ustedes al final quienes decidan cual usar.
◈ ━━━━━━━ •◦⚜◦• ━━━━━━ ◈

Esto seria todo.Muchas Gracias por leer me, No olviden: comentar, seguir el blog y compartir!!Besitos¡¡Kc...
¿Te gusta lo que hago? Me ayudas

í