Poner La Fecha Tipo Calendario
martes, 29 de noviembre de 2011 @ 11/29/2011 09:52:00 a. m.
0 comment(s)
Hay una forma muy particular de mostrar la fecha que llama mucho la atención a muchos, y es lafecha tipo calendario, que le da un aspecto bastante interesante y distinto a este dato de las entradas que usualmente no le damos mucha importancia.
Para poner la fecha tipo calendario en el blog, primero descarga este archivo, es el que contiene todas las imágenes del calendario, elige la que más te guste y súbela a Picasaweb o al hosting que prefieras.
Ahora entra en la Edición HTML de la plantilla, marca la casilla Expandir plantillas de artilugiosy busca esta línea:
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
Es posible que la encuentres dos veces, la segunda es la que nos interesa.
Ya que la hayas localizado elimínala y en su lugar pon esto:
<div id='Fecha'>
<script>cambiarFecha('<data:post.dateHeader/>');</script>
</div>
<b:else/>
<div id='Fecha'>
<script>cambiarFecha('');</script>
</div>
Ahora agrega antes de este script:
<script type='text/javascript'>
//<![CDATA[
var FechaCalendario;
function cambiarFecha(d){
if (d == "") {
d = FechaCalendario;
}
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(mes+dia+anio);
FechaCalendario = d;
}
//]]>
</script>
Por último agrega antes de ]]> los estilos:
/* Fecha tipo calendario
----------------------------------------------- */
#Fecha {
background: transparent url(URL de la imagen) no-repeat;
display: block;
width:60px;
height:60px;
float: left;
margin: 5px 2px 0 -70px;
padding: 0 0 8px 0px;
border: 0;
text-transform: uppercase;
}
.fecha_mes {
display: block;
font-size: 15px;
font-weight:bold;
margin-top:-1px;
text-align:center;
color:#282828; /* Color del mes */
}
.fecha_dia {
display: block;
font-size: 28px;
font-weight:bold;
margin-top:-8px;
text-align:center;
color:#282828; /* Color del día */
}
.fecha_anio {
display: block;
font-size: 10px;
margin-top:-8px;
text-align:center;
color:#282828; /* Color del año */
}
Agrega la URL de la imagen donde se indica y listo. En color verde verás dónde cambiar el color de los datos de la fecha.
El archivo contiene 14 imágenes con distintos colores para que elijas el que mejor se adapte a los colores de tu plantilla.
