Tutorial #1: Como poner un calendario en tu blog


En esta entrada estrenamos un nuevo apartado en el blog, voy a hacer varios tutoriales de cómo hacer algunas cosas que tengo en mi blog. En el tutorial de hoy os voy a enseñar a poner un calendario en vuestro blog para organizar vuestras entradas.

Bueno empecemos con el tutorial ;)

...
Ahora os voy a poner el código HTML que teneis que poner en vuestro blog, tenéis que entrar en diseño y pulsas a añadir un gadget. Clickas en HTML/Javascript y copias esto:

<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>1</td>

<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td></tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td></tr>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td></tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td></tr>
<td>28</td>
<td>29</td>
<td>30</td>
</tr></tr></tr></tr></table></center>
</div></div>


...

Bien hasta aquí todo es sencillo pero ahora tengo que comentarios varias cosas para que vuestro calendario quede perfecto :)

👉Supongo que habéis visto que en el código detrás de algunos días venia esto "</tr>", esto indica el cambio de semana, por ejemplo en noviembre el día 27 es domingo pues para que el resto de días cambien de fila tienes que poner después de cada domingo este código.

Antes: <td>27</td>
Después: <td>27</td><tr>

👉Arriba donde pone esto "width="230px;" y style="font-family:'Open Sans'." Podéis cambiar el tamaño por el que queráis y se adecue a vuestro blog, y el tipo de fuente también lo podéis cambiar. 

...

Ahora os voy a explicar como podéis poner las entradas que vais a subir o las entradas que subiréis.

Si quieres añadir una entrada que aun no has subido, tenéis que pegarlo en el lugar del día en el que lo publicareis:

Antes: <td>27</td>
Después: <td><div style="background-color:#A9F5BC; color:#FFF;" title="Título de la entrada que publicaréis">27</div></td>

Podéis modificar el color, #A9F5BC, yo busque los códigos de colores en internet y puse los que más me gustaron. Si quieres que la letra de dentro este negra cambia "#FFF" por #000000.

...

Al igual que antes tenéis que remplazar el día por el código de abajo, este sirve para poner una entrada ya publicada.

Antes: <td>27</td>
Después: <td><a href="Url de tu entrada"; style="text-decoration: none"><div style="background-color:#81BEF7; color:#FFF;" title="Título de tu entrada">27</div></a></td>

...

Bueno espero que os haya sido de ayuda, si tenéis algún problema con el calendario podéis contactarme en mi twitter @elrincondalice, mi correo elrincondealiceandbooks@gmail.com o comentando esta entrada.


¡Besos!

 



Alicia Cruz

8 comentarios:

  1. Hola Alice, este es el código queee yo uso en mi blog, es súper fácil de actualizar y también de adaptar a nuestro grusto, cambiar los colores y fuentes a nuestro gusto no es de temer. Creo que es solo cuestión de ensayo y error. Gracias por el aporte porque muchos no lo conocen. Un besote 💖
    Odessa | Sweet & Books

    ResponderEliminar
  2. Esta genial tu entrada, wooow lo intentare poner el fin de semana muchas gracias.

    ResponderEliminar
  3. ¡Hola! Muchas gracias por el tutorial. La verdad es que llevaba bastante tiempo queriendo hacer un calendario de estos^^

    Besos n.n

    ResponderEliminar
  4. ¡Hola! El mejor tutorial del mundo mundial, dicho queda. Gracias a ti mi blog tiene mucha más organización de la que ya tenía (y es que soy la loca del orden) y de verdad, mil gracias porque me salvaste mucho la vida. Te mando un besote y decirte que me ha encantado cómo lo has explicado, todo es más fácil cuando lo explica Aliciaaaaa ♥ Besotes :)

    ResponderEliminar
  5. Aiii es mucho más fácil de lo que imaginaba. Cuando tenga un hueco me se de una que va a poner en práctica cierto tutorial jajajajaja ¡MUCHAS GRACIAS POR ESTO!

    ¡SE MUUUY FELIIIIIIIIIIIIIIIIIIIIIIIIIIZ 😊😊💘!

    ResponderEliminar
  6. Me ha encantado el tutorial, pero de momento lo veo un poco complicado para mi, cuando tengo un hueco libro me pondre a ello (=

    ResponderEliminar
  7. ¡Estaría genial que hicieras más tutoriales de este estilo!

    ResponderEliminar
  8. Hola, he comenzado la iniciativa que menciono en el asunto, me explico bien en la entrada http://mi-dulce-biblioteca.blogspot.com.ar/2016/12/iniciativa-compartiendo-tutoriales-para.html

    Sería genial que formaras parte.

    ¡Felices fiestas!

    ResponderEliminar

¡Bienvenidos/as!
🌝Este blog vive de tus comentarios. Por favor, intenta no spoilear en ninguna de las reseñas y no dejes spam.🌝 Gracias