Hace día me preguntaba
3705 sobre como poner en las entradas la fecha tipo calendario. Hoy le explicare como hacerlo y además este se vera en todas las entradas así las haya publicado el mismo día. Es muy sencillo, pero recuerda siempre probar en un blog de prueba.
¡Recuerda! "GUARDAR SIEMPRE UNA COPIA DE TU PLANTILLA EN TU PC"
Seguiremos los siguientes paso ante de empezar, no vamos al
Panel > Configuración > Formato > Formato de cabecera de fecha > Seleccionamos la penúltima fecha del menú desplegable que se nos presenta
(03 abril 2009).
Después de hacer el paso anterior nos vamos a
Diseño > Edición de HTML > Expandir plantilla en artilugios. Y ante del
</head> colocamos el siguiente script:
<script type='text/javascript'>
//<![CDATA[
var ultimaFecha;
function remplaza_fecha(d){
if (d == "") {
d = ultimaFecha;
}
var da = d.split(' ');
dia = "<strong class='fecha_dia'>"+da[0]+"</strong>";
mes = "<strong class='fecha_mes'>"+da[1].slice(0,3)+"</strong>";
anio = "<strong class='fecha_anio'>"+da[2]+"</strong>";
document.write(dia+mes+anio);
ultimaFecha = d;
}
//]]>
</script>
Ahora buscaremos el siguiente código en la plantilla (CTRL+F) (Si no lo encuentras búscalos por este también:
<data:post.dateHeader/>):
<h2 class='date-header'><data:post.dateHeader/></h2>
Una vez localizado lo remplazaremos por el siguiente:
<div id='fecha'>
<script>remplaza_fecha('<data:post.dateHeader/>');</script>
</div>
<b:else/>
<div id='fecha'>
<script>remplaza_fecha('');</script>
</div>
Ahora vamos a darle el estilo CSS, que por supuesto lo encontraremos después del ]]></b:skin>:
/* Calendario-Fecha
-------------------- */
#fecha {
display: block;
float:left;
margin: 0 13px 0 0;
padding: 0 13px 8px 10px;
color: #333;
background: transparent url(http://img367.imageshack.us/img367/1449/blue2kt9.png) no-repeat;
border: 0;
text-transform: uppercase;
}
.fecha_mes {
display: block;
font-size: 10px;
font-weight:bold;
}
.fecha_anio {
display: block;
font-size: 10px;
}
.fecha_dia {
display: block;
font-size: 16px;
font-weight:bold;
}
El código CSS hay ciertas cosas que puedes modificar como la posición (Float) del calendario, el código original esta a la Izquierda(Left) y lo puedes cambiar por Derecho(Right). Si quieres cambiar el tamaño del texto tienes que hacerlo en font-size. Puedes cambiar la imagen en background y si utiliza alguna imagen diferente a la que te ofrezco aquí, tendrás que cambiar algunos valores como el padding, margin y font-size .
Pack de iconos de calendario Descargar
Fuentes: El Escaparate de Rosa <> Vagabundia
