7 dic. 2016

# Aprende

Cómo poner un calendario en Blogger

¡Hola bohemios y bohemias de mis amores! Hoy os traigo una entrada muy práctica. Y es que como muchos ya sabéis, la sección de Aprende es de mis favoritas porque siento que os aporto algo útil en vuestra vida bloguera, ya que suelen ser tips o tutoriales de cómo hacer X cosa.

En este caso os dejo cómo personalizar un calendario para Blogger y así poder organizar mejor los posts del mes. Este tutorial lo tenéis gracias a Alicia del blog El Rincón de Alice and Books y desde luego, le debo la vida con este tutorial porque en su día subió una entrada de 10. ¡GRACIAS REINA! Dicho esto, ¡comenzamos con el tutorial!

Lo primero que tenéis que hacer es iros a Diseño dentro de vuestra cuenta de Blogger y darle a Añadir gadget donde queráis ponerlo. Debéis seleccionar el gadget de HTML/Javascript y copiar el calendario ahí. Pero, ¿y el calendario? ¡Tranquilos!

El código HTML que tengo puesto para este mes de diciembre es el siguiente:

<div class='widget HTML' id='HTML8'> 
<div class='widget-content'> 
<center> 
<table width="230px;" border="0"; style="font-family:'Arial'; text-align: center; font-size: 14px;"> 
<tr> 
<td><div style="color:#544951;"><b>L</b></div></td> 
<td><div style="color:#544951;"><b>M</b></div></td> 
<td><div style="color:#544951;"><b>X</b></div></td> 
<td><div style="color:#544951;"><b>J</b></div></td> 
<td><div style="color:#544951;"><b>V</b></div></td> 
<td><div style="color:#544951;"><b>S</b></div></td> 
<td><div style="color:#544951;"><b>D</b></div></td> 
</tr><tr> 
<td></td> 
<td></td> 
<td></td>
<td>1</td> 
<td>2</td> 
<td><a href="ENLACE"; style="text-decoration: none"><div style="background-color:#ee5f5f; color:#FFF;" title="TÍTULO">3</div></a></td>
<td>4</td><tr>
<td>5</td> 
<td>6</td> 
<td><a href="ENLACE"; style="text-decoration: none"><div style="background-color:#91c1c2; color:#FFF;" title="TÍTULO">7</div></a></td>
<td>8</td> 
<td><a href="ENLACE"; style="text-decoration: none"><div style="background-color:#91c1c2; color:#FFF;" title="TÍTULO">9</div></a></td>
<td>10</td> 
<td>11</td><tr>
<td><a href="ENLACE"; style="text-decoration: none"><div style="background-color:#91c1c2; color:#FFF;" title="TÍTULO">12</div></a></td>
<td>13</td> 
<td><a href="ENLACE"; style="text-decoration: none"><div style="background-color:#91c1c2; color:#FFF;" title="TÍTULO">14</div></a></td>
<td>15</td> 
<td><a href="ENLACE"; style="text-decoration: none"><div style="background-color:#91c1c2; color:#FFF;" title="TÍTULO">16</div></a></td>
<td><a href="ENLACE"; style="text-decoration: none"><div style="background-color:#ee5f5f; color:#FFF;" title="TÍTULO">17</div></a></td>
<td>18</td><tr> 
<td><a href="ENLACE"; style="text-decoration: none"><div style="background-color:#91c1c2; color:#FFF;" title="TÍTULO">19</div></a></td>
<td>20</td>
<td><a href="ENLACE"; style="text-decoration: none"><div style="background-color:#91c1c2; color:#FFF;" title="TÍTULO">21</div></a></td>
<td>22</td> 
<td><a href="ENLACE"; style="text-decoration: none"><div style="background-color:#91c1c2; color:#FFF;" title="TÍTULO">23</div></a></td>
<td>24</td> 
<td>25</td><tr>  
<td><a href="ENLACE"; style="text-decoration: none"><div style="background-color:#91c1c2; color:#FFF;" title="TÍTULO">26</div></a></td>
<td>27</td> 
<td><a href="ENLACE"; style="text-decoration: none"><div style="background-color:#91c1c2; color:#FFF;" title="TÍTULO">28</div></a></td> 
<td>29</td>
<td><a href="ENLACE"; style="text-decoration: none"><div style="background-color:#91c1c2; color:#FFF;" title="TÍTULO">30</div></a></td>
<td><a href="ENLACE"; style="text-decoration: none"><div style="background-color:#ee5f5f; color:#FFF;" title="TÍTULO">31</div></a></td>
</tr></tr></tr></tr></tr></table></center> 
</div></div>

💙CONSEJOS💙
  • Si queréis cambiar el tipo de fuente del calendario, solo tenéis que sustituir el nombre que os he puesto en naranja por el tipo de fuente que queráis. 
  • Si queréis que la fuente sea más pequeña o grande, cambiar el número que os he puesto en rosa.
  • Lo que aparece justo después son los días de la semana, que os recomiendo dejarlos así, porque es una medida en la que todos caben perfectamente.
  • <tr> sirve para separar y hacer un corte para que lo siguiente que pongáis se vaya a otra fila. Por eso está justo debajo de los días de la semana, para que los días del mes aparezcan en otra fila distinta. 
  • Además, <tr> se debe poner en cada domingo para así separar las semanas. El resultado sería el siguiente:
      Un día normal queda así: <td>4</td>, pero en el caso de ser domingo debéis ponerlo así              <td>4</td><tr> para que el lunes comience en otra línea. ¿De acuerdo?
  • <td></td>  sirve para marcar un día. Como en este caso no hay número entre las flechitas que os he puesto en lila, eso significa que es un día de otro més. Por ejemplo, este mes comenzó un jueves, así que los días anteriores llevarán este código <td></td> para que se entienda que son días de otro mes. 
  • Si preferís poner el día del otro mes ahí, solo tenéis que poner un número entre medias de lo que os he coloreado. Y para cada mes, dependiendo del día en que comience, deberéis poner más o menos <td></td>. Este mes, poniendo ese código sin el número queda así: 
En este caso he puesto 3 códigos para que lunes, martes y miércoles me queden vacíos.
  • Lo siguiente que os encontráis son los días tal cual puestos así <td>1</td>, y bueno, si queréis que ese día os salga a color como en la imagen que os he puesto arriba y que al pincharla os lleve a vuestro post/vídeo o lo que queráis, solo tenéis que:
  1. Seleccionar el día, por ejemplo: <td>1</td>  
  2. Sustituirlo por esto: <td><a href="ENLACE"; style="text-decoration: none"><div style="background-color:#91c1c2; color:#FFF;" title="TÍTULO">7</div></a></td>
  3. Donde pone ENLACE ponéis obviamente el enlace al post/vídeo y donde pone TÍTULO el nombre que queráis ponerle. 
  4. En el ejemplo os sale el número 7 en azul porque es el día de la semana que he escogido para publicar entrada. Si queréis que sea otro día, recordar cambiarlo.
  5. El código que veis señalado en lila es el color que tiene el cuadrito que subraya ese día concreto. Si queréis cambiarlo solo tenéis que cambiar el código por el que corresponda con el color que deseéis. 
  • ¡Recordad! <tr>  al final de cada domingo. Esto también se aplica al día que esté en color si cae domingo, solo tenéis que añadirlo al final y ya está, al igual que hacéis con el de un día sin enlace a post/vídeo. Quedaría así: 
<td><a href="ENLACE"; style="text-decoration: none"><div style="background-color:#91c1c2; color:#FFF;" title="TÍTULO">7</div></a></td><tr>

  • Es muy importante que mantengáis en cada calendario todo aquello que no os he mencionado y que aparece al principio y al final del HTML. Además os lo he puesto en un azul clarito para que sepáis a qué me refiero. ¡Eso dejadlo intacto!
  • Si por lo que sea queréis poner una entrada próxima y no tenéis enlace aún, podéis hacer como yo y dejar la casilla de ENLACE con ese nombre y poner únicamente el color y el título. 
😺Para este mes yo os dejo este calendario y así añadís los enlaces/colores al gusto de cada uno:

<div class='widget HTML' id='HTML8'> 
<div class='widget-content'> 
<center> 
<table width="230px;" border="0"; style="font-family:'Arial'; text-align: center; font-size: 14px;"> 
<tr> 
<td><div style="color:#544951;"><b>L</b></div></td> 
<td><div style="color:#544951;"><b>M</b></div></td> 
<td><div style="color:#544951;"><b>X</b></div></td> 
<td><div style="color:#544951;"><b>J</b></div></td> 
<td><div style="color:#544951;"><b>V</b></div></td> 
<td><div style="color:#544951;"><b>S</b></div></td> 
<td><div style="color:#544951;"><b>D</b></div></td> 
</tr><tr> 
<td></td> 
<td></td> 
<td></td>
<td>1</td> 
<td>2</td> 
<td>3</td> 
<td>4</td><tr>
<td>5</td> 
<td>6</td> 
<td>7</td> 
<td>8</td> 
<td>9</td> 
<td>10</td> 
<td>11</td><tr>
<td>12</td> 
<td>13</td> 
<td>14</td> 
<td>15</td> 
<td>16</td> 
<td>17</td> 
<td>18</td><tr> 
<td>19</td> 
<td>20</td>
<td>21</td> 
<td>22</td> 
<td>23</td> 
<td>24</td> 
<td>25</td><tr>  
<td>26</td> 
<td>27</td> 
<td>28</td> 
<td>29</td>
<td>30</td> 
<td>31</td> 
</tr></tr></tr></tr></tr></table></center> 
</div></div>

Y hasta aquí el tutorial de hoy. Si tenéis alguna duda podéis dejármelo en comentarios o por correo: contacto.bohemiancreative@gmail.com

💜¡Muchas gracias por leerme un día más!💚

Mieze 🐱

58 comentarios:

  1. Gracias por la entrada. A mí esto del html me da miedo y estas entradas siempre están muy bien
    Besos.

    ResponderEliminar
    Respuestas
    1. A ver si lo pones en práctica y te sale estupendamente ;)
      Besos

      Eliminar
  2. Hola bella.
    Gracias por el tutorial, viene de perlas jejeje. Últimamente llevo una mala racha total, pero en cuanto me ponga a ello otra vez seguramente lo pruebe.
    Cuando publiques la reseña de mi libro dímelo, para verlo, que estoy muy alejada del blog por cosas personales y uff...
    ¡Un besazo guapa!

    ResponderEliminar
    Respuestas
    1. Hola Ireneeee! Genial bonita :D Te avisaré con la entrada de tu libro, prometido. Besos!

      Eliminar
  3. Hola! Mil gracias por el tutorial. Yo es que soy muy patosa en programación y estas cosas me cuestan horas pero lo has dejado muy clarito.
    Besos ^^

    ResponderEliminar
    Respuestas
    1. Hola! Jo, es bueno saberlo! Gracias por comentar y espero que te ayude mucho. Besos! :)

      Eliminar
  4. Hola!
    Gracias por compartir estas cosas, la gente torpe como yo te lo agradecemos infinitamente ^^
    Voy a cotillear la sección entera y cuando tenga más tiempo la pondré en práctica.
    Un besote!

    ResponderEliminar
    Respuestas
    1. Eres estupenda, jo! Gracias a ti y espero que te guste esta sección. Besos!

      Eliminar
  5. Siempre agradezco este tipo de tutoriales para ayudarnos a mejorar los blogs, ¡muchas gracias!

    ResponderEliminar
  6. ¡Hola Mari!
    ¡TE ADORO! En serio, llevo buscando cómo poner un calendario en el blog de este tipo desde hace mucho tiempo, y gracias a ti puedo ponerlo en mi blog por fin. Muchas gracias por este super tutorial y por el curre que te has pegado en la entrada, que ha quedado todo muy bien explicado. Yo que no suelo entender estas cosas por fin me entero de algo jajaja
    ¡Un besote!

    ResponderEliminar
    Respuestas
    1. Hola guapa! Jo, yo también te adoro. ♥ Me alegra mucho que te haya ayudado, en serio. ¡Me hace muy feliz! Besos enormes y jo, gracias... Espero haberme explicado bien :)

      Eliminar
  7. ¡Hola!
    Gracias por el tutorial, voy a probarlo porque estaría de maravilla poner la programación que a veces se me pasa.
    Besos.

    ResponderEliminar
  8. Hola guapi, yo para estas cosas soy un pato mareado, vamos que no doy pie con bola, bueno que te voy a contar si lo sabes de primera mano, pero seguro que con este super tutorial hasta los más torpes (YO) podemos hacerlo.
    Yo por ahora no lo voy a poner, porque yo y la programación de reseñas no nos llevamos bien XD.
    Un besazo enorme

    ResponderEliminar
    Respuestas
    1. Hola preciosa! No te preocupes, si necesitas ayuda ya sabes que me tienes a mí para lo que sea. Un beso enorme :)

      Eliminar
  9. ¡Hola! Muchas gracias por el tutorial ^^ De momento no creo que lo ponga, pero si alguna vez me apetece ya sé como hacerlo.
    Besos :)

    ResponderEliminar
  10. ¡Hola hermosaaaa!
    No sabes lo bien que me viene este tutorial *-* No paro de buscar una manera de poner el calendario en mi blog para organizar mucho mejor las entradas pero ninguno me funciona así que ahora mismo me voy a poner a hacerlo con el tuyo porque seguro que queda genial ;)
    Eres una manitas jejejejej
    ¡Gracias por el tutorial, guapaaa!
    Un beso y nos leemos <33

    ResponderEliminar
    Respuestas
    1. Te quedó precioso, de verdad! Me alegra mucho que te ayudara :) Un beso enorme y sí, nos leemos! ♥

      Eliminar
  11. ¡Hola guapa!
    que bieeen este tipo de tutoriales <3, me encantan y además te explicas genial ^^. Yo ya tengo el calendario puesto (es diferente) pero estoy planteándome en ponerlo como el tuyo.

    ¡Un abrazo!

    ResponderEliminar
    Respuestas
    1. El tuyo es muy muy genial, de verdad. Tú eres mani manitas en tutoriales, un nivel insuperable jajaja! Un beso enorme :)

      Eliminar
  12. Hola guapa!
    Jaja voy a probar el código a ver si me sale bien jaja.
    Las barritas de debajo de los nombres de los gadgets de la barra lateral ¿Los has puesto tu o venían con la plantilla? Está chulo :P
    Muchísimas gracias por este tutorial <3 <3
    un beso!!

    ResponderEliminar
    Respuestas
    1. Okey reina! Lo he puesto yo, y haré pronto un tutorial para explicaros cómo cambiarlo. El diseño está hecho por mí. Si quieres uno y no te aclaras solo tienes que pedírmelo. Besos ;)

      Eliminar
  13. Hola!! yo siempre me lio con estas cosas, pero muchas gracias por el tutorial.
    Besos

    ResponderEliminar
  14. ¡Holaaaaaa!❤
    ¡Ay, la leche! Qué bien que haya tutoriales sobre este widget, yo también tengo que hacerlo porque me lo han pedido mucho, ¡jajaja!
    Está estupendamente explicado, no conocía esta sección de tu blog, pero me encanta, es genial porque siempre, siempre hay nuevas cosas que aprender. :))
    Estoy segura de que le servirá a muchos, es un widget muy bonito y práctico.
    ¡Nos leemooooos!

    ResponderEliminar
    Respuestas
    1. Hola Alex!! Desde luego que nunca nos acostaremos sin saber una cosa más, no? jajaa! Un beso enorme y muchas gracias por tu apoyo! Espero que les guste a tus lectores cuando lo hagas en tu blog ;)

      Eliminar
  15. Hola Bohemian.
    (Err...se que te llamas María, pero me encanta decirte Bohemian. ¿Puedo decirte así? Se que ya lo hago, pero pregunto por si a caso :D)

    La verdad siempre veía de estos calendarios en los blogs y no sabia para que servían, pero quería poner uno porque soy curiosa, jaja. Así que gracias por el tutorial. Voy a ponerlo en practica, aunque no prometo que quede tal cual como lo tienes tu. Es que puedo ser un lío con los códigos. Mejor lo hago en un blog de prueba y voy a leer la entrada hasta que me quede bien claro como se hace.
    Un beso y un abrazo.

    ResponderEliminar
    Respuestas
    1. Hola! Claro que puedes llamarme así, queda bonito jajaja! :)
      Seguro que te queda estupendo, voy a pasarme a ver cómo te ha
      quedado. Un beso enorme ♥

      Eliminar
  16. Ahh muy chulo a ver si me animo ahora que estoy convenciendo a mi compi de actualizar el blog.
    Un saludo

    ResponderEliminar
  17. Holaa!! siempre me había preguntado cómo se hacía eso jajaja se ve algo complicadoD: pero bueno, este tipo de entradas me gustan mucho porque aprendo cosas nuevas:3 jaja. Muchas gracias por tu comentario en mi entrada, eres un amor, eres increíble y a pesar de que no te conozco bien, puedo decir que eres una gran persona y en serio...muchas gracias por todos tus comentarios:3 si algún día quieres hablar o conocernos mejor, aquí te dejo mi correo Zaletaacostamonica@gmail.com

    Blessings!!

    ResponderEliminar
    Respuestas
    1. ¡Hola guapa! Desde luego que tus comentarios me dan la vida, jajaja! Eres estupenda y de verdad, yo también creo que eres una gran persona. Mañana mismo
      te mando un correo porque me encantaría saber más de ti :)

      Besotes! ♥

      Eliminar
  18. ¡Hola mi hermosa Mari! Super genial esta entrada me encantó, seguro la usaré para cuando tenga mi blog. Eres un amor y mil gracias por compartir esto con nosotros. Saludos ♥

    ResponderEliminar
    Respuestas
    1. Hola bonita! ♥ Estoy deseando ver ese blog, gracias a ti por leerme! Besos :)

      Eliminar
  19. No paraba de ver este calendario por todos los blogs, y estaba deseando saber cómo se hacía, así que no sabes cómo me alegra que lo hayas compartido *-*
    En cuanto pueda y tenga un poco más de tiempo lo pondré en práctica. ¡A ver cómo queda! :D
    ¡Besos!

    ResponderEliminar
    Respuestas
    1. Seguro que te queda estupendísimo, reina! Un beso enormeeeee :) Gracias a ti por pasarte siempre!

      Eliminar
  20. ¡Hola guapa!
    Me encantan estas entradas ya que ayudas a gente que como a mí me cuesta horrores todas estas cosas. Lo explicas de maravilla, muchas gracias. :)
    Besos.

    ResponderEliminar
    Respuestas
    1. Hola guapa! No sabes lo feliz que me hace leer eso, de verdad. Si necesitas ayuda ya sabes! Besos :)

      Eliminar
  21. ¡Hola guapísima!
    Muchas gracias por el tutorial, cuando tenga un poco de tiempo lo pondré en mi blog porque está todo super bien explicado y es precioso^^
    Esto ayuda a todos aquellos (como yo) que somos un desastre en la edición jajaja
    ¡Un beso! <3

    ResponderEliminar
    Respuestas
    1. ¡Hola! Estupendo reina :) Me alegra que te ayudeeee! Besotes ♥

      Eliminar
  22. Gracias por este tutorial, me lo guardo en favoritos para cuando algún día me anime a tocar a poner algo con HTML, y es que veo tanto código y me vuelvo loca... No obstante me parece tan guay que espero pronto ponerlo por el blog sin hacerme el ... un lío jajaj
    Besotes

    ResponderEliminar
    Respuestas
    1. Okey reina! Si te entiendo, yo llego a ver esto hace meses y vomito sobre él, por el miedo que me daba. Un beso enorme :)

      Eliminar
  23. Hola Mari!

    Y ahora es cuándo te lanzo un caga tió de metro y medio, con amor, en el cabolo. Ya te valeeeeee, ya. Y sí, sabes porqué lo digo.

    Lo encuentro muy práctico para todos aquellos que les sobre el tiempo y estén dispuestos, además a añadir otro calendario y hacer la chorrá de html para organizarlo todo. Yo es algo que no me puedo permitir, además de tener la manía de que los calendarios me molestan soberanamente. No por nada en especial, sino porqué es un estrés verlo ahí, como un grano, recordándote lo que tienes que hacer.

    Pero bueno, que para gustos, colores. Y seguro que más de uno, mas de dos y más de tres se animan a ello.

    Un besote enoooormeee!! ♥

    PS: Caga tió llegando a cierto rinconcito de Valencia en 3....2...


    ResponderEliminar
    Respuestas
    1. ¡Hola Iris! Yo lo hago para tener un poquito de organización, porque si no el caos cae sobre mí, fuertemente. Un beso enormeeeee! :)

      Eliminar
  24. Hola!
    Me encantan los blogs que os tomáis vuestro tiempo en hacer esta sección para ayudarnos a los demás... además te has explicado perfectamente y seguramente me animaría si no viera que me va a robar un montón de tiempo además de que tendría que estar toqueteando html cada dos por tres jaja de momento no me animo, porque tampoco publico en días fijos (a pesar de que lo intento..)
    Un beso!

    ResponderEliminar
    Respuestas
    1. ¡Hola! Desde luego que lo hago y siempre lo haré con mucho gusto, para vosotros/as. Me alegra que te haya gustado la entrada y te entiendo mucho,
      esto lleva su tiempo! Besos!

      Eliminar
  25. ¡Qué bonito calendario! Me encantó, a ver si me animo a ponerlo en algún momento. Muchas gracias ♥

    ResponderEliminar
    Respuestas
    1. ¡Hola Tamara! Un beso y espero que te quede estupendo. ♥

      Eliminar
  26. ¡Hola Mari!

    Acabo de ver esta entrada, no sabes cuánto me alegro y me ayuda muchísimo, ya que el calendario que utilizo yo (que me gustaba mucho porque salia con un bocadillito el evento que habría tal día sin tener que meterse en una página como en este) pues me estaba hartando bastante, pero sin duda este me parece mucho más bonito. Lo decoraré a mi gusto :) molto gracie!

    Un saludo! :)

    ResponderEliminar
    Respuestas
    1. ¡Hola! Siiii? Ay, pues con bocadillo seguro que me hubiera gustado a mí, jajaja! El mío es más sosete. Un beso enorme y gracias por pasarte ;)

      Eliminar
  27. ¡Ohhhh! Que oportuno ♥
    Me encantaba tu calendario y que nos hayas explicado como conseguir algo así me ha puesto muy contenta, ¡gracias por compartirlo!
    Yo he tenido 2 calendarios antes. El primero, que saqué de ciudad blogger, me andaba bien pero a lo último se desconfiguraba el tamaño. El segundo me marcaba las entradas que publiqué mal (porque a veces pulico la entrada sin darme cuenta, en vez de guardarla. Si, soy un desasrtre ). Voy a ver si pruebo tu calendario, que seguro que me resulta muy bien *-*
    Un beso enorme

    ResponderEliminar
    Respuestas
    1. ¡Hola preciosa! En serio? Espero que te sea muy útil y ya sabes, si tienes algún problema solo tienes que decírmelo, vale? Un beso enorme! ♥ ERES GENIAL :)

      Eliminar

¡OH! ¿Vas a comentar? No sabes lo feliz que me harás. Me pasaré por tu blog lo antes posible, siempre lo hago. Y si ves que no te respondo al comentario por aquí, es porque lo haré en redes sociales por privado o en un comentario en tu blog. ♥ ¡Mil gracias por hacerme feliz con tus palabras!