18 de febrero de 2015

Calendario con todos los post publicados en Blogger

Calendario Blogger
La mayoría de los gestores de contenido proporcionan herramientas precisas (widgets o plugins) para mostrar información acerca de los archivos publicados en el blog ordenados de forma cronológica. Si queremos dotar a nuestro blog de un diseño más atractivo, también podemos presentar un calendario de publicaciones.


Vamos a hacer ésto posible con tan sólo unas pocas líneas de código.

Éstos son los pasos a seguir:

  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: '#1e4e7e', 
     newtab:  1,         // 0:abre link en la misma ventana | 1:abre link en ventana nueva
     tooltip: true,      // 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>
    
  6. Por último hacemos click sobre el botón Guardar

Vamos a analizar los parámetros de configuración:

  • 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.
  • tooltip: false para mostrar el tooltip por defecto o true para mostrarlo en forma de bocadillo.
  • 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 en color gris).
  • Tenemos que escribir la url de nuestro blog en el último script, dónde aparece https://www.tecnoblog.guru resaltado en negrita.

    Importante: si el calendario no se carga en tu página, lo más probable es que sea debido a la incompatibilidad del protocolo seguro como consecuencia de una redirección de tu blog a través de protocolo http (contenido mixto). En este caso, la solución es muy sencilla.
    Reemplaza la parte de la url https://www.tecnoblog.guru/feeds del script por https://www.blogger.com/feeds/TUIDDEBLOGGER, dónde TUIDEDEBLOGGER es el parámetro numérico que aparcen como blogID en tu blog.

    En mi caso: https://www.blogger.com/feeds/5415513870832441455/posts/summary?max-results=1000&alt=json-in-script&orderby=published&callback=createCalendar

    Y si aún así no funciona, no dudes en preguntarme a través del blog o de mi cuenta de correo info@tecnoblog.guru. Estaré encantado de ayudarte!!
Si ponemos la variable tooltip a true, tenemos que añadir la clase tooltip de la siguiente manera:

<style type="text/css">
.tooltip{
  position:absolute;
  display:none;
  border-radius:3px;
  background:#333;
  color:#fff;
  font-size:11px;
  font-family:Verdana,Geneva,sans-serif,Helvetica;
  padding:8px;
  white-space:pre-line
}
</style>


Instrucciones de uso:

  • Pulsa sobre las flechas ◀ y ▶ para moverte por los meses anterior/siguiente
  • Haz clic sobre el mes actual y aparecerá un desplegable con los doce meses del año
  • Haz clic sobre el año en curso y aparecerá un desplegable para seleccionar otro año.
    Deja pulsadas las flechas o para avanzar más rápido hasta el año deseado.
  • Si queremos volver a la situación inicial, haremos clic en la fecha actual que aparece en la parte inferior del calendario


Podéis ver el ejemplo funcionando a continuación.



Puedes descargarte el ejemplo para modificarlo o personalizarlo libremente en Calendario para Blogger.
Los ficheros que intervienen son:

Por último y a petición popular, os dejo el código html para insertar un calendario en cualquier blog (Blogger, Wordpress, Drupal, Joomla, etc) o Página Web:

<style type="text/css">
iframe#calendar html, #calendar body{
 overflow:hidden
}
iframe#calendar{
 position:absolute;
 border:0;
 width:240px;
 height:230px
}
</style>
<iframe id='calendar' src='about:blank' scrolling='no'></iframe>
<script>
var conf = {
    bgcolor: '#741826', //color del calendario
 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-iframe.js' type='text/javascript'></script>
Lo puedes visualizar en: Calendario web

Si quieres disponer del calendario en tu navegador Google Chrome, instala la extensión:

Calendario Anual en Google Chrome

Muchas gracias!!


69 comments:

  1. Hola. Le di mil vueltas y no encuentro la solución. No me quedan alineados los desplegables de mes y año: se van desplazando hacia abajo. ¿Podrías decirme a qué se debe?
    ¿Cómo podría centrarlo?
    ¿Hay que modificar el JS? Gracias.
    Lo puse al pie de: www.monialus.com.ar

    ResponderEliminar
  2. Buenos días Moni,
    los desplegables del calendario no se muestran bien porque probablemente se produzcan conflictos con alguna propiedad u hoja de estilo utilizada en el blog.

    Para evitar este inconveniente, te recomiendo subir la página (index.html) a un servidor público tipo Google Drive (instrucciones).

    Lo que tienes que hacer es muy sencillo, utiliza la misma página index cambiando la url del script (http://jmacuna73.blogspot.com) por la url de tu blog.

    Por último, en el gadget html/javascript escribe el código correspondiente a un elemento iframe con la url pública de la página html.

    Ejemplo:

    <iframe src="https://www.googledrive.com/host/IDPUBLICA/" frameborder="0" allowfullscreen="allowfullscreen" style="width:98%;height:240px;"></iframe>

    Ánimo, es mucho más fácil de lo que parece :)
    Un saludo!!

    ResponderEliminar
  3. Bueno... Vamos avanzando.
    Te comento: geniales tus indicaciones; calendario funcionando al 95 %.

    ¿Qué faltaría?

    1) En el desplegable de los meses no se ve diciembre y el borde inferior del recuadro (también pasa en el original).
    2) ¿Cómo lo adapto a alguna barra lateral (tanto la izquierda como la derecha tienen 223 px)?
    3) Tengo un par de días donde he subido más de una entrada (dos el 28/11/2014 y tres el 9/9/2014)... Sólo se ve una por fecha. ¿Es fácil modificarlo?

    Cosas que he "descubierto" (que seguramente conoces pero quizás no alguien que lea esta entrada):

    - Si el título de una entrada empieza con comillas dobles, el globo en el calendario aparece en 'blanco'. Solución: colocar comillas simples (modifiqué dos títulos de entradas: es fácil cotejar porque tengo pocas -solo 30, por ahora-).
    - La referencia al blog hay que comenzarla, sí o sí, con https://www.minombredeusuario.blogspot.com/... Para mi caso, había colocado: http://www.monialus.com.ar/... (lo tengo redireccionado); resulta ser que (lo probé con Firefox y Chrome) el navegador lo toma como "contenido potencialmente peligroso" y lo bloquea (aparece un escudito gris).
    - Si se decide empezar la semana en domingo, hay que cambiar el orden en el listado: colocar domingo al principio de la lista (para el mes en curso, por ejemplo, si no se cambia el orden, se lee: "lunes primero de febrero", siendo domingo).
    - La acentuación de "miércoles" y "sábado" la corregí con el editor en línea de Google (no sirve aplicar de antemano "acute").

    Nada más por ahora. Pondero la velocidad con la que el calendario carga. Mi intención es colocarla en la barra lateral derecha (queda 'cortado' si lo pongo con los parámetros actuales y no me doy idea de cómo adaptarlo) en lugar de las entradas tradicionales, ya que cada vez que uno quiere ver determinados meses, al desplegarse recarga la página.

    Espero ansiosa tus respuestas a 1), 2) y 3.

    Un millón de gracias es poco.

    ResponderEliminar
  4. Buenos días Moni,
    eres una fantástica "beta tester" ;)

    Manos a la obra:

    1) Tienes que ajustar el tamaño del iframe al calendario. Cambia el alto del iframe (en el original 'height:240px') hasta adaptarlo al alto del calendario. Se trata de prueba y error hasta dar con la altura adecuada.
    2) El calendario tiene un ancho por defecto de 240px. Si quieres hacerlo más pequeño bastará con añadir los siguientes estilos en tu plantilla index.html y después subirla de nuevo a tu directorio público en Google Drive (elimina el index alojado y súbelo de nuevo con esta modificación).

    Instrucciones:

    - antes del cierre de la etiqueta </style> añade estas clases:


    #contentDate #content table tr td{
    width:20px!important
    }
    #contentDate #chead td table:first-child{
    max-width:180px
    }
    #selectYear table tr td{
    padding:2px 20px
    }
    #selectMonth table tr td{
    padding:2px 10px
    }
    #selectYear{
    left:120px!important
    }
    #selectMonth{
    left:43px!important
    }


    3) Este punto se me antoja difícil de solucionar ya que el json que devuelve el script de Blogger retorna una entrada por día y como muy bien indicas Mónica, si hay más de una entrada muestra la última publicada :(

    Puntos adicionales:

    - Problema con comillas dobles: ya lo he solucionado en el script original y no tienes que hacer nada para su uso correcto.
    - Problema con el certificado de seguridad: las direcciones con protocolo seguro (https) son verificadas por los navegadores web y en caso de que el certificado correspondiente no esté firmado, te avisa de su uso potencialmente peligroso. Pero es un comportamiento normal de cualquier navegador web.
    - Como indico en el artículo, si decidimos comenzar la semana en domingo tenemos que escribirlo como primer día de la semana en la variable days y poner la variable start a 0
    - Las cadenas acentuadas que afectan a días y meses de la semana se ponen tal cual: no hay que utilizar entidades html porque son variables javascript y no tags html.

    Espero que hayan quedado claras mis indicaciones y puedas adaptar el calendario a tus necesidades.
    Un saludo!!

    ResponderEliminar
  5. Reporte final

    Antes que nada, gracias por lo de "beta tester" y todas las indicaciones para adaptarlo a mi necesidad, gusto, obsesión o como quieras llamarlo.
    Creo que todos los blogueros (si asumo que estoy en ese camino) lo somos.

    Primero: el tema de que no apareciera "diciembre" en el listado desplegable, como así también los bordes inferiores de los meses que tienen seis filas (en el modelo de tu entrada, junio del 2014 es un claro ejemplo), es debido al height, dentro de "style" de "index.html":

    #calendar{
    margin:0 auto;
    width:220px;
    height:200px
    }

    Poniendo el height en 222 px (ni uno más ni uno menos) queda solucionado el tema (sí: probé de a un píxel).

    Segundo: con respecto al ancho del calendario, me quedo con tu versión original. Tiene el ancho justo como para evitar que los meses largos del encabezado modifiquen el ancho del calendario. Ahí me puse a 'jugar', entonces, con las dimensiones que me diste para el iframe, quedándome (para un ancho de 223 px de la columna donde lo puse):

    <iframe src="https://www.googledrive.com/host/IDPUBLICA" frameborder="0" allowfullscreen="allowfullscreen" style="width:560px;height:230px;margin-left:-185px"></iframe>

    Al ancho en 560 llegué dado que el iframe me "tapaba" parte del contenido de los globos de las entradas que aparecían en jueves, viernes o sábado, por ejemplo ("mi" semana empieza en domingo). Al alto en 230 llegué del mismo modo que al 222 en el código del "index.html": probando hasta que se visualizó la línea inferior del desplegable de los meses. Y al margen izquierdo en negativo, hasta que logré "centrar" el calendario en la columna.

    Tercero: lo de varias entradas en un mismo día de las cuales aparece solo una, la verdad que es un punto en el océano dado lo elegante que queda el calendario. Muy, pero muy bonito. ¡Y en tonos azules, como mi blog!

    Una última: no sé si habrás tenido alguna experiencia nefasta, pero a mí me resultó el editor en línea de Google Drive: botón secundario del ratón en el archivo html > abrir con > HTML Editey (también está JavaScript Editey). Evité borrar el archivo, volver a subir el modificado y sacar de nuevo el ID para insertarlo en el código. ¿Te imaginas si, con cada píxel que modificaba, tenía que hacer todo ese proceso?

    Miles de gracias por todo. Saluditos, ¡¡¡geniooo!!!

    ResponderEliminar
  6. Muchas gracias Moni por tu disposición, es un verdadero placer tener una audiencia como la tuya en mi blog :)

    Un abrazo!!

    ResponderEliminar
  7. Muchísimas gracias, me ha quedado genial

    ResponderEliminar
  8. Gracias a ti hllacer, me alegro de que te haya servido :))

    ResponderEliminar
  9. Muy bueno el post!, yo tambien tengo uno sobre smartphones

    ResponderEliminar
  10. Buenas noches, llevaba un monton de tiempo buscando algo parecido y te encontre, lo he puesto y me queda genial y funciona muy bienn, lo unico que me gustaria seria que me quede centrado y no se como hacerlo..¿me puedes ayudar?

    Gracias por tu entrada y por tu auyda

    ResponderEliminar
  11. Para posicionar un elemento html, tenemos que hacer uso de las CSS que no es más que un lenguaje que describe la presentación de los documentos.
    Lo que tienes que hacer es editar la plantilla html y al final del documento, introduces el siguiente código:
    <style type="text/css">div#calendar{margin-left:-13px}</style>

    Muchas gracias teo!

    ResponderEliminar
  12. Perdona por mi torpeza pero no se en que sitio de la plantilla debo colocarlo, lo he buscado pero no lo encuentro....y si aparte de centrarlo lo quiero un poquito mas pequeño se puede tambien?

    disculpas de nuevo

    Gracias

    ResponderEliminar
  13. Para editar la plantilla en formato html, desde el panel de Blogger accedemos a la opción Plantilla y pulsamos el botón "Editar HTML".
    Vamos al final del documento y antes del cierre de la etiqueta body </body> introducimos siguiente código <style type="text/css">div#calendar{margin-left:-13px}</style>
    Por último guardamos la plantilla.

    En cuanto al tamaño del calendario, está diseñado con tamaño de 200 píxeles para que se puedan leer correctamente los textos del mes y año. Si lo hacemos más pequeño, no se mostrarían bien.

    ResponderEliminar
  14. Asi? <style type='text/css'>div#calendar{margin-left:-13px}</style>
    //]]>
    </script>
    </body>

    si es asi no hace ningun cambio

    ResponderEliminar
  15. Tienes que ponerlo justo antes del cierre del body:

    <style type='text/css'>div#calendar{margin-left:-13px}</style>
    </body>

    ResponderEliminar
  16. Maaaaaaadre mia que torpeza la mia jajjaa, ahora si ha quedado pefecto!!!

    Muchisimas gracias, eres mi idolo jajajj

    ResponderEliminar
  17. Fantástico. Muchísimas gracias. Ha quedado de lujo: https://cororeando.blogspot.com.es/

    ResponderEliminar
  18. Si, ha quedado muy chulo ;)
    Me agrada mucho que te haya servido.
    Un saludo!

    ResponderEliminar
  19. Muchísimas gracias de nuevo. Estoy más feliz que una perdiz!!! XD XD XD

    ResponderEliminar
  20. Hola muy buenas, no consigo poner el calendario! al principio si pero los links me llevaban a entradas tuyas, y ahora me sale loading sin tener resultado. No se como hacer para que me salga con mis entradas, cual es el html que tengo que poner? con el tooltip me estoy haciendo un gran lio.

    Espero que me puedas ayudar,

    Muchas gracias de antemano.

    ResponderEliminar
  21. Hola "Anónimo", estaré encantado de ayudarte si me proporcionas la url de tu blog o página web. De lo contrario no podré hacer nada por ti :))
    Si prefieres conservar el anonimato, envíame la información a mi correo personal: jm.acuna73@gmail.com

    Un saludo!!

    ResponderEliminar
  22. Buenas tardes si pudieran ayudarme, quiero poner este calendario en una pagina web ya cree el archivo .js y realice una pagina de prueba llamada x.html, el detalle se da al colocar la sentencia que busca las entradas
    -s c r i p t src='http://palenque.gob.mx/2016/05/summary?max-results=1000&alt=json-in-script&orderby=published&callback=createCalendar' type='text/javascript'>script

    en mi sitio tengo una carpeta que se llama 2016 y dentro de ella otra que se llama 05 que es el mes y ahi se alojan todas la entradas pero al ejecutarlo solo aparece loading py no muestra nada.

    ResponderEliminar
  23. Hola Ivan,
    las instrucciones que doy son para crear un calendario para un blog tecnología Blogger.
    La página que me indicas, http://palenque.gob.mx no es de Blogger.

    No obstante, al final del artículo doy instrucciones precisas para poder generar un calendario para otras plataformas como es tu caso.
    Basta con copiar el código del último bloque para incorporar un calendario en tu web.

    Un saludo y gracias por pasarte por el blog :)

    ResponderEliminar
  24. Primero que nada muchas gracias amigo Jose, el calendario me funciona a la perfeccion, el unico detalle es que no logro hacer que las entradas del sitio web que no es de bloger aparescan en el calendario... si pudieran ayudarme o darme una idea lo agradeceria.

    ResponderEliminar
  25. Hola Iván,
    muchas gracias por visitar el blog :)

    El calendario está diseñado para:

    1- poder integrar en cualquier blog o web al margen del gestor de contenidos con que estén realizados. En este caso, representa las características propias de un almanaque.

    2- mostrar todos los artículos publicados en un blog diseñado exclusivamente con tecnología Blogger.

    Saludos!!

    ResponderEliminar
  26. a ok, muchas gracias por la ayuda. Tendre que seguir buscando una forma de realizarlo para mi web.

    De todas formas muchas gracias.

    un gran saludo.

    ResponderEliminar
  27. Holaaaaa, a mi me va muy bien tu calendario, el unico problema que tengo es que solo sale un post por dia en vez de todos los publicados, ¿como puedo arreglarlo?

    Muchas gracias por poner a nuestra disposicion tus conocimientos

    ResponderEliminar
  28. Hola Teofermi,
    siento decirte que el plugin está diseñado para que muestre un artículo por día.

    Gracias a ti por comentar :)
    Un saludo!

    ResponderEliminar
  29. BUENOS DIAS, COLOQUE EL CALENDARIO Y PUSE EN 0 PARA QUE ABRA EN LA MISMA PAGINA, PUES NADA, ME APARECE EN UNA VENTANA NUEVA. LO OTRO ES QUE YO QUISIERA QUE AL PULSAR CUALQUIER DIA DEL CALENDARIO ME APAREZCA LA PAGINA PRINCIPAL DEL MISMO Y NO ES ASI, ME APARECE UNA ENTRADA DE LAS TANTAS

    ResponderEliminar
  30. ESTE ES MI BLOG, https://parlaysdiarios.blogspot.com/

    ResponderEliminar
  31. Hola Parlays,
    no consigo ver el calendario en tu blog por lo que no puedo analizar que tipo de problema existe.
    Por otro lado, el calendario está diseñado para que muestre las entradas publicadas por días.
    Gracias por visitar y comentar en el blog.

    Un saludo!

    ResponderEliminar
  32. DISCULPA LO HABÍA QUITADO, AHORA SI ESTÁ.

    ResponderEliminar
  33. Si, ya lo veo.
    Hay un error de código que se me había escapado, trataré de corregirlo en los próximos días.
    Gracias por comunicármelo :)

    ResponderEliminar
  34. Saludos José María, pudiste corregir el error? Te pregunto porque quizás lo has publicado en otra entrada.

    ResponderEliminar
  35. Hola Parlays Diarios,
    he modificado el código y subido el fichero a la cdn de git.

    He realizado una prueba en local con acceso a tu blog y funciona correctamente con el parámetro newtab con valor 0 o con valor 1:

    <!doctype>
    <html>
    <head></head>
    <body>
    <script>
    var conf = {
    bgcolor: '#00007F',
    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>
    <div id='calendar'><strong>Loading...</strong></div>
    <script src="https://cdn.rawgit.com/jmacuna/calendar-widget/master/create-calendar.js" type="text/javascript"></script>
    <script src="https://parlaysdiarios.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&orderby=published&callback=createCalendar" type="text/javascript"></script>
    </body>
    </html>

    ResponderEliminar
  36. Buenas tardes José María, ante todo muchas gracias por tu atención. Ahora bien quiero que disculpes mi ignorancia, pero cuál es el código que debo colocar en HTML/Javascript? He hecho una prueba para no eliminar mi calendario actual. Lo que he hecho es lo siguiente, abrí el código de mi calendario actual, lo copié, luego me fui a añadir gadget, peqgué todo el código tal cual como está, al guardar no se refleja, lo único que aparece es Loading...... Acaso quizás debo colocar algo de lo que me escribiste?

    ResponderEliminar
  37. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  38. En principio debería funcionar sin realizar cambios pero por si acaso, en el gadget copia el siguiente código (en negrita):


    <script>
    var conf = {
    bgcolor: '#00007F',
    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>
    <div id='calendar'><strong>Loading...</strong></div>
    <script src="https://cdn.rawgit.com/jmacuna/calendar-widget/master/create-calendar.js" type="text/javascript"></script>
    <script src="https://parlaysdiarios.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&orderby=published&callback=createCalendar" type="text/javascript"></script>

    ResponderEliminar
  39. Disculpa de nuevo, pero sigue abriendo en una nueva ventana

    ResponderEliminar
  40. No lo entiendo, es como si el navegador estuviera cacheando el fichero js.
    En todo caso, lo volveré a revisar.

    ResponderEliminar
  41. Tendrá algo que ver, que tengo un javascript de abril enlaces en otra ventana? Pero es extraño porque cuando lo hice le coloqué mi dirección de blog para que abriera lo de mi blog en una misma ventana

    ResponderEliminar
  42. No lo tengo claro pero de lo que sí estoy seguro es que con la prueba desde un fichero html local funciona correctamente, como ya te comenté.

    ResponderEliminar
  43. Quieres que te acceso a mi blog para que lo trabajes mejor? Luego me avisas si lograste arreglarlo

    ResponderEliminar
  44. Estoy aprendiendo en esto. ¿Qué es un fichero HTML local?

    ResponderEliminar
  45. Espera, no vamos a complicarnos más :)
    Voy a realizar un pequeño ajuste para forzar la apertura de los link en la misma ventana.
    Para ello, vuelve a copiar el siguiente código (en negrita) en el gadget:


    <script>
    var conf = {
    bgcolor: '#00007F',
    newtab: 1, // 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"
    }
    $(document).ready(function(){
    $('#calendar span#content a').attr('target', '_self');
    });
    </script>
    <div id='calendar'><strong>Loading...</strong></div>
    <script src="https://cdn.rawgit.com/jmacuna/calendar-widget/master/create-calendar.js" type="text/javascript"></script>
    <script src="https://parlaysdiarios.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&orderby=published&callback=createCalendar" type="text/javascript"></script>

    ResponderEliminar
  46. Lamentablemente todo aquí aparece en negrita

    ResponderEliminar

  47. <script>
    var conf = {
    bgcolor: '#00007F',
    newtab: 1, // 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"
    }
    $(document).ready(function(){
    $('#calendar span#content a').attr('target', '_self');
    });
    </script>
    <div id='calendar'><strong>Loading...</strong></div>
    <script src="https://cdn.rawgit.com/jmacuna/calendar-widget/master/create-calendar.js" type="text/javascript"></script>
    <script src="https://parlaysdiarios.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&orderby=published&callback=createCalendar" type="text/javascript"></script>

    ResponderEliminar
  48. Veo que lo has modificado y sigue fallando,
    me temo que tiene que ver con el código de tu blog, debe de haber algo que hace que el script no se ejecute de forma correcta pero no te puedo ayudar, no puedo revisar toda la plantilla para ver dónde puede estar el error.
    Lo siento, no puedo hacer mucho más :(

    ResponderEliminar
  49. Te agradezco mucho la confianza que pones en mí pero no puedo aceptar esa responsabilidad, imagina que de forma no consciente cambio algo de la plantilla y deja de funcionar...
    Gracias por tu paciencia!

    ResponderEliminar
  50. Gracias a ti, y de verdad disculpa tantas molestias. Ni modo, debe quedarse así, hasta que se solucione el problema de mi plantilla, e incluso he tratado de colocar un iframe donde debería aparecerme un cuadro que es una radio, y nada, aparece en blanco, quizás tengo plantilla muy antigua.

    ResponderEliminar
  51. Hola Parlays Diarios, he estado revisando el código html que devuelve tu plantilla y he logrado encontrar lo que provoca que no funcione correctamente el calendario.
    En algún momento, has añadido (directamente o través de un widget) una función javascript que fuerza a que todos los enlaces con ciertas características, se abran en una pestaña nueva cambiando el target de los a href a _blank.

    Por eso, los links del calendario tienen ese comportamiento erróneo.

    Para solucionarlo, sigue los siguientes pasos en tu blog:

    1-En el menú de la izquierda, haz clic en Tema.
    2-Debajo de "El blog ahora", haz clic en Editar HTML.
    3-Haz click en cualquier parte del contenido de código html.
    4-Pulsa las teclas CTR + F (aparece una caja búsqueda de texto).

    Busca literalmente las líneas:

    if (link.href.indexOf(url_1) == -1 && link.href.indexOf(url_2) == -1 && link.href.indexOf('javascript') == -1)

    Y reemplázalas por:

    if (link.href.indexOf(url_1) == -1 && link.href.indexOf(url_2) == -1 && link.href.indexOf('javascript') == -1 && link.title.indexOf(new DOMParser().parseFromString("✔", "text/html").documentElement.textContent == -1)

    5-Haz clic en Guardar tema.

    ResponderEliminar
  52. Hola Chema, Feliz día. Perfecto ahora si me funciona el calendario y abre en la misma ventana, pero los enlaces también lo hacen. ¿No hay manera de hacerlos que abran en una ventana nueva? Como lo tenía antes

    ResponderEliminar
  53. Hola Parlays,
    el código que te he proporcionado solo afecta a los enlaces del calendario, todos los demás links de la página se abren en otro tab o pestaña.

    ResponderEliminar
  54. En el post vienen detllados los pasos a seguir.
    Si tienes una duda concreta, te podré ayudar.

    Saludos!

    ResponderEliminar
  55. Hola buenos días amigo, me podrias ayudar con lo que me esta pasando con el calendario.
    He relizado los pasos que detallas y el calendario me aparece bien y resalta las entradas que he creado, el inconveniente radica cuando abro el despegable de los meses y años, me los muestra en lista pero muy por debajo. http://filosofiabesotoar.blogspot.com.co/

    SAludos.

    ResponderEliminar
  56. Hola César,
    gracias por visitar el blog.

    He echado un vistazo al widget incorporado en tu blog y tengo la sensación de que el efecto visual de los desplegables es debido a que el posicionamiento de los elementos del calendario entran en conflicto con las características de las hojas de estilo o css de tu blog.

    ResponderEliminar
  57. saludo y muchas gracias por su atencion soy nuevo y realmente no se si es posible enviarme el texto completo que tengo que agregar para que salga el calendario

    ResponderEliminar
  58. Hola Rubén,
    muchas gracias por el interés.

    Si sigues detenidamente las instrucciones del post, no tendrás ningún problema para integrar el widget en tu blog.
    Inténtalo y si te surgen problemas, me lo comentas y lo vemos.

    Saludos!!

    ResponderEliminar
  59. Hola saben si se puede hacer programacion adaptada a la impresion 3D? Es posible esto con la Lion 2?

    ResponderEliminar
  60. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  61. He echado un vistazo al widget incorporado en tu blog y tengo la sensación de que el efecto visual de los desplegables es debido a que el posicionamiento de los elementos del calendario entran en conflicto con las características de coaching-mastery.com/mejores-relojes-despertadores-para-pc/

    ResponderEliminar
  62. Tras mucho tiempo buscando, tu calendario me ha parecido el mejor, el caso es que estoy intentando eliminar todas las urls que están enlazadas a cada fecha del calendario pero no puedo.
    En principio el calendario lo quiero para que sea simplemente informativo por lo que me interesa es que puedan navegar sobre él pero siempre me aparecen los días marcados con tus entradas al blog. Hay alguna manera de eliminar estas relaciones entre el día y tu blog?

    ResponderEliminar
    Respuestas
    1. Hola, si lo que quieres es mostrar únicamente un calendario (sin entradas publicadas en el blog), tienes un ejemplo en la siguiente url:

      Calendario

      Espero que te sirva.
      Un saludo.

      Eliminar
    2. Perfecto si, muchas gracias

      Eliminar