Fecha tipo calendario en las entradas del blog

Hay una forma muy particular de mostrar la fecha que llama mucho la atención a muchos, y es la fecha tipo calendario, que le da un aspecto bastante interesante y distinto a este dato de las entradas que usualmente no le damos mucha importancia.

Para poner la fecha tipo calendario en el blog, primero descarga este archivo, es el que contiene todas las imágenes del calendario, elige la que más te guste y súbela a Picasaweb o al hosting que prefieras.

Luego entra en Configuración | Formato | Formato de cabecera de fecha, y cambia la fecha de manera que quede primero el día, luego el mes y por último el año, por ejemplo: 29 noviembre 2011

Si usas la nueva interfaz entonces entra en Configuración | Idioma y formato | Formato de cabecera de fecha, y cámbiala de igual forma.

Ahora entra en la Edición HTML de la plantilla, marca la casilla Expandir plantillas de artilugios y busca esta línea:

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

Es posible que la encuentres dos veces, la segunda es la que nos interesa.

Ya que la hayas localizado elimínala y en su lugar pon esto:

<div id='Fecha'>
<script>cambiarFecha(&#39;<data:post.dateHeader/>&#39;);</script>
</div>
<b:else/>
<div id='Fecha'>
<script>cambiarFecha(&#39;&#39;);</script>
</div>

Ahora agrega antes de </head> lo siguiente:

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

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
/* Fecha tipo calendario
----------------------------------------------- */
#Fecha {
background: transparent url(URL de la imagen) no-repeat;
display: block;
width:60px;
height:60px;
float: left;
margin: 5px 2px 0 -70px;
padding: 0 0 8px 0px;
border: 0;
text-transform: uppercase;
}

.fecha_mes {
display: block;
font-size: 15px;
font-weight:bold;
margin-top:-1px;
text-align:center;
color:#282828; /* Color del mes */
}

.fecha_dia {
display: block;
font-size: 28px;
font-weight:bold;
margin-top:-8px;
text-align:center;
color:#282828; /* Color del día */
}

.fecha_anio {
display: block;
font-size: 10px;
margin-top:-8px;
text-align:center;
color:#282828; /* Color del año */
}
</style>
</b:if>

Agrega la URL de la imagen donde se indica y listo. En color verde verás dónde cambiar el color de los datos de la fecha.
Si el calendario no se viera por completo, o si quieres que se muestre dentro del post cambia el -70px  por 0px
El archivo contiene 14 imágenes con distintos colores para que elijas el que mejor se adapte a los colores de tu plantilla.

ACTUALIZACIÓN: Es importante que para que la fecha pueda mostrarse primero deba estar habilitada en las entradas, para ello ingresa a Elementos de la página | Entradas del blog, y haz click en Editar, ahí marca la casilla de la fecha. Si usas la nueva interfaz sigue el mismo procedimiento entrando en Diseño.