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.