Personalizar un poco la fecha del blog tiene sus truquitos, quedará tipo calendario en forma de un pequeño listón pegado al lateral junto al título de la entrada, el ejemplo se puede ver en este blog, para hacerlo hay que seguir tres pasos muy simples.
Primero que nada hay que establecer el formato de fecha del blog de la siguiente forma: 20 Diciembre 2014. Luego de hacer eso vamos a la plantilla y ubicamos esta línea, </head> y justo arriba pegamos el siguiente código; este no es más que un Script que hará la función de reemplazar el formato por defecto.
Primero que nada hay que establecer el formato de fecha del blog de la siguiente forma: 20 Diciembre 2014. Luego de hacer eso vamos a la plantilla y ubicamos esta línea, </head> y justo arriba pegamos el siguiente código; este no es más que un Script que hará la función de reemplazar el formato por defecto.
<script>
function calendario(d){ 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);
}
</script>
function calendario(d){ 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);
}
</script>
Lo siguiente será ubicar esta línea en la plantilla: <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
Normalmente esa línea debería aparecer dos veces en ambos casos la sustituimos por esta:
<div id='fecha'>
<script>calendario('<data:post.dateHeader/>');</script>
</div>
<script>calendario('<data:post.dateHeader/>');</script>
</div>
Ahora localizamos la etiqueta ]]></b:skin> y justo arriba pegamos los estilos del calendario.
#fecha {
font-family: Arial, Verdana;
display: block;
float:left;
margin: 0px 10px 0 -30px;
padding: 0 5px 5px 5px;
width:30px;
height:54px;
background: transparent url(http://i.imgur.com/ztc1Ib0.png?1) no-repeat ;
height: 54px;
text-transform: uppercase;
}
.fecha_mes {
display: block;
margin-top:-10px;
font-size: 11px;
color:#ffffff;
text-align:center;
}
.fecha_anio {
display: block;
font-size: 11px;
color:#ffffff;
margin-top:-6px;
text-align:center;
}
.fecha_dia {
font-family: 'Times New Roman';
margin-top:-3px;
display: block;
font-size:20px;
text-align:center;
color:#1073D0;
}
font-family: Arial, Verdana;
display: block;
float:left;
margin: 0px 10px 0 -30px;
padding: 0 5px 5px 5px;
width:30px;
height:54px;
background: transparent url(http://i.imgur.com/ztc1Ib0.png?1) no-repeat ;
height: 54px;
text-transform: uppercase;
}
.fecha_mes {
display: block;
margin-top:-10px;
font-size: 11px;
color:#ffffff;
text-align:center;
}
.fecha_anio {
display: block;
font-size: 11px;
color:#ffffff;
margin-top:-6px;
text-align:center;
}
.fecha_dia {
font-family: 'Times New Roman';
margin-top:-3px;
display: block;
font-size:20px;
text-align:center;
color:#1073D0;
}
Damos guardar y listo.
Todos los estilos se pueden personalizar al gusto, donde está marcado en rojo pueden sustituir esa imagen por la suya, lo importante es que tenga las medidas que establezcan en los estilos.
No hay comentarios:
Publicar un comentario