Personalizar la fecha (descargables)

¡Hola, amig@s!

Hoy os traigo un tutorial muy interesante. Vamos a personalizar el estilo de la fecha de los posts.

Buscando por internet encontré un tutorial muy interesante en el blog ciudadblogger. Basándome en su código, lo he adaptado un poco a mis necesidades y he diseñado un montón de ejemplos que os podréis descargar tranquilamente. 

Ah, y como está aquí la navidad os he hecho par de modelos navideños, je je. 

Primero os muestro los diseños que he hecho para que os descarguéis el que más os guste. Una vez descargado os indicaré los pasos para añadirlo a vuestro blog:

ESTILO HOJA CALENDARIO

Descargar estilo calendario

ESTILO CIRCULAR

                                                      Descargar estilo circular

ESTILO FLORAL

Descargar estilo floral

ESTILO NAVIDEÑO GORRO PAPÁ NOEL

Descargar estilo gorro papá Noel

ESTILO NAVIDEÑO GALLETITA DE JENGIBRE

Descargar estilo galleta jengibre

ASEGURARSE DE TENER HABILITADA  LA FECHA DE LOS POSTS:

Para ello vamos a la vista Layout → Entradas de blog → Edit y confirmamos que está marcado que se muestre la fecha.

ELEGIR FORMATO DE FECHA ESPECÍFICO

Vamos a Settings → Language and formatting y elegimos el siguiente formato:

BUSCAR EL SIGUIENTE CÓDIGO

Si se encuentra en dos sitios, elegir el primero de los 2. Si no funciona, probar a sustituir en el otro.

<h2 class='date-header'><span><data:post.dateHeader/></span></h2><div id='Fecha'>

SUSTITUIRLO POR

<script>cambiarFecha(&#39;<data:post.dateHeader/>&#39;);</script>

</div>

<b:else/>

<div id='Fecha'>

<script>cambiarFecha(&#39;&#39;);</script>

</div>

AÑADIR ESTE CÓDIGO ANTES DE  </head>:

<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>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
/* Fecha tipo calendario
----------------------------------------------- */
#Fecha {
background: transparent url(URL de la imagen) no-repeat;
display: block;
width:60px; /*ancho en función del diseño elegido*/
height:60px;/*alto en función del diseño elegido*/
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;/*modificar en función diseño elegido*/
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 */
}
</style>
</b:if>

PERSONALIZAR






El código para el diseño de hoja de calendario es justo el de arriba. No hay que modificar nada. Para el resto de diseños habrá que cambiar algún dato. Se indica a continuación.

#Fecha {
width:72px; /*ancho en función del diseño elegido/
height:68px; /*alto en función del diseño elegido*/
}

.fecha_mes {
margin-top:4px; /*modificar en función diseño elegido*/
}

.fecha_mes {
margin-top:4px; /*modificar en función diseño elegido*/
}

#Fecha {
width:96px; /*ancho en función del diseño elegido/
height:96px; /*alto en función del diseño elegido*/
}

.fecha_mes {
margin-top:30px; /*modificar en función diseño elegido*/
margin-left:40px;
}
.fecha_mes {
margin-top:-8px; /*modificar en función diseño elegido*/
margin-left:40px;
}
.fecha_ano {
margin-left:40px;
}

#Fecha {
width:64px; /*ancho en función del diseño elegido/
height:99px; /*alto en función del diseño elegido*/
}

.fecha_mes {
margin-top:30px; /*modificar en función diseño elegido*/
}

El resultado final será como el siguiente y con el diseño que hayáis elegido:

Es un cambio de estilo muy interesante, ¿verdad? Espero que os sirva para darle otro aire a vuestro blog.

Besotes