Imagen tipo calendario en entradas

Hoy vamos a ver cómo poner una imagen que simule un calendario al lado del título de las entradas de nuestro blog.

En primer lugar, accedemos a la ficha Configuración -> Formato y, en Formato de cabecera de fecha, seleccionamos la opción parecida a 01 Abril 2009.

Una vez realizado este cambio, guardamos y accedemos a la ficha Diseño -> Edición de HTML y activamos la casilla Expandir plantillas de artilugios.

Es conveniente antes de realizar cualquier cambio en la plantilla, realizar una copia de seguridad de la misma.

A continuación, buscamos la etiqueta </head> y, justo antes de ésta, pegamos el siguiente código:

<script>
function reemplaza_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(mes+dia+anio);
}
</script>

En el siguiente paso, buscaremos esta línea de código dentro de la plantilla:

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

Una vez localizada, la reemplazaremos por el siguiente código:

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

Para terminar, buscamos la etiqueta ]]></b:skin> y, justo antes de ésta, pegamos este código:

#fecha {
display: block;
float:left;
margin: 0 13px 0 0;
padding: 0 15px 8px 10px;
color: #333;
background: transparent url(dirección_URL_de_la_imagen) no-repeat;
border: 0;
text-transform: uppercase;
}

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

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

.fecha_dia {
display: block;
font-size: 16px;
}

En este último código sustituiremos donde pone dirección_URL_de_la_imagen por la dirección real de la imagen que aparezca como calendario.

Además, podéis modificar el atributo float que indica la posición donde queréis que aparezca la imagen. Si ponemos left, como está en el ejemplo, se mostrará a la izquierda y si ponéis right lo hará a la derecha.

Las dimensiones de la imagen, para las que está ajustado el código de esta entrada, son 48 x 55 píxeles aunque estas dimensiones pueden ser diferentes siempre y cuando modifiquéis los atributos margin (margen), padding (espacio entre el objeto y el texto) y font-size (tamaño del texto) para intentar ajustar el texto a la imagen.

Una vez realizado todo esto, guardaremos la plantilla y visualizaremos el resultado.