-->
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
Insertar Infolinks en Blogger # - Insertar Infolinks en Blogger
Sección de banners en cada entrada en Blogger # - Sección de banners en cada entrada en Blogger
Habilitar los nuevos comentarios de Google+ en plantillas modificadas de Blogger # - Habilitar los nuevos comentarios de Google+ en plantillas modificadas de Blogger
Estructura básica de una plantilla HTML5 # - Estructura básica de una plantilla HTML5
Mejora la caja de comentarios en Blogger con Disqus # - Mejora la caja de comentarios en Blogger con Disqus