Embelleciendo mi PLANTILLA: Formato de Fecha del POST en modo gráfico

En Mi iPhone 2G quería que el formato de fecha fuera identico al icono del calendario del iPhone.

Lo primero es crear el fichero grafico que va a servir como fondo a nuestro texto de fecha y subirlo via PICASA, por ejemplo. El mío tiene un tamaño de 60x60 pixels.

Después debemos hacer cambiar el formato de fecha de cabecera del Post en CONFIGURACION - FORMATO - Formato de cabecera de la fecha. Elegimos un formato que no tenga comas, ni separadores, por ejemplo el penúltimo: "05 agosto 2008".

Lo siguiente que debemos hacer es ir a edición de html, expandimos artilugios y justo antes de la etiqueta </head> pegamos el siguiente script:

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




Este código lo que hace es partir el formato de fecha en 3 trozos de forma que luego pueda aplicarse un estilo CSS a cada uno de ellos. Lo normal sería utilizar <div class> pero resulta que las etiquetas 'div' no pueden ir dentro del 'head' porque Blogger ha cambiado la versión de HTML y responde "que el HTML de la plantilla es incorrecto".
Por eso se usa <strong class>

En la última linea "dia+mes+anio" se puede alterar el orden en función de cómo quieras presentar la fecha, incluso cómo yo sólo voy a mostrar MES y DIA la linea queda así:

document.write(mes+dia);


El siguiente paso será localizar la etiqueta <data:post.dateHeader/> y la sustituimos por el siguiente código:


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


por último buscamos la etiqueta ]]></b:skin>
y justo encima pegamos lo siguiente:

/* Calendario-Fecha
-------------------- */
#fecha {
display: block;
float:left;
margin: 0 13px 0 0;
padding: 0 13px 8px 10px;
color: #333;
background: transparent url("http://lh3.ggpht.com/_vTi-WZoeE2M/ST2K_BRJ28I/AAAAAAAAAgw/ahPG-1fhSMo/s144/calendar.jpg") no-repeat;
border: 0;
width:65px;
height:50px;
}

.fecha_mes {
font-size: 13px;
margin: 4px 0 0 13px;
color:white;
display: block;
}

.fecha_dia {
margin: 7px 0 0 14px;
display: block;
font-size: 14px;
color:#448088;
}


Tendréis que cambiar la url de donde tengais alojada vuestra imágen y modificar los valores del margin, centrado, etc.. para que queden bien según vuestro grafico de fondo.

De hecho yo he realizado algunas modificaciones y eliminado el párrafo correspondiente al AÑO que no uso, por lo que los parrafos de estilo quedan así:

.fecha_mes {
font-family: arial,helvetica;
text-transform: lowercase;
text-align: center;
font-size: 14px;
margin: 3px 0px 0px 0px;
padding: 0px 0px 0px 0px;
color:white;
display: block;
}

.fecha_dia {
font-family: arial,helvetica;
text-align: center;
font-size: 34px;
font-size: 135%
margin: 10px 0px 0px 0px;
padding: 0px 0px 0px 0px;
display: block;
color:#000000;
}