Tutorial Blogger: Cómo poner un calendario en la sidebar / ITAHISA

Tutorial Blogger: Cómo poner un calendario en la sidebar

17/3/15

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-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>

CUESTIONES DE DISEÑO:

- 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.

CUESTIONES DE CONTENIDO:

- <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:

DESPUÉS:

¿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:

DESPUÉS:

_____________________________________________

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.

ITAHISA

SLIDER

Tutorial Blogger: Cómo poner un calendario en la sidebar

17/3/15

No hay comentarios

Publicar un comentario