Fecha tipo calendario en todas las entradas

Hace un tiempo publiqué una entrada donde se explicaba como mostrar la fecha de las entradas dentro de una imagen tipo calendario.

Desde entonces han sido muchas personas las que me han preguntado por la forma de conseguir que el calendario se muestre en todas las entradas, es decir, incluso en aquellas que han sido publicadas el mismo día.
He modificado el scritp para lograr que todas las entradas tengan la fecha con su calendario.

Para los que aún no estén usando la fecha-calendario y quieran hacerlo ahora, explicaré los pasos a seguir desde el principio, los que ya estén usando este sistema, tendrán que hacer los cambios oportunos siguiendo esta explicación.

[1] Antes de nada tendremos que cambiar el formato en que se muestra la fecha de nuestros posts, para eso vamos 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, y que es algo como 13 noviembre 2008.

[2] Iremos ahora a Edición de Html y expandiremos los artilugios.
Localizamos la etiqueta  </head> y justo antes colocamos este script:

<script type='text/javascript'>
//<![CDATA[
var ultimaFecha;
function remplaza_fecha(d){
if (d == "") {
    d = ultimaFecha;
 }
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);
 ultimaFecha = d;
}
//]]>
</script>

[3] Localizamos dentro del código de la plantilla este código:

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

Y lo cambiamos por esto:

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

[4] Una vez hechos estos cambios, iremos a la parte del CSS de la plantilla y, justo antes de ]]></b:skin> colocamos estas líneas de código:

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

#fecha {
display: block;
float:left;
margin: 0 13px 0 0;
padding: 0 13px 8px 10px;
color: #333;
background: transparent url(url_de_la_imagen-calendario) 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 {
display: block;
font-size: 16px;
font-weight:bold;
}

Nota: Para conseguir las imágenes de los calendarios ver la entrada anterior al respecto.