Como ya sabréis la mayoría de vosotros, incorporar un calendario de publicación de artículos en un blog con tecnología Blogger es relativamente sencillo y en el post Calendario con todos los post publicados en Blogger ya daba unas instrucciones concretas para su implementación.
A modo de recordatorio:
- 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: '#5692ce', newtab: 1, // 0:abre link en la misma ventana | 1:abre link en ventana nueva 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
Los parámetros de configuración son:
- 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.
- 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 del calendario).
- Tenemos que escribir la url de nuestro blog en el último script, dónde aparece https://www.tecnoblog.guru
resaltado en negrita.
Puedes ver el ejemplo funcionando a continuación.
De hecho, me sorprende gratamente que numerosos lectores del blog hayan incorporado este widget a su bitácora.
También sois muchos los que me habéis enviado emails preguntándome si era posible realizar un diseño menos espartano y la respuesta es un SI rotundo.
Sin necesidad de modificar el código del gadget, tan sólo incorporando unas líneas de código o estilos de presentación, podemos personalizar nuestro diseño:
<div id='calendar'><strong>Loading...</strong></div>
<script>
var conf = {
bgcolor: '#5692ce',
newtab: 0, // 0:abre link en la misma ventana | 1:abre link en ventana nueva
tooltip: false, // 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>
<style type="text/css">
@font-face {
font-family: 'Catamaran';
src: local('Catamaran Regular'), local('Catamaran-Regular'), url(https://fonts.gstatic.com/s/catamaran/v4/o-0IIpQoyXQa2RxT7-5r5TRA.woff2) format('woff2');
}
#contentDate *{font-family:'Catamaran'!important}
#spanLeft, #spanRight, #spanMonth, #spanYear{border:0;cursor:pointer;line-height:20px!important;background-color:#5692ce;padding:0!important}
#spanMonth,#spanYear{background-color:#fff!important;font-size:16px!important;color:#000!important;border:0!important;cursor:text!important;pointer-events:none}
#spanLeft:before{content:'<';font-size:15px;color:#fff;display:inline-block;padding:0 10px!important}
#spanRight:after{content:'>';font-size:15px;color:#fff;display:inline-block;padding:0 10px!important}
#spanLeft:hover, #spanRight:hover{background-color:#515151!important}
#spanLeft img, #spanRight img, #spanMonth img, #spanYear img{display:none}
#contentDate table{margin-bottom:0!important}
#contentDate table tr td{padding:0}
#contentDate table tr td a{width: 28px;display:inline-block}
#contentDate table tr td a[style="text-decoration:none;color:#000;cursor:default;border-radius:100%;border:2px solid #5692ce;cursor:pointer;"], #contentDate table tr td a[style="text-decoration:none;color:#000;cursor:default;border-radius:100%;border:2px solid #5692ce;cursor:pointer;border-radius:100%;border:2px solid #5692ce;cursor:pointer;"] {border:0!important;border-radius:0!important;background-color:#4080cc;color:#fff!important}
#contentDate table tr td a[style="text-decoration:none;color:#000;cursor:default;border-radius:100%;border:2px solid #5692ce;cursor:pointer;"] span {color:#fff!important}
#contentDate table tr td a[style="text-decoration:none;color:#000;cursor:default;border-radius:100%;border:2px solid #5692ce;cursor:pointer;"]:hover {background:#515151}
#contentDate table{box-shadow:none!important;font-size:13px!important;width:100%!important}
#contentDate table tr{background:#fff!important}
#contentDate table tr td{text-align:center!important}
#contentDate{width:240px!important; display:inline-block}
#lblToday{background:#fff}
#lblToday a{color:#bd3434!important; font-size:medium; width:auto!important}
</style>
Y obtenemos un resultado asombroso.
Si tienes conocimientos técnicos de css (siglas en inglés de Cascading Stylesheets) podrás personalizar el calendario a tu gusto cambiando fuentes de texto, tamaños, colores y un sinfín de propiedades de diseño.