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.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

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.

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.




32 comments:

  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
  9. Se puede agregar en cualquier tipo de página?

    ResponderEliminar
  10. Hola Lety,
    el calendario está diseñado para que muestre las entradas publicadas en el CMS Blogger.

    No obstante, si te interesa incorporar un calendario en cualquier otra tecnología (sin que aparezcan marcados los días de publiación de contenido), lo puedes hacer siguiendo las instrucciones de este artículo: Calendario con todos los post publicados en Blogger, que aparecen al final del mismo.

    También puedes añadir un calendario en tu navegador Google Chrome con esta extensión:

    Calendario Anual en Google Chrome

    ResponderEliminar
  11. NO ME HA SIDO FACIL OBTENER EL HTM DEL CALENDARIO

    ResponderEliminar
  12. Hola César, gracias por visitar el blog.
    Cualquier duda o sugerencia puedes hacérmela llegar a través del blog o enviando un email a la dirección info@tecnoblog.guru

    Un saludo.

    ResponderEliminar
  13. Saludos a todos. Soy maestro y me gustaría tener en mi blog un calendario tipo agenda en dónde se publiquen los distintos eventos y tareas pendientes, exámenes, etc. ¿Es esto posible? Gracias

    ResponderEliminar
  14. Hola Roberto, gracias por visitar el blog :)
    Este widget está diseñado para mostrar los artículos que se han publicado a lo largo del año, pero no se ajusta a tus necesidades.
    En ese caso, quizás puedas utilizar Google Calendar u otro programa similar.
    Saludos!

    ResponderEliminar
  15. Supongo que si mi página admite código html se puede aplicar.

    ResponderEliminar
  16. ¡Holis!! (ɔ◔‿◔)ɔ ♥
    Me encanto este calendario me lo apunto a mi blog
    te dejo mi blog para que lo visites
    https://entreletrasnoesunblogderesenas.blogspot.com/

    ResponderEliminar
  17. Hola Kc,
    me alegro mucho de que el calendario te haya servido y lo hayas implementado en tu blog que, por cierto, me ha gustado mucho!
    Saludos.

    ResponderEliminar
  18. Al poner la dirección de mi web no sale el calendario, en su lugar pone loading.. si la dejo con la dirección de tu web si sale bien el calendario. El mio es un blog de blogger. Podrias indicarme que hago mal. Muchas gracias

    ResponderEliminar
    Respuestas
    1. Buenos días, parece que no has habilitado la opción de permitir feed para el blog. Lo debes hacer desde la opción Configuración. Adjunto imagen en https://prnt.sc/l7Kv3jT4CjcR

      Eliminar
  19. Muchas gracias, ahora va perfecto.
    Se podría hacer un calendario igual, pero que en vez de señalar las entradas del blog, se resaltaran las fechas próximas que yo pusiera y al pasar el ratón por encima de la fecha saliera el nombre del evento?
    Un saludo y muchas gracias.

    ResponderEliminar
    Respuestas
    1. Este widget está diseñado para mostrar los artículos que se han publicado a lo largo del año. Siento que no cubra tus necesidades.
      Gracias a ti. Un saludo.

      Eliminar
  20. Hola!! Gracias por la info. Quisiera saber si se puede agregar eventos al calendario. Muchas gracias!

    ResponderEliminar
    Respuestas
    1. Hola Victoria, el widget está diseñado exclusivamente para mostrar los artículos que se han publicado a lo largo del año en la plataforma Blogger.
      Gracias a ti. Un saludo.

      Eliminar