Cómo podéis ver a la derecha de mi blog,
hay un calendario con los días del mes (en este caso marzo) y al pasar el ratón por encima se lee el nombre de la entrada y si pinchamos, nos lleva hasta dicha entrada. También sirve para anunciar cuáles serán las próximas publicaciones. Y todo ello pudiendo modificar el color de fondo de los días para resaltarlos dependiendo de si se trata de una sección u de otra. ¿Queréis saber cómo se hace? Yo he aprendido gracias a
María Soul de
Tentaciones de Bolsillo que le escribí en su blog cómo ponerlo y me contestó enseguida con un correo explicándome lo que significaba cada etiqueta.
ESTE ES EL CÓDIGO QUE DEBÉIS PONER EN UN GADGET HTML PARA ESTE MES Y QUE OS EXPLICARÉ PASO A PASO. LO QUE ESTÁ EN ROJO SON CUESTIONES DE DISEÑO Y EN AZUL DE CONTENIDO. AL FINAL DEL CÓDIGO EXPLICARÉ TODO.
<div class='widget HTML' id='HTML8'>
<div class='widget-content'>
<center>
<table width="
230px;" border="0"; style="font-family:'
Open Sans'; text-align:
center; font-size:
11px;">
<tr>
<td><div style="color:
#000000;">
<b>L</b></div></td>
<td><div style="color:
#000000;">
<b>M</b></div></td>
<td><div style="color:
#000000;">
<b>X</b></div></td>
<td><div style="color:
#000000;">
<b>J</b></div></td>
<td><div style="color:
#000000;">
<b>V</b></div></td>
<td><div style="color:
#000000;">
<b>S</b></div></td>
<td><div style="color:
#000000;">
<b>D</b></div></td>
</tr><tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1</td><tr>
<td>2</td>
<td>3</td>
<td>4</td>
<td><a href="
URL DE VUESTRO POST"; style="text-decoration: none"><div style="background-color:
#81BEF7; color:
#FFF;" title="
TÍTULO DE VUESTRO POST">5</div></a></td>
<td>6</td>
<td>7</td>
<td>8</td><tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td><tr>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td><tr>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td></tr>
<td>30</td>
<td><div style="background-color:
#A9F5BC; color:
#FFF;" title="
TÍTULO DE VUESTRO POST QUE AUN NO SE HA PUBLICADO">31</div></td>
</tr></tr></tr></tr></table></center>
</div></div>
_____________________________________________
Hasta aquí el código. Ahora vamos a estudiarlo:
Este mes de marzo comienza en domingo, por lo que tenemos que dejar el espacio de lo 6 días anteriores en blanco. El siguiente mes, el de abril, empezará en miércoles por lo que se dejarán solo 2 días en blanco. Eso se hace con las etiquetas <td> que significan día.
Ejemplo: Para decir el día 4 ponemos: <td>4</td>
No os olvidéis nunca de cerrar la etiqueta con /
Y lo siguiente que debemos hacer es separar las semanas. Por eso después del día 1 (que era domingo) viene el día 2 (que era lunes) y eso va en la semana siguiente no en la misma. Por eso para separar el día 1 del día 2 se usa <tr> Con eso indicamos que empieza una nueva semana debajo.
Ejemplo: <td>29</td></tr>
- width="230px;" Esto indica el tamaño del calendario. Tenemos que ajustarlo a nuestra sidebar. Si nuestra sidebar es muy estrecha, es posible que el calendario se salga y quede descuadrado. Ajústalo poniendo un número más bajo. Ejemplo: 150px y ni se os ocurra borrar el ; o las "" porque dejará de funcionar.
- style="font-family:'Open Sans'; Aquí podéis ponerle la fuente que queráis. Intentad que sea legible o sea la misma que utilizáis en vuestro título, etc.
- text-align: center; Con esto lo que se mueve son los números, si lo cambiáis a right (derecha) o left (izquierda), quedará horroroso.
- font-size: 11px;" Y esto es para el tamaño de la tipografía en general (números y letras de la semana). Intentad que no sea muy pequeño ni muy grande.
- <td><div style="color:#000000;"><b>L</b></div></td> Esto es para el color del día de la semana. Yo lo he puesto en negro (#000000) pero lo podéis poner en cualquier color que os guste y vaya acorde con vuestro diseño. Las etiquetas <b> </b> sirven para que la L de lunes vaya en negrita. Si no lo queréis, podéis quitarlo.
- <div style="background-color:
#81BEF7; color:
#FFF;" Esto sirve para ponerle un color de fondo al día de la semana. En la imagen del principio vemos que hay azul, naranja y verde. Este es el azul clarito. Y #FFF sirve para cambiarle el color al día de la semana y ponerlo en blanco, creando contraste. Podéis dejarlo blanco o cambiarlo a #000000 para que sea negro.
- <td><a href="URL DE VUESTRO POST" Aquí debéis copiar la URL de vuestra entrada. Yo lo tengo para el día 5, pero tenéis que copiar y pegar cada vez que queráis poner un enlace en otro día. Ejemplo de cómo sería para el día 6:
ANTES:
<td>6</td>
DESPUÉS:
<td><a href="URL DE VUESTRO POST"; style="text-decoration: none"><div style="background-color:#81BEF7; color:#FFF;" title="TÍTULO DE VUESTRO POST">6</div></a></td>
¿Fácil? ¿Cómo lo llevan hasta ahora?
- <td><div style="background-color:#A9F5BC; color:#FFF;" title="TÍTULO DE VUESTRO POST QUE AUN NO SE HA PUBLICADO">31</div></td> En cambio si queremos anunciar una futura publicación, no podemos poner una URL porque esta todavía no existe, así que solo se pone el título.
ANTES:
<td>31</td>
DESPUÉS:
<td><div style="background-color:#A9F5BC; color:#FFF;" title="TÍTULO DE VUESTRO POST QUE AUN NO SE HA PUBLICADO">31</div></td>
_____________________________________________
Y hasta aquí llegaron las explicaciones. Creo que ha sido muy fácil, cualquier duda me la podéis dejar en los comentarios o escribirme a tahisbriel@gmail.com
De nuevo muchas gracias a María Soul.
Un besito.
.jpg)
%2B(1)%2B(1).png)
