Fecha estilo calendario en el blog

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 = &quot;<data:post.timestamp/>&quot;;
if (timestamp != &#39;&#39;) {
var bl_fecha1 = timestamp.split(&quot;,&quot;);
var blfecha_anio = bl_fecha1[2];
var bl_fecha1 = bl_fecha1[1].split(&quot; &quot;);
var blfecha_dia = bl_fecha1[2];
var blfecha_mes = bl_fecha1[1].substring(0, 3);
if (blfecha_dia.substring(0,1) == &quot;0&quot;) {
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.