Blogger: la fecha de los posts

Meses buscando la forma de modificar la forma en que se muestra la fecha de los posts en Blogger e intentar algo similar a los calendarios gráficos utilizados por WordPress y siempre chocaba contra la misma pared, no podía extraer la fecha que se encuentra en data:post.dateHeader. Si pudiera leerla tal y como la muestra, como una cadena e texto, el resto es relativamente sencillo ... pero nada.

Mi sorpresa fue mayúscula cuando me encontré con un artículo en BW que conseguía hacerlo, usando más o menos el mismo criterio que yo había imaginado pero ... mejor ya que este, si funcionaba. Obviamente, yo estaba utilizando mal alguna sintaxis y mis fracasos eran rotundos.

Gracias, gracias, gracias. A partir de su código, empecé otra vez y aquí está los resultados.

Para lograr que esto funcione, necesitamos hacer varias cosas bastante sencillas y tratar de entenderlas ya que "cada plantilla es un mundo" y , seguramente, cada usuario deberá hacer los ajustes que considere necesario.

Primero que nada, debemos establecer el formato de la fecha que vamos a utilizar en el blog en OPCIONES FORMATO. Allí, aparecen una serie de posibilidades:

Formato de cabecera de fecha 07-jun-2007 7 de junio de 2007 jueves 7 de junio de 2007 7/06/07 jueves, junio 07, 2007 6/07/2007 6.07.2007 20070607 2007/06/07 2007-06-07 7.6.07 jueves jueves, junio 7 junio 07, 2007 07 junio 2007 07 junio, 2007

De todas ellas, NO podemos seleccionar las que incluyan un carácter coma ni tampoco las que poseen el texto "de" porque nos complicaría la vida. Si bien las que no contienen el nombre del mes pueden ser usadas, en los ejemplos siguientes vamos a utilizarlos así que el formato, debe incluir ese nombre. De tal manera, hay sólo dos posibilidades: 06-jun-2007 o 06 junio 2007.

La segunda, requiere que "cortemos" el texto para evitar que si el nombre de los meses es muy largo, el gráfico se descompagine. Así que, personalmente, me quedo con la primera posibilidad que nos va a mostrar el mes con sólo tres caracteres: 06-jun-2007. La señalo y guardo la opción

Este texto es el que escribe Blogger por medio de <data:post.dateHeader/>. Como se ve, está formado por tres partes, separadas con un guión. JavaScript, como casi cualquier lenguaje de programación, posee una serie de funciones o métodos que nos permiten manipular cadenas de texto. Una de ellas, llamada split(), separa las palabras, guardándolas en una matriz de datos. Para que pueda separarlas, debemos indicarle cuál es el delimitador (el carácter de separación) que utilizamos. Puede ser cualquiera o ninguno, en cuyo caso, el carácter por defecto, será el espacio.

Si se quieren más detalles, hacer click para expandir.

var lacadena = '123456789';
var palabra = lacadena.split('5');
palabra[0] contendrá '1234'
palabra[1] contendrá '6789'

var lacadena = 'cero uno dos tres';
var palabra = lacadena.split(' ');
palabra[0] contendrá 'cero'
palabra[1] contendrá 'uno'
palabra[2] contendrá 'dos'
palabra[3] contendrá 'tres'

var lacadena = 'home/carpeta/miblogl.html';
var palabra = lacadena.split('/');
palabra[0] contendrá 'home'
palabra[1] contendrá 'carpeta'
palabra[2] contendrá 'miblogl.html'

var lacadena = '06-jun-2007'
var lafecha = cual.split('-');
lafecha[0] contendrá '06'
lafecha[1] contendrá 'jun'
lafecha[2] contendrá '2007'

Si usáramos la opción con el nombre del mes muy largo, podemos complementar lo anterior usando el método slice() devuelve una cantidad de elementos:

cadena.slice(inicio,final);

donde inicio (obligatorio) es el inicio de la selección y final (optativo) es el final y si no se indica se toma todo, hasta el final. Por ejemplo:

lafecha[1].slice(0,3) dará como resultado jun

Click para ocultar.

Aunque los detalles para cada ejemplo serán diferentes, para que se entienda la idea, la rutina JavaScript básica es algo así:

<script type="text/javascript">
function calendario(cual){
var lafecha = cual.split('-');
fday = "<div class='caledia'>"+lafecha[0]+"</div>";
fmonth = "<div class='calemes'>"+lafecha[1]+"</div>";
fyear = "<div class='caleanio'>"+lafecha[2]+"</div>";
document.write(fmonth+fday);
}</script>

A esta función, le pasaremos una cadena de texto cual que separará en tres partes. contendrá el número del día, lafecha[0]lafecha[1] el mes (tres caracteres) y lafecha[2] el año.

Cada "pedazo", se escribirá en la página, con una clase CSS especial (caledia, calemes y caleanio) que le dará el formato que deseemos.

Y una definición básica del estilo, sería esta:

<style type="text/css";gt;
.calefecha {
float: left;
text-align:center;
background: transparent url(URLimagen);
... propiedades de margin, padding y fuente ...
}
.calemes {... propiedades de margin, padding y fuente ...}
.caledia {... propiedades de margin, padding y fuente ...}
.caleanio {... propiedades de margin, padding y fuente ...;}
</style;gt;

Como las posibilidades de diseño son infinitas, voy a poner los códigos necesarios para algunos modelos. En todos los casos, tanto el script como la definición de estilo la agregaremos a la plantilla. Un lugar simple de encontrar es justo antes de la etiqueta </head>.

Una vez hecho esto, es necesario modificar un poco el código de la plantilla, para eso, en EDICION DE HTML, marcamos la opción "Expandir plantillas de artilugios" y buscamos algo parecido a esto:

<b:if cond='data:post.dateHeader'>
   <h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

y reemplazamos la parte marcada en rojo por esto:

<div class='calefecha'>
<script>calendario('<data:post.dateHeader/>');</script>
</div>

	Modelo sin imágenes
HOJA DE ESTILO <style type="text/css"> .calefecha {float:left;margin:10px;padding:5px;text-align:center; font-family:Trebuchet MS,Arial,Helvetica,sans-serif; background-color:#EEEEEE;border:1px solid #999999;} .calemes {margin:0px;font-size:14px;color:#444444;} .caledia {margin-bottom:-3px;font-size:22px;letter-spacing:-1px;color:#444444;} .caleanio {margin-top:-2px;font-size:16px;color:#444444;} </style>
JAVASCRIPT <script type="text/javascript"> function calendario (cual){ var lafecha = cual.split('-'); fday = "<div class='caledia'>"+lafecha[0]+"</div>"; fmonth = "<div class='calemes'>"+lafecha[1]+"</div>"; fyear = "<div class='caleanio'>"+lafecha[2]+"</div>"; document.write(fmonth+fday+fyear); } </script>

Set Nº 1 - 50x50
HOJA DE ESTILO <style type="text/css"> .calefecha {float:left;width:50px;height:50px;margin:10px;text-align:center; background-image:url(URL_imagen); font-family:Trebuchet MS,Arial,Helvetica,sans-serif;} .calemes {color:#FFFFFF;display:block;font-size:12px;} .caledia {color:#000000;display:block;font-size:20px;padding-top:3px;} </style>
En todos los casos, debe reemplazarse colocarse la URL de la imagen en la propiedad calefecha.
JAVASCRIPT <script type="text/javascript"> function calendario(cual){ var lafecha = cual.split('-'); fday = "<div class='caledia'>"+lafecha[0]+"</div>"; fmonth = "<div class='calemes'>"+lafecha[1]+"</div>"; document.write(fmonth+fday); } </script>

Set Nº 2 - 46x46
HOJA DE ESTILO <style type="text/css"> .calefecha {float:left;width:46px;height:49px;margin:10px;text-align:center; background-image:url(URL_imagen); font-family:Trebuchet MS,Arial,Helvetica,sans-serif;} .calemes {color:#FFFFFF;display:block;font-size:12px;padding-top:2px} .caledia {color:#000000;display:block;font-size:22px;padding-top:1px;} </style>
En todos los casos, debe reemplazarse colocarse la URL de la imagen en la propiedad calefecha.
JAVASCRIPT <script type="text/javascript"> function calendario(cual){ var lafecha = cual.split('-'); fday = "<div class='caledia'>"+lafecha[0]+"</div>"; fmonth = "<div class='calemes'>"+lafecha[1]+"</div>"; document.write(fmonth+fday); } </script>

Set Nº 3 - 50x50
	HOJA DE ESTILO (fondo blanco) <style type="text/css"> .calefecha {float:left;width:50px;height:50px;margin:10px;text-align:left; background-image:url(URL_imagen); font-family:Trebuchet MS,Arial,Helvetica,sans-serif;} .caledia {color:#000000;display:block;font-size:24px;padding:15px 0 0 12px;} </style>
	HOJA DE ESTILO (fondo blanco) <style type="text/css"> .calefecha {float:left;width:50px;height:50px;margin:10px;text-align:left; background-image:url(URL_imagen); font-family:Trebuchet MS,Arial,Helvetica,sans-serif;} .caledia {color:#000000;display:block;font-size:20px;padding:13px 0 0 16px;} </style>
	HOJA DE ESTILO (transparente) <style type="text/css"> .calefecha {float:left;width:50px;height:50px;margin:10px;text-align:center; background-image:url(URL_imagen); font-family:Trebuchet MS,Arial,Helvetica,sans-serif;} .caledia {color:#000000;display:block;font-size:30px;padding:3px 0 0 3px;letter-spacing:5pt;} </style>
	HOJA DE ESTILO (transparente) <style type="text/css"> .calefecha {float:left;width:50px;height:50px;margin:10px;text-align:left; background-image:url(URL_imagen); font-family:Trebuchet MS,Arial,Helvetica,sans-serif;} .caledia {color:#004080;display:block;font-size:30px;padding:10px 0 0 9px;} </style>
	HOJA DE ESTILO (fondo blanco) <style type="text/css"> .calefecha {float:left;width:50px;height:50px;margin:10px;text-align:left; background-image:url(URL_imagen); font-family:Trebuchet MS,Arial,Helvetica,sans-serif;} .caledia {color:#000000;display:block;font-size:30px;padding:6px 0 0 6px;} </style>
En todos los casos, debe reemplazarse colocarse la URL de la imagen en la propiedad calefecha.
JAVASCRIPT <script type="text/javascript"> function calendario (cual){ var lafecha = cual.split('-'); fday = "<div class='caledia'>"+lafecha[0]+"</div>"; document.write(fday); } </script>
El script es el mismo para todos los modelos.

Todas las definiciones de estilo son similares, calefecha es el bloque total donde se mostrará la imagen y, por defecto está alineada a la izquierda (float:left) pero nada impide alinearla a la derecha (float:right). El valor de margin establece la separación de ese bloque en sus cuatro bordes (10px) y lo mismo hace padding (5px) pero de la separación del contenido. Las propiedades de la fuente son personalizables.

calemes define las propiedades del texto con el mes, caledia las propiedades del texto con el día (un número), y caleanio las propiedades del texto con el año (un número). La fuente está definida en calefecha pero podrían usarse diferentes fuentes para cada una. Lo único que hay ue tener en cuenta es que al modificar el tipo o tamaño de fuente, deberá modificarse la propiedad margin de estas clases para ubicar los caracteres donde uno quiera.

Por último, lo más probable es que al insertar la fecha como imagen gráfica, debamos retocar la posición de los títulos. Esto, por general se encuentran dentro de un etiqueta <h3 class='post-title'> y sus propiedades se encuentran en las definiciones de estilo e la plantilla:

.post h3 {
margin: arriba derecha abajo izquierda;
padding: arriba derecha abajo izquierda;
... otras propiedades
}

Deberemos probar modificando los valores de la propiedad margin para ubicarlo donde deseemos y, eventualmente, con los valores de la propiedad padding.

Una vez incluidos todos los códigos, todo esto, podemos hacerlo utilizando VISTA PREVIA, sin necesidad de guardar la palntilla hasta que estemos satisfechos con los resultados obtenidos.