Personalizar fechas en las entradas de Blogger

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
Artículo aleatorio
BuySellAds
BuySellAds
BuySellAds
BuySellAds
BuySellAds
Artículos destacados
Marca de agua en las imágenes con CSS # - Marca de agua en las imágenes con CSS
Efecto de desenfoque con CSS # - Efecto de desenfoque con CSS
Botones para subir y bajar en Blogger # - Botones para subir y bajar en Blogger
Insertar una página externa en una entrada en Blogger # - Insertar una página externa en una entrada en Blogger
Ocultar entradas con determinada etiqueta en el inicio de Blogger # - Ocultar entradas con determinada etiqueta en el inicio de Blogger