Hoy quiero compartir con vosotros una de las cosas que he aprendido estos días gracias al blog de Gema, me refiero a personalizar el formato de la fecha de nuestras entradas.
Empezamos por ir a Configuración > Formato y en Formato de cabecera escogemos la opción que se muestra en la imagen:
Hecho esto, guardamos la configuración y vamos a Plantilla > Edición HTML para insertar la siguiente función:
Código
La parte en rojo la podemos cambiar en función del orden en que queramos que aparezca cada parámetro, o incluso eliminar alguno si no queremos que aparezca. Se me ocurre que si por ejemplo quereis prescindir del año, pues basta con poner dia+mes.
Guardamos la plantilla, expandimos artilugios y, utilizando Ctrl+F, buscamos <data:post.dateHeader/> para sustituirlo por lo siguiente:
Y por último añadimos las siguientes líneas de código justo antes de ]]></b:skin>
Código
Esta es la parte del código donde podeis probar a modificar parámetros hasta darle el estilo que deseais en vuestro blog.
Espero que os haya sido útil, si lo probais informarme para ver que tal os queda, y si os surge algún problema dejad un comentario y tratamos de resolverlo juntos.
Empezamos por ir a Configuración > Formato y en Formato de cabecera escogemos la opción que se muestra en la imagen:
Hecho esto, guardamos la configuración y vamos a Plantilla > Edición HTML para insertar la siguiente función:
<script>
function remplaza_fecha(d){
var da = d.split(' ');
dia = "<div class='fecha_dia'>"+da[0]+"</div>"; //Le otorgamos una clase al día
mes = "<div class='fecha_mes'>"+da[1].slice(0,3)+"</div>"; //Le otorgamos una clase al mes
anio = "<div class='fecha_anio'>"+da[2]+"</div>"; //Le otorgamos una clase al año
document.write(dia+mes+anio);
}
</script>
function remplaza_fecha(d){
var da = d.split(' ');
dia = "<div class='fecha_dia'>"+da[0]+"</div>"; //Le otorgamos una clase al día
mes = "<div class='fecha_mes'>"+da[1].slice(0,3)+"</div>"; //Le otorgamos una clase al mes
anio = "<div class='fecha_anio'>"+da[2]+"</div>"; //Le otorgamos una clase al año
document.write(dia+mes+anio);
}
</script>
La parte en rojo la podemos cambiar en función del orden en que queramos que aparezca cada parámetro, o incluso eliminar alguno si no queremos que aparezca. Se me ocurre que si por ejemplo quereis prescindir del año, pues basta con poner dia+mes.
Guardamos la plantilla, expandimos artilugios y, utilizando Ctrl+F, buscamos <data:post.dateHeader/> para sustituirlo por lo siguiente:
<div id='fecha'>
<script>remplaza_fecha('<data:post.dateHeader/>');</script>
</div>
<script>remplaza_fecha('<data:post.dateHeader/>');</script>
</div>
Y por último añadimos las siguientes líneas de código justo antes de ]]></b:skin>
/* Fecha
----------------------------------------------- */
#fecha {
display: block;
margin:0 3px;
float:left;
border:#000000 3px solid;
text-transform:capitalize;
}
.fecha_dia {
display: block;
font-size: 21px;
font-weight:bold;
background: #DDEEFF;
padding: 5px;
}
.fecha_mes {
display: block;
font-size: 10px;
border-bottom:#000000 3px solid;
background: #EE2222;
padding: 1px;
color: #EEEEEE;
text-align: center;
}
.fecha_anio {
display: block;
font-size: 10px;
}
----------------------------------------------- */
#fecha {
display: block;
margin:0 3px;
float:left;
border:#000000 3px solid;
text-transform:capitalize;
}
.fecha_dia {
display: block;
font-size: 21px;
font-weight:bold;
background: #DDEEFF;
padding: 5px;
}
.fecha_mes {
display: block;
font-size: 10px;
border-bottom:#000000 3px solid;
background: #EE2222;
padding: 1px;
color: #EEEEEE;
text-align: center;
}
.fecha_anio {
display: block;
font-size: 10px;
}
Esta es la parte del código donde podeis probar a modificar parámetros hasta darle el estilo que deseais en vuestro blog.
Espero que os haya sido útil, si lo probais informarme para ver que tal os queda, y si os surge algún problema dejad un comentario y tratamos de resolverlo juntos.
Sen máis...
2 comentarios:
Está interesante esto, aunque yo de momento me espero porque ya tengo el blog bastante recargado de chismes...:P
Te dejo un regalito en exclusiva para ti en mi blog!!
Y un café jijiji
Muy buena explicación y otra cosa más... me encanta la personalización que diste al nuevo editor de comentarios :)
Publicar un comentario