Personalizar la fecha en las entradas del blog

Aunque hace ya bastante tiempo existen plantillas que muestran la fecha estilo calendario también es cierto que muchos de los que ya teníamos una plantilla a veces nos rehusamos a cambiar de plantilla (quizás por afecto o capricho o cualquier otro motivo) y lógicamente quisiéramos que en la plantilla que usamos también se muestre la fecha de este modo sin tener que correr el riesgo de deshacernos de nuestro blog.

Cualquiera que sea el motivo, existe una manera sencilla y rápida de poner el script que hace que la fecha en nuestras entradas se muestren al estilo calendario. Antes de entrar a la plantilla, asegúrate que la configuración de la fecha en tu blog sea así:

Para ello debes ir a Configuración, Idioma y Formato, y modificar la fecha tal cual se muestra en la imagen.

Una vez asegurado esto, entras en Diseño, Edición html, Editar Plantilla. Allí buscas lo siguiente:

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

En algunas plantillas (muy pocas) quizá esta línea de código se encuentre dos veces. No te preocupes, solo eliminaremos la última. Luego de eliminarla la reemplazas con este fragmento de código:

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

Listo, esto era lo más difícil. Ahora, antes de </head>, pegas el script que lo hace funcionar:

<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(https://lh3.googleusercontent.com/oVJfxCXrQCIQhfMbC2_fM16Dlm5bh8tcLw9nTATyjOWBjH9gZRtc3Kd5e_wywy06Z2vGgVzSd4y7tAzUjo0qrzaPE9hb4JMz2Xl0UUyo_McoLLMKME_WAGSNCCmieHKTVOYmqdJZPT5uMkbODPuE_g9BVTm1HmpuIDu0_ilwXWepV88G-sYKyiB6A5Wu9OqY_atwFgeTtVEMGMQnEqchaOEyigs4vmZOPFYfKuJDXzC4kCzVY5vS_Lyq0wRal-yWP_dpsydTHm5Duiq2LE9aq5iUo8A8xKp26XSlozffITFaUZ6V4Ni0j8GN7qYACCUegO0ZxQFjpnnHQSXmAbnWeuV80mFGS2dvqi1H9z25P_D5JcSNrwo8r7--_9kGebzATyrbmphYupBuuJi0xICNZvERehCGGMCPjmvU2xjVBJLA9G8RcyYKi9_sAemUm5cSjiSlC3S65XW_2AiS0zxB-8Ds3T0WAkiw0mRvD-UfKTq3tdf5uIX6sMoUT3Qcrv-68t_4kL0tOKwc2QmvaXtO5HwtH4aFU4BtBWbbCJ8utqj9i3Gln8FAEMjJXbETkC7qoplqu6UfAfbnFFlgv69qRAiVHYZ4DVmiiJ62mbGKBDwqybEs=w60-h59-no) no-repeat;
display: block;
width:60px;
height:60px;
float: left;
margin: 5px 2px 0 -30px;
padding: 0 0 8px 0px;
border: 0;
text-transform: uppercase;
}

.fecha_mes {
display: block;
font-size: 13px;
font-weight:bold;
margin-top:-1px;
text-align:center;
color:#282828;
}

.fecha_dia {
display: block;
font-size: 22px;
font-weight:bold;
margin-top:-4px;
text-align:center;
color:#282828;
}

.fecha_anio {
display: block;
font-size: 13px;
margin-top:-4px;
text-align:center;
color:#282828;
}
</style>
</b:if>

Recuerda que la imagen de calendario queda dentro de las entradas. Si lo quisieras fuera de ellas solo cambia -30px por un valor más alto. La url de la imagen puedes cambiarla con una imagen que tú quieras y que combine mejor con el color de tu blog, pero recuerda que no debe ser mayor de 50x50px para que no distorsione con el resto del código. Por lo demás, no hay problema.