sábado, enero 23, 2010

Mostrar fecha en todos las entradas


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

3 comentarios:

María dijo...

Hola, Ana:

Muchas gracias por tu interés en querer ayudarme, pero no me refería a las fechas.

Lo que quise preguntarte, y perdona porque me debí explicar mal-, es que ¿cómo haces tú para que el número de comentarios aparezca arriba del todo en una esquina a la derecha y en un circulito? es que estuve mirando tu blog y no veo nada referente a ello.

Me parece muy interesante tu blog, como ya te comenté, de gran ayuda, y vendré más veces por aquí para ver si puedo mejorar los míos y modificarlos y embellecerlos un poquito.

Muchas gracias, Ana.

Un abrazo.

Ana dijo...

Hola María

En esta entrada, lo expliqué:

http://asvueltasconblogger.blogspot.com/search/label/Comentarios

Cualquier duda avisa.

Schweizer dijo...

Hola, no me queda claro dónde pegamos el código del punto 2. Antes de cuál etiqueta? Garcias. Excelente blog!

Publicar un comentario