18 de febrero de 2015

Calendario con todos los post publicados en 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.rawgit.com/jmacuna/calendar-widget/master/create-calendar.js' type='text/javascript'></script>
    <script src='https://jmacuna73.blogspot.com/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 http://jmacuna73.blogspot.com 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://jmacuna73.blogspot.com/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 jm.acuna73@gmail.com. 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.rawgit.com/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!!


57 comentarios:

Moni Alus dijo...

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

Jose Maria Acuña Morgado dijo...

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

Moni Alus dijo...

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.

Jose Maria Acuña Morgado dijo...

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

Moni Alus dijo...

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

Jose Maria Acuña Morgado dijo...

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

Un abrazo!!

hllacer dijo...

Muchísimas gracias, me ha quedado genial

Jose Maria Acuña Morgado dijo...

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

Antonio Palomares dijo...

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

teo dijo...

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

Jose Maria Acuña Morgado dijo...

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!

teo - fermi dijo...

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

Jose Maria Acuña Morgado dijo...

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.

teo - fermi dijo...

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

si es asi no hace ningun cambio

Jose Maria Acuña Morgado dijo...

Tienes que ponerlo justo antes del cierre del body:

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

teo - fermi dijo...

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

Muchisimas gracias, eres mi idolo jajajj

El Pianero Solitario dijo...

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

Jose Maria Acuña Morgado dijo...

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

El Pianero Solitario dijo...

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

Anónimo dijo...

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.

Jose Maria Acuña Morgado dijo...

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

Ivan dijo...

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.

Jose Maria Acuña Morgado dijo...

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 :)

Ivan Figueroa dijo...

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.

Jose Maria Acuña Morgado dijo...

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

Ivan Figueroa dijo...

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.

Jose Maria Acuña Morgado dijo...

A ti Iván!!

Teofermi dijo...

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

Jose Maria Acuña Morgado dijo...

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!

PARLAYS DIARIOS dijo...

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

PARLAYS DIARIOS dijo...

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

Jose Maria Acuña Morgado dijo...

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!

PARLAYS DIARIOS dijo...

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

Jose Maria Acuña Morgado dijo...

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 :)

PARLAYS DIARIOS dijo...

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

Jose Maria Acuña Morgado dijo...

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>

PARLAYS DIARIOS dijo...

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?

Jose Maria Acuña Morgado dijo...
Este comentario ha sido eliminado por el autor.
Jose Maria Acuña Morgado dijo...

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>

PARLAYS DIARIOS dijo...

Disculpa de nuevo, pero sigue abriendo en una nueva ventana

Jose Maria Acuña Morgado dijo...

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

PARLAYS DIARIOS dijo...

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

PARLAYS DIARIOS dijo...

Perdón, "abrir"

Jose Maria Acuña Morgado dijo...

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

PARLAYS DIARIOS dijo...

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

PARLAYS DIARIOS dijo...

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

Jose Maria Acuña Morgado dijo...

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>

PARLAYS DIARIOS dijo...

Lamentablemente todo aquí aparece en negrita

Jose Maria Acuña Morgado dijo...


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

PARLAYS DIARIOS dijo...

Ya lo hice y nada

Jose Maria Acuña Morgado dijo...

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 :(

PARLAYS DIARIOS dijo...

Y si te doy el acceso ?

Jose Maria Acuña Morgado dijo...

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!

PARLAYS DIARIOS dijo...

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.

Jose Maria Acuña Morgado dijo...

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.

PARLAYS DIARIOS dijo...

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

Jose Maria Acuña Morgado dijo...

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.