Calendario con todos los post publicados en Blogger

La mayoría de los gestores de contenido proporcionan herramientas precisas (widgets o plugins) para mostrar información acerca de los archivos publicados en el blog ordenados de manera cronológica. Si queremos dotar a nuestro blog de un diseño más atractivo, también podemos presentar un calendario de publicaciones.
Vamos a hacer ésto posible con tan sólo unas pocas líneas de código.
Éstos son los pasos a seguir:

1. Selecciona la entrada Diseño del panel principal de Blogger.
2. Pulsa sobre el link Añadir un gadget y se abrirá una ventana con diferentes alternativas
3. Desplazamos el scroll de la nueva ventana hacia abajo hasta llegar a la opción:
   HTML/Javascript
   Añade una característica de un tercero u otro código a tu blog.
   
4. Introduce el Título del widgets (por ejemplo Calendario)
5. En la caja Contenido pega el siguiente código:
   

   
   <div id='calendar'><strong>Loading...</strong></div>
   <script>
   var conf = {
    tooltip: true, // false:title por defecto | true:tooltip con css3
    start:   1, // 0:Domingo | 1:Lunes
    days:    "Lunes|Martes|Miercoles|Jueves|Viernes|Sabado|Domingo",
    months:  "Enero|Febrero|Marzo|Abril|Mayo|Junio|Julio|Agosto|Septiembre|Octubre|Noviembre|Diciembre",
    date:    "Ir al mes actual"
   }
   </script>
   <script src='https://www.googledrive.com/host/0B5G3cbs08P16fnc3cDVkdllDTDNONkdrNHM1b2NUWXpsLWxKSmQwZHljQWVxUFJWVzBKODA/create-calendar.js' type='text/javascript'></script>
   <script src='http://jmacuna73.blogspot.com/feeds/posts/summary?max-results=1000&alt;=json-in-script&orderby;=published&callback;=createCalendar' type='text/javascript'></script>
   

6. Por último hacemos click sobre el botón Guardar

Vamos a analizar los parámetros de configuración:

• tooltip: false para mostrar el tooltip por defecto o true para mostrarlo en forma de bocadillo.
• start: 1 si queremos que el calendario empiece en Lunes o 0 si empieza en Domingo.
• days: días de la semana. Nota: si ponemos la variable start a cero, el primer día de la semana será el Domingo
• months: meses del año.
• date: texto que aparece cuando posicionamos el cursor encima de la fecha actual (parte inferior en color gris).
• Tenemos que escribir la url de nuestro blog en el último script, dónde aparece http://jmacuna73.blogspot.comresaltado en negrita

Si ponemos la variable tooltip a true, tenemos que añadir los estilos correspondientes de la siguiente manera:

<style type="text/css">
a.tooltip{
 display:inline;
 position:relative;
} 
a.tooltip:hover:after{
 text-align:left;
 font-size:11px;
 background:#333;
 background:rgba(0,0,0,.8);
 border-radius:5px;
 bottom:24px;
 color:#fff;
 content:attr(tooltip);
 left:-40%;
 padding:5px;
 position:absolute;
 z-index:98;
 width:180px;
}
a.tooltip:hover:before{
 border:solid;
 border-color:#333 transparent;
 border-width:6px 6px 0 6px;
 bottom:18px;
 content:"";
 left:20%;
 position:absolute;
 z-index:99;
}
#calendar{
 height:200px
}
</style>
<div id='calendar'><strong>Loading...</strong></div>
<script>
var conf = {
 tooltip: true, // false:title por defecto | true:tooltip con css3
 start:   1, // 0:Domingo | 1:Lunes
 days:    "Lunes|Martes|Miercoles|Jueves|Viernes|Sabado|Domingo",
 months:  "Enero|Febrero|Marzo|Abril|Mayo|Junio|Julio|Agosto|Septiembre|Octubre|Noviembre|Diciembre",
 date:    "Ir al mes actual"
}
</script>
<script src='https://www.googledrive.com/host/0B5G3cbs08P16fnc3cDVkdllDTDNONkdrNHM1b2NUWXpsLWxKSmQwZHljQWVxUFJWVzBKODA/create-calendar.js' type='text/javascript'></script>
<script src='http://jmacuna73.blogspot.com/feeds/posts/summary?max-results=1000&alt;=json-in-script&orderby;=published&callback;=createCalendar' type='text/javascript'></script>

Instrucciones de uso:

• Pulsa sobre las flechas ◀ y ▶ para moverte por los meses anterior/siguiente
• Haz clic sobre el mes actual y aparecerá un desplegable con los doce meses del año
• Haz clic sobre el año en curso y aparecerá un desplegable para seleccionar otro año.
  Deja pulsadas las flechas ⊻ o ⊼ para avanzar más rápido hasta el año deseado.
• Si queremos volver a la situación inicial, haremos clic en la fecha actual que aparece en la parte inferior del calendario

Podéis ver el ejemplo funcionando a continuación.