Personalizar la fecha de los post,(entradas) en tu blog

Con los siguientes pasos podremos hacer que las fechas de los post,entradas de nuestro blog se muestre dentro de un fondo que quieras mostrar con la medida 48 px por 49 px como el que yo tengo en mi blog, si no la quieres con un fondo igual te queda con un estilo diferente y mas hermoso de como la muestra blogger que es horizontal y por encima del titulo con los pasos que les boy a indicar hoy les va a quedar en miniatura y vertical arlado del titulo .

Este es un ejemplo sin imagen de fondo:

Y este va a ser el resultado con imagen:

Bueno despues de ver estos ejemplos vamos a cambiar el formato en que se muestra la fecha de nuestros posts. Para eso vamos a Diseño a Configuración y escogemos la opción Formato, una vez allí en "Formato de cabecera de la fecha" seleccionamos la penúltima opción que se nos presenta en el desplegable, ejemplo: 28 septiembre 2011, y guardamos configuración

Ya guadado el formato de la fecha vamos a ir a diseño despues a Edición de Html y expandimos los artilugios.
vamos a localizar la etiqueta </head> y justo antes vamos a colocar 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>


Ahora vamos a localizar este codigo:


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

Una ves localizado lo vamos a sustituir por este codigo:

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

Ya por ultímo vamos a darle un poco de estilo a la fecha y localizemos este codigo:

]]></b:skin>

Justo antes vamos a pegar este codigo a continuacion:

/* css para la-Fecha
-------------------- */

#fecha {
display: block;
float:left;
margin: 0 13px 0 0;
padding: 0 13px 8px 10px;
color: #333;
background: transparent url(AQUI VA LA URL DE LA IMAGEN) 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;
}




Ahora guardamos los cambios y vemos que todo este bien.

Si no quieren fondo no pongan ninguna imagen y solo se les mostrara la fecha.

Espero y les haya gustado aquí les dejo algunas imagenes por si quieren usar ,den click derecho encima de la imagen  ver imagen y guardar como y se les guardara en su pc despues la pueden subir a un servidor de imagenes o archivos les recomiendo Dropbox obtinen la url la ponen donde va y es todo
o click derecho ver informacion de la imagen y copien la direccion url de la imagen.

Tweet

Compartir esta entrada :

Quizás también le interese:

Sí disfrutas de estas entradas solo has click aquí, o suscribete para recibir mas entradas como estas.

Subscribirse por RSS Feed

Su informacion nunca sera compartida.