• 18/04/2024
  • Kusarive
  • 0

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/JavascriptAñadir

    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:

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="https://www.tecnoblog.guru/2015/02/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!!