Instalando una fecha estilo calendario en el blog

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

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.