Personalizar la fecha de las entradas en Blogger.

Con este tutorial vamos a cambiar la apariencia de la fecha de cada entrada de nuestro blog.




1. Accedemos a Opciones / Formato. Buscamos la opción Formato de cabecera de fecha y escogemos la penúltima. En este caso es 29 mayo 2007. Hacemos clic en Guardar valores.

2. Ahora accedemos a Plantilla / Edición de HTML. Copiamos antes de </head> el siguiente código:

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

A continuación guardamos los cambios.

3. En la misma pantalla de Editar Plantilla hacemos clic en Expandir plantillas de artilugios. Buscamos <data:post.dateHeader/> y lo sustituimos por el siguiente código:

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

Ahora buscamos ]]></b:skin> y justo encima copiaremos el siguiente código:

#fecha {
display: block;
margin:0 10px;
float:left;
padding: 5px;
color: #000000;
background: #ffffff;
border:#ffa000 3px solid;
text-transform:capitalize;
}

.fecha_dia {
display: block;
font-size: 16px;
font-weight:bold;
}

.fecha_mes {
display: block;
font-size: 10px;
}

.fecha_anio {
display: block;
font-size: 10px;
}

Guardamos los cambios y listo. Os quedará algo así:

Recordad que podeis personalizarlo a vuestro gusto modificando el color de fondo (background), del texto (color), del borde (border), etc.

AQUÍ teneis una tabla de colores que os puede servir para personalizar vuestra fecha.