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 forma 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 = {
    bgcolor: '#1e4e7e', 
    newtab:  1,         // 0:abre link en la misma ventana | 1:abre link en ventana nueva
    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://cdn.jsdelivr.net/gh/jmacuna/calendar-widget@master/create-calendar.js' type='text/javascript'></script>
   <script src='https://www.tecnoblog.guru/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:

• bgcolor: color de fondo del calendario.
• newtab: 0 para abrir el artículo seleccionado en la misma ventana o 1 para abrir el link en una ventana nueva.
• 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 en la variable days 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 https://www.tecnoblog.guru resaltado en negrita.
  
  Importante: si el calendario no se carga en tu página, lo más probable es que sea debido a la incompatibilidad del protocolo seguro como consecuencia de una redirección de tu blog a través de protocolo http (contenido mixto). En este caso, la solución es muy sencilla.
  Reemplaza la parte de la url https://www.tecnoblog.guru/feeds del script por https://www.blogger.com/feeds/TUIDDEBLOGGER, dónde TUIDEDEBLOGGER es el parámetro numérico que aparcen como blogID en tu blog.
  
  En mi caso: https://www.blogger.com/feeds/5415513870832441455/posts/summary?max-results=1000&alt=json-in-script&orderby=published&callback=createCalendar
  
  Y si aún así no funciona, no dudes en preguntarme a través del blog o de mi cuenta de correo info@tecnoblog.guru. Estaré encantado de ayudarte!!

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

<style type="text/css">
.tooltip{
  position:absolute;
  display:none;
  border-radius:3px;
  background:#333;
  color:#fff;
  font-size:11px;
  font-family:Verdana,Geneva,sans-serif,Helvetica;
  padding:8px;
  white-space:pre-line
}
</style>

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.



Puedes descargarte el ejemplo para modificarlo o personalizarlo libremente en Calendario para Blogger.
Los ficheros que intervienen son:

• index.html
• create-calendar.js

Por último y a petición popular, os dejo el código html para insertar un calendario en cualquier blog (Blogger, Wordpress, Drupal, Joomla, etc) o Página Web:

<style type="text/css">
iframe#calendar html, #calendar body{
 overflow:hidden
}
iframe#calendar{
 position:absolute;
 border:0;
 width:240px;
 height:230px
}
</style>
<iframe id='calendar' src='about:blank' scrolling='no'></iframe>
<script>
var conf = {
    bgcolor: '#741826', //color del calendario
 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://cdn.jsdelivr.net/gh/jmacuna/calendar-widget@master/create-calendar-iframe.js' type='text/javascript'></script>

Lo puedes visualizar en: Calendario web

Si quieres disponer del calendario en tu navegador Google Chrome, instala la extensión:

Calendario Anual en Google Chrome

Muchas gracias!!

Jose Maria Acuña Morgado - Desarrollador Web