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.
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.
Siempre siguiendo tus artículos Chema, muy buenos como este.
ResponderEliminarMuchísimas gracias Hiber!
ResponderEliminarUn abrazo ;)
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.
ResponderEliminarEs posible configurarlo?
Y otra cuestion, podria usarse solamente para mostrar en el calendario resultados de determinadas etiquetas?
Mil gracias por todo.
Toni
Hola Deixa la Teva Empremta,
ResponderEliminarpido 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.
no me sirvio
ResponderEliminarno sirve
ResponderEliminarbueno este tan mal diseño jaaj
ResponderEliminarHola Kevi y Josue,
ResponderEliminargracias por visitar el blog y si puedo ayudaros en algo, no dudéis en indicármelo.
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.
ResponderEliminarHola fenix,
ResponderEliminarla 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>
Muchas gracias.
ResponderEliminarOtra 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
ResponderEliminarHola de nuevo fenix,
ResponderEliminarla 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 :))
Se puede agregar en cualquier tipo de página?
ResponderEliminarMientras tu página admita código hmtl, si!
EliminarHola Lety,
ResponderEliminarel 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
NO ME HA SIDO FACIL OBTENER EL HTM DEL CALENDARIO
ResponderEliminarHola César, gracias por visitar el blog.
ResponderEliminarCualquier 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.
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
ResponderEliminarHola Roberto, gracias por visitar el blog :)
ResponderEliminarEste 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!
Supongo que si mi página admite código html se puede aplicar.
ResponderEliminar¡Holis!! (ɔ◔‿◔)ɔ ♥
ResponderEliminarMe encanto este calendario me lo apunto a mi blog
te dejo mi blog para que lo visites
https://entreletrasnoesunblogderesenas.blogspot.com/
Hola Kc,
ResponderEliminarme alegro mucho de que el calendario te haya servido y lo hayas implementado en tu blog que, por cierto, me ha gustado mucho!
Saludos.
2021 Tanks Necesitaba algo asi
ResponderEliminarmuy bueno
ResponderEliminarAl 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
ResponderEliminarBuenos 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
EliminarMuchas gracias, ahora va perfecto.
ResponderEliminarSe 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.
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.
EliminarGracias a ti. Un saludo.
ay si gracias
ResponderEliminarHola!! Gracias por la info. Quisiera saber si se puede agregar eventos al calendario. Muchas gracias!
ResponderEliminarHola 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.
EliminarGracias a ti. Un saludo.