Mostrar fecha en todos las entradas

Tutoriales El escaparate Rosa

En unos sencillos pasos conseguiremos que la fecha de nuestras entradas se muestre dentro de una imagen tipo calendario.

[1] Para comenzar tendremos que cambiar el formato en que se muestra la fecha de nuestros posts. Iremos a nuestro panel de Blogger y en Configuración escogemos la opción Formato, una vez allí en "Formato de cabecera de la fecha" seleccionamos la penúltima opción que aparece en el despegable.
Ejemplo: 08 junio 2008

[2] Una vez cambiado el formato de la fecha, vamos a Edición de Html y expandimos los artilugios. Localizamos la etiqueta y justo antes colocamos este 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>


[3] Tendremos que localizar ahora dentro del código de la plantilla esta etiqueta:

<h2 class='date-header'><data:post.dateHeader/></h2>


Para que no sea tan complicado podemos usar nuestro navegador para buscarlo.

Sustituimos esa etiqueta por este código:

<div id='fecha'>

<script>remplaza_fecha('<data:post.dateHeader/>');</script>

</div>



[4] Volvemos hacia arriba en nuestra plantilla para localizar la etiqueta ]]></b:skin>
y justo encima, pegamos estas líneas de CSS para controlar el estilo de nuestra fecha:

/* Calendario-Fecha
-------------------- */

#fecha {
display: block;
float:left;
margin: 0 13px 0 0;
padding: 0 13px 8px 10px;
color: #333;
background: transparent url(http://img367.imageshack.us/img367/1449/blue2kt9.png) no-repeat;
border: 0;
text-transform: uppercase;
}

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

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

.fecha_dia {
margin: 2px 0 0 1px;
display: block;
font-size: 16px;
font-weight:bold;
}


Notas: En el CSS anterior está colocada la url de uno de los calendarios azules (el que se ve en el ejemplo de la imagen) para usar otro color de calendario, tendremos que subir el calendario escogido a un alojamiento de imágenes y sustituir la url en el código por la que nos proporcionan en el alojamiento.


Estes son algunos ejemplos :

DESCARGAR EL PACK DE ICONOS-CALENDARIOS DESDE GOOGLE-PAGES

DESCARGAR EL PACK DE ICONOS-CALENDARIOS DESDE DROPBOX