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:
- Selecciona la entrada Diseño del panel principal de Blogger.
- Pulsa sobre el link Añadir un gadget y se abrirá una ventana con diferentes alternativas
- 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. - Introduce el Título del widgets (por ejemplo Calendario)
-
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> - 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!!