Personalizar la forma en que se muestra la fecha en Blogger

Nany, me preguntó como colocar la fecha en las entraedas y este truco lo encontre en BLOG AND WEB, asi es que decidi compartirlo.

Blogger coloca por defecto la fecha en todos los mensajes que publicas y es muy pobre el formato en que la encajona, te la muestra en una sola linea y toda la fecha bajo la misma clase CSS. Con este método podrás mostrar la fecha de forma más estética y tendrás mayor control sobre ella.


Lo primero que hay que hacer es cambiar el formato de la fecha. Vamos a la pestaña “Opciones” y a la opción “Formato”.

Ahora buscamos el campo “Formato de cabecera de fecha” y ahí seleccionamos el penúltimo formato de fecha, que es continuo y sin comas, algo así como “15 marzo 2007″ y guardamos con el botón de abajo “Guardar Valores”.

Una vez aqui, nos vamos a la pestaña “Plantilla” y a la opción “Edición de HTML”.

Aqui buscamos la etiqueta </head> y justo antes pegamos el siguiente código:

<script>
function remplaza_fecha(d){
var da = d.split(&#39; &#39;);
dia = &quot;<strong class='fecha_dia'>&quot;+da[0]+&quot;</strong>&quot;;
mes = &quot;<strong class='fecha_mes'>&quot;+da[1].slice(0,3)+&quot;</strong>&quot;;
anio = &quot;<strong class='fecha_anio'>&quot;+da[2]+&quot;</strong>&quot;;
document.write(dia+mes+anio);
}
</script>

Este es el código que otorga a cada parte de la fecha, día, mes y año, una clase para poder personalizar su estilo.

Ahora activa la casilla “Expandir plantillas de artilugios” y en el campo de edición de texto busca el siguiente código:

<data:post.dateHeader/>

Busca bien, se encuentra en la mitad baja del código aproximadamente, este podría parecer el paso más ‘tedioso’ pero al final veras que es fácil

Ahora que lo encontraste, sustitúyelo con el siguiente código:

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

Ahora buscamos el código

]]></b:skin>

Y justo arriba de él pegamos los estilos siguientes:

#fecha {

display: block;

margin:0 10px;

float:left;

padding: 5px;

color: #464646;

background: #e4e3ad;

border:#d7d675 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;

}

Sí te das cuenta hay un estilo general para la fecha y uno para elemento de esta, tu puedes cambiarle los colores de fondo y de texto modificando estos estilos.

El resultado final, con estos estilos, es el siguiente: