2 de abril de 2018

Calendario de publicación para Blogger (II)

Calendario publicación artículos - Blogger
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/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: '#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.com 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.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{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.

Loading...


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.




13 comentarios:

  1. Siempre siguiendo tus artículos Chema, muy buenos como este.

    ResponderEliminar
  2. Una aportación fantástica, mil gracias, lo implemento en mi web. Pero una cuestión, hay dias que publico varios post y no puedo escoger cual de los post se me abra, o ensu defecto que se visualicen como resultado un resumen de todos los post del dia.
    Es posible configurarlo?
    Y otra cuestion, podria usarse solamente para mostrar en el calendario resultados de determinadas etiquetas?
    Mil gracias por todo.
    Toni

    ResponderEliminar
  3. Hola Deixa la Teva Empremta,
    pido disculpas por la demora en la contestación pero no he tenido acceso al portátil en los últimos días.

    El widget está diseñado para mostrar todas las entradas del blog por fecha de publicación, no hay posibilidad de filtrar por categorías o etiquetas.
    Y respecto de la otra cuestión, se muestran por medio de un tooltip todas las publicaciones en un mismo día pero el link al que se accede es el del último post publicado en ese día concreto.
    Aprecio mucho tus palabras :)

    Un saludo.

    ResponderEliminar
  4. Hola Kevi y Josue,
    gracias por visitar el blog y si puedo ayudaros en algo, no dudéis en indicármelo.

    ResponderEliminar
  5. Hay alguna posibilidad de que esa fecha" el 6" que esta remarcado se pueda quitar. Lo digo porque induce a duda al mirar la fecha real del calendario.

    ResponderEliminar
  6. Hola fenix,
    la funcionalidad de este calendario es la de mostrar los días de publicación de un blog pero si quermos ocultar el marcado desde el diseño podemos hacerlos desde las propiedades de estilos.

    En este caso, deberías utilizar este código:


    <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:#fff;color:#000!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:#fff}
    #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>

    ResponderEliminar
  7. Otra pregunta. El calendario señala el mes de Octubre al autoiniciarse y no va al mes actual¿Se puede corregir esto, sin tener que hacerlo manualmente? Gracias

    ResponderEliminar
  8. Hola de nuevo fenix,
    la idea del calendario es mostrar los artículos publicados en la plataforma Blogger.
    Los días 6 y 27 de noviembre aparecen marcados en azul porque corresponden a los días de publicación de mi blog (https://jmacuna.tecnoblog.guru).

    Si en el punto 5 de este post, cambias esta url por la dirección de tu blog, aparecerán marcados los artículos publicados en tu blog.

    Si lo que quieres implementar es un calendario sin más, puedes utilizar el que propongo en: Calendario con todos los post publicados en Blogger, al final del mismo.

    Gracias a ti :))

    ResponderEliminar