Fecha dentro de una imagen tipo calendario

En unos sencillos pasos conseguiremos que la fecha de nuestras entradas se muestre dentro de una imagen tipo calendario.



[1] Para comenzar tendremos que cambiar el formato en que se muestra la fecha de nuestros posts. Iremos a nuestro panel de Blogger y en Configuración escogemos la opción Formato, una vez allí en "Formato de cabecera de la fecha" seleccionamos la penúltima opción que aparece en el despegable. Ejemplo: 08 junio 2008

[2] Una vez cambiado el formato de la fecha, vamos a Edición de Html y expandimos los artilugios. Localizamos la etiqueta </head> y justo antes colocamos este script:

<script>
function remplaza_fecha(d){
var da = d.split(' ');
dia = "<strong class='fecha_dia'>"+da[0]+"</strong>";
mes = "<strong class='fecha_mes'>"+da[1].slice(0,3)+"</strong>";
anio = "<strong class='fecha_anio'>"+da[2]+"</strong>";
document.write(dia+mes+anio);
}
</script>

[3] Tendremos que localizar ahora dentro del código de la plantilla esta etiqueta:

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

Para que no sea tan complicado podemos usar nuestro navegador para buscarlo.

Sustituimos esa etiqueta por este código:

<div id='fecha'>
<script>remplaza_fecha('<data:post.dateHeader/>');</script>
</div>

[4] Volvemos hacia arriba en nuestra plantilla para localizar la etiqueta ]]></b:skin> y justo encima, pegamos estas líneas de CSS para controlar el estilo de nuestra fecha:

/* Calendario-Fecha
-------------------- */

#fecha {
display: block;
float:left;
margin: 0 13px 0 0;
padding: 0 13px 8px 10px;
color: #333;
background: transparent url(http://img367.imageshack.us/img367/1449/blue2kt9.png) no-repeat;
border: 0;
text-transform: uppercase;
}

.fecha_mes {
display: block;
font-size: 10px;
font-weight:bold;
}

.fecha_anio {
display: block;
font-size: 10px;
}

.fecha_dia {
margin: 2px 0 0 1px;
display: block;
font-size: 16px;
font-weight:bold;
}

Notas: En el CSS anterior está colocada la url de uno de los calendarios azules (el que se ve en el ejemplo de la imagen) para usar otro color de calendario, tendremos que subir el calendario escogido a un alojamiento de imágenes y sustituir la url en el código por la que nos proporcionan en el alojamiento.

Si vamos a utilizar una imagen diferente a las que se proporcionan en esta entrada, tendremos seguramente que modificar los valores de margin y padding e incluso con el tamaño de texto (font-size) para adaptar la fecha a la imagen que vayamos a usar.

Imagenes disponibles

DESCARGAR EL PACK DE ICONOS-CALENDARIOS DESDE GOOGLE-PAGES
DESCARGAR EL PACK DE ICONOS-CALENDARIOS DESDE DROPBOX

Actualización:
Consulta en esta entrada como añadir el calendario en todas las entradas, incluso las publicadas el mismo día.