Personalizar fechas en las entradas de Blogger

En este tutorial les enseñaré un sencillo método de personalizar las fechas de las entradas mediante javascript y CSS. Para ello, utilizaremos un script con el que reemplazaremos las fechas normales ya que no es mucho lo que podemos hacer con las estándar.


Puedes ver un ejemplo en la siguiente imagen:

La imagen es referencial, los estilos pueden variar.

Paso 1: Añadiendo el nuevo script:

En ''Diseño | Edición HTML'' marcaremos ''Expandir plantillas de artilugios'', en donde deberás buscar la siguiente sección:

</head>

Arriba de este código deberás pegar el siguiente:

<script src='http://archivos.ayuda-bloggers.info/Scripts%20Recuperados/fecha.js' type='text/javascript'/>

Ahora busca la siguiente línea, pero recuerda que puede variar y/o estar repetida:

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

Reemplázala por el siguiente código:

<div id='fecha-ab'>
<script>nueva_fecha('<data:post.dateHeader/>');</script>
</div>
<b:else/>
 <div id='fecha-ab'>
<script>nueva_fecha('');</script>
</div>

Paso 2: Añadiendo los estilos:

Ahora deberás buscar la siguiente sección:

]]></b:skin>

Arriba de esta, deberás pegar el siguiente código:

#fecha-ab { /*Contenedor*/
display: block;
float:left;
text-align:center;
margin: 0 13px 0 0;
color: #fff;
background: #339999;
border: 0;
border-radius:45px;
width:65px;
height:65px;
text-transform: uppercase;
box-shadow:2px 2px 0px #d2d2d2;
}

.fecha_mes { /*Estilos para el mes*/
display: block;
font-size: 13px;
font-weight:bold;
}

.fecha_anio { /*Estilos para el año*/
display: block;
font-size: 12px;
}

.fecha_dia { /*Estilos para el día*/
display: block;
font-size: 18px;
font-weight:bold;
}

 Previsualiza los cambios y si todo está en orden guardas la plantilla.

Importante:

Para que este efecto funcione correctamente, es necesario configurar la fecha de la siguiente forma:

Deberás ir a ''Configuración | Formato'' y en ''Formato de cabecera de fecha'', deberás elegir la que tiene la siguiente estructura (Corresponde a la penúltima opción):

07 Septiembre 2011