Como puedes observar, la fecha en las entradas del blog ya no tiene el formato por defecto que viene con la plantilla original, sino una hoja de papel con las esquinas dobladas, pues bien, debo decir que la información para realizar dicha tarea la he extraído de un blog al que he conocido hace unos 3 dias escasos llamado La Bloguería, bajo mi punto de vista es un gran blog, una bitácora con mucho estilo e información muy interesante ;) aconsejo su lectura.
Procedamos a personalizar la fecha de las entradas del blog:
Lo primero que debemos hacer es configurar el formato de la fecha tal y como se indica en la imagen, para ello debemos ir a la pestaña Configuración y una vez en ella a la pestaña Formato.
Y ahora vamos con el código.
En primer lugar, vamos a la edición HTML de la plantilla, guardamos una copia por lo que pueda ocurrir, marca la casilla de expandir artilugios, y busca donde empieza el cuerpo de la página, es decir, el <body> ayudándote con el buscador (CRTL +F). Añade este código <script> justo después:
<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>
En segundo lugar, buscaremos esta línea:
<data:post.dateHeader/>
(Insisto: pégala en la barra de busqueda que se abre con CTRL + F y te llevará directo a esa parte del código).
Sustitúyela por ésta:
<div id='fecha'><script>remplaza_fecha('<data:post.dateHeader/>');</script></div>
Y por último, añadiremos el CSS justo antes de ]]></b:skin>.
#fecha {
display: block;
margin:0 10px;
float:left; /*posiciona la fecha a la dcha. o a la izda.*/
padding: 5px;
color: blue;
background-image: url(URL IMAGEN); /*puedes cambiar la imagen por color*/
border:red 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;
}
Y eso es todo, ¿ves que fácil?
Recuerda que todos los experimentos que vayas encontrando en el Laboratorio Sin Destino son para blogs de Blogger, en otros blogs es muy probable que peten, aunque si eres un poco científico podrás modificar el código del experimento a tu antojo y adaptarlo a tus necesidades.
Via |
La Bloguería te ayuda a personalizar las fechas de las entradas de tu blogPosts relacionados:
- Ocultando las fechas en los posts
- Añadiendo un icono a las fechas de los posts
+ info Via Vagabundia |
Blogger: la fecha de los posts un post muy completo donde encontrarás toda la info necesaria y una serie de iconos tipo calendario para descargar.
Entradas
Loading...