Hace tiempo vimos una forma para colocar la fecha estilo calendario en el blog. En esta entrada te mostraré un nuevo procedimiento, más sencillo y rápido que el anterior para obtener la fecha en una casilla.
Diseño>Elementos de la página>Entradas del blog>Editar
Desmarca la casilla que muestra la fecha en las entradas:
Guarda cambios.
Diseño>Configuración>Formato>Formato de hora
Selecciona el siguiente formato de hora (el único que contiene texto):
Guarda cambios.
Diseño>Edición de HTML>expandimos artilugios
Busca esta línea:
<b:includable id='post' var='post'>
Justo debajo añade este bloque de código:
<div id='blfecha'>
<script type='text/javascript'>
var timestamp = "<data:post.timestamp/>";
if (timestamp != '') {
var bl_fecha1 = timestamp.split(",");
var blfecha_anio = bl_fecha1[2];
var bl_fecha1 = bl_fecha1[1].split(" ");
var blfecha_dia = bl_fecha1[2];
var blfecha_mes = bl_fecha1[1].substring(0, 3);
if (blfecha_dia.substring(0,1) == "0") {
var blfecha_dia=blfecha_dia.substr(1,1);}
}
</script>
<div id='blfecha_dia'><script type='text/javascript'>document.write(blfecha_dia);</script></div>
<div id='blfecha_mes'><script type='text/javascript'>document.write(blfecha_mes);</script></div>
<div id='blfecha_anio'><script type='text/javascript'>document.write(blfecha_anio);</script></div>
</div>
Ahora busca la etiqueta ]]></b:skin> y encima inserta estos bloques de CSS que darán estilo a la fecha:
#blfecha {
float: left;
width: 50px;
height: 50px;
background: url('URL DE LA IMAGEN') center no-repeat;
}
#blfecha_dia {
color: #339999;
font-size: 28px;
letter-spacing: -2px;
display:block;
margin-top:0px;
font-family: Times New Roman, arial;
text-align: center;
}
#blfecha_mes {
margin-top: -9px;
display:block;
color: #19be43;
text-align:center;
font-size: 14px;
}
#blfecha_anio {
font-size: 12px;
display:block;
margin-top: -2px;
color: #be8719;
text-align:center;
}
En caso de querer añadir una imagen de fondo a la fecha, reemplaza URL DE LA IMAGEN por la dirección de ésta [+].
- Para posicionar la casilla de la fecha a la derecha reemplaza float: left; por float: right; en el primer bloque de código CSS.
- Para cambiar el color del texto reemplaza el código que aparece en la línea color: #be8719; e inserta tu tonalidad favorita (haz uso de la tabla de colores).
#blfecha_dia { indica las propiedades que tendrán los números de la primera fila (el día).
#blfecha_mes { indica las propiedades que tendrá el texto de la seguna fila (el mes).
#blfecha_anio { indica las propiedades que tendrán los números de la primera fila (el año).
Finalmente, guarda la plantilla:
Si quieres modificar cualquier otra cosa y no sabes como hacerlo avísame mediante un comentario.
La lista con la que se mostrarán las páginas no tiene estilo alguno, por lo que vamos a "decorarla" un poco y a transformarla en un menú:
