Personalizar fecha

Hoy quiero compartir con vosotros una de las cosas que he aprendido estos días gracias al blog de Gema, me refiero a personalizar el formato de la fecha de nuestras entradas.

Empezamos por ir a Configuración > Formato y en Formato de cabecera escogemos la opción que se muestra en la imagen:


Hecho esto, guardamos la configuración y vamos a Plantilla > Edición HTML para insertar la siguiente función:

Código

<script>
function remplaza_fecha(d){
var da = d.split(&#39; ');
dia = "<div class='fecha_dia'>&quot;+da[0]+"</div>&quot;; //Le otorgamos una clase al día
mes = &quot;<div class='fecha_mes'>&quot;+da[1].slice(0,3)+&quot;</div>&quot;; //Le otorgamos una clase al mes
anio = &quot;<div class='fecha_anio'>&quot;+da[2]+"</div>&quot;; //Le otorgamos una clase al año
document.write(dia+mes+anio);
}
</script>

La parte en rojo la podemos cambiar en función del orden en que queramos que aparezca cada parámetro, o incluso eliminar alguno si no queremos que aparezca. Se me ocurre que si por ejemplo quereis prescindir del año, pues basta con poner dia+mes.

Guardamos la plantilla, expandimos artilugios y, utilizando Ctrl+F, buscamos <data:post.dateHeader/> para sustituirlo por lo siguiente:

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

Y por último añadimos las siguientes líneas de código justo antes de ]]></b:skin>

Código

/* Fecha
----------------------------------------------- */
#fecha {
display: block;
margin:0 3px;
float:left;
border:#000000 3px solid;
text-transform:capitalize;
}
.fecha_dia {
display: block;
font-size: 21px;
font-weight:bold;
background: #DDEEFF;
padding: 5px;
}
.fecha_mes {
display: block;
font-size: 10px;
border-bottom:#000000 3px solid;
background: #EE2222;
padding: 1px;
color: #EEEEEE;
text-align: center;
}
.fecha_anio {
display: block;
font-size: 10px;
}

Esta es la parte del código donde podeis probar a modificar parámetros hasta darle el estilo que deseais en vuestro blog.

Espero que os haya sido útil, si lo probais informarme para ver que tal os queda, y si os surge algún problema dejad un comentario y tratamos de resolverlo juntos.

Sen máis...