Calendario de publicación para Blogger (II)

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:

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: '#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.rawgit.com/jmacuna/calendar-widget/master/create-calendar.js' type='text/javascript'></script>
   <script src='https://jmacuna.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

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://jmacuna73.blogspot.comresaltado 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, 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.rawgit.com/jmacuna/calendar-widget/master/create-calendar.js' type='text/javascript'></script>
<script src='https://jmacuna.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 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;'] {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.
Loading...
Si tienes conocimientos técnicos 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.

Jose Maria Acuña Morgado - Desarrollador Web