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;
}
Pulsa para CONTINUAR LEYENDO...
