Personaliza la fecha de tus entradas con Javascript y CSS

En este artículo veremos 2 métodos para personalizar las fechas con CSS3 y Javascript, ya que hace algún tiempo atrás vimos una forma para hacerlo y algunos usuarios han tenido problemas para incrustar el script correctamente en sus plantillas ya que quedaba un contenedor vacío, no se ejecutaba correctamente la función o había un problema con la etiqueta que se utilizaba.

Para evitar este problema, he creado 2 scripts, si el primero fallara en sus plantillas, pueden recurrir al segundo.



Primer método: Mediante data:post.dateHeader:

La etiqueta <data:post.dateHeader /> es la que se encarga de mostrar la fecha en las entradas de tu blog, genéricamente debería funcionar en cualquier plantilla pero como toda regla tiene una excepción, hay algunas que se niegan a funcionar con esta etiqueta.


Para hacer funcionar este método, primero busca la siguiente línea en tu plantilla (Con los artilugios expandidos):

<data.post.body/>

Arriba de ésta pega el siguiente código:

<script type="text/javascript">
// Script creado por Víctor Calderón Para Ayuda Bloggers - Opción para data:post.dateHeader
function dividir_fecha()
{
var fecha_completa="<data:post.dateHeader/>"; // Formato original de la fecha
var nueva_fecha=fecha_completa.split(" "); // Dividir la var con .split
dia = nueva_fecha[0];
mes = nueva_fecha[1];
año = nueva_fecha[2];
document.write("<span class=\"dia\">" + dia + "</span>" // Devuelve esto, con mes hasta 3 carácteres únicamente
+ "<span class=\"mes\">" + mes.slice(0,3) + "</span>" + "<span class=\"año\">" + año + "</span>"
);

}
</script>

<div class="fecha-ayudabloggers">
<script>dividir_fecha()</script>
</div>

Posteriormente vas a "Configuración | Idioma y Formato", y en "Formato de cabecera de fecha" estableces el siguiente:

13 Noviembre 2012

Si este método no funciona, suprime el código anterior y prueba con el método siguiente.

Segundo método: Mediante data:post.timestamp:

La etiqueta <data:post.timestamp/> es aquella que muestra la hora en alguna determinada sección de la entrada. Con saber la hora no podemos hacer nada, pero podemos aprovechar una de las opciones que se encuentran en el apartado Formato de hora:



Deberás elegir la que tiene este formato:

martes, noviembre 13, 2012

Una vez que ya seleccionamos esta opción, pegaremos el siguiente script en la misma sección que el anterior:

<script type="text/javascript">
// Script creado por Víctor Calderón Para Ayuda Bloggers - Opción para data:post.timestamp
function dividir_fecha()
{
var fecha_completa="<data:post.timestamp/>"; // Formato original de la fecha
var nueva_fecha=fecha_completa.split(","); // Dividir la var con .split
var mes = nueva_fecha[1];
var año = nueva_fecha[2];
var dia_nuevo = mes.split(" "); // El día y mes se encuentran juntos, para poder obtener sólamente el día se requiere este fix
var dia = dia_nuevo[2];

document.write("<span class=\"dia\">" + dia + "</span>" // Devuelve esto
+ "<span class=\"mes\">" + mes.slice(1,4) + "</span>" + "<span class=\"año\">" + año.slice(1,5) + "</span>" // Los .slice son para eliminar el espacio y en el caso del mes para limitarlo a 3 carácteres
);
}


</script>

<div class="fecha-ayudabloggers">
<script>dividir_fecha()</script>
</div>

Previsualizamos si la fecha nos aparece correctamente en cada post, y si es correcto podemos guardar la plantilla.

Nota:

Si aparece un error de síntaxis al intentar previsualizar o guardar la plantilla deberás parsear el código que se encuentra al final del script (Toda la sección de document.write).

Personalizando las fechas:

El resultado de ambos scripts es el siguiente:

<div class="fecha-ayudabloggers"> 
<span class="dia">13</span>
<span class="mes">Nov</span>
<span class="año">2012</span>
</div> 

Si nosotros lo previsualizamos, veremos el siguiente resultado:


Para poder aplicar atributos usaremos los selectores ya establecidos en las clases, tanto del <div>, como de los subelementos:

.fecha-ayudabloggers {
/*Atributos del contenedor de la fecha*/
}

.dia {
/*Atributos del día*/
}

.mes {
/*Atributos del mes*/
}

.año {
/*Atributos del año*/
}

Puedes jugar con los márgenes, tamaños distintos de fuentes, flotación y todos los atributos que estimes necesarios. Para que puedas tener una idea de lo que puedes hacer, adjunto 2 ejemplos con sus atributos respectivos:


Ejemplo 1 (Basado en: WpLover - Easier Date Display Technique with CSS3):





Código CSS:

.fecha-ayudabloggers {
  position: relative;
  width: 81px;
  font-family: Georgia, serif;
  color: #777;
  float:left;
  height: 60px;
 }
 
.dia, .mes, .año {
  position: absolute;
  }
 
.dia { 
  font-size: 39px;
  bottom: -8px;
  }
 
.mes { 
  top: 0;
  left: 0;  
  font-size: 26px;
  }
 
.año{ 
  top: 16px;
  right: 0;
  font-size: 25px;
  rotation: -90deg !important;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);  
  }

Ejemplo 2 (Basado en: Line25 - How To Create a Cool Blog Post Date Icon with CSS):




Código CSS:

.fecha-ayudabloggers {
float:left;
position:relative;
width: 65px; height: 80px;
background: #fcfcfc; 
background: linear-gradient(top, #fcfcfc 0%,#dad8d8 100%); 
background: -moz-linear-gradient(top, #fcfcfc 0%, #dad8d8 100%); 
background: -webkit-linear-gradient(top, #fcfcfc 0%,#dad8d8 100%); 
border: 1px solid #d2d2d2;
border-radius: 10px;
box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
text-align:center;
margin: 0 10px 0 0;
}
 
.dia, .mes, .año {
display:block;
padding:0;
margin:0;
}
 
.dia { 
font-size:40px;
padding:10px 0 0 0;
}
 
.mes { 
background: #d10000; 
background: linear-gradient(top, #d10000 0%, #7a0909 100%);
background: -moz-linear-gradient(top, #d10000 0%, #7a0909 100%);
background: -webkit-linear-gradient(top, #d10000 0%, #7a0909 100%);
font-size: 25px; 
font-weight: bold; 
color: #fff; 
text-transform: uppercase;  
display: block;
border-top: 3px solid #a13838;
border-radius: 0 0 10px 10px;
padding: 2px 0;
}
 
.año{ 
background: #d10000; 
background: linear-gradient(top, #d10000 0%, #7a0909 100%);
background: -moz-linear-gradient(top, #d10000 0%, #7a0909 100%);
background: -webkit-linear-gradient(top, #d10000 0%, #7a0909 100%);
color:#fff;
border-bottom: 1px solid #a13838;
font-size:11px;
text-align:right;
position:absolute;
top:0;
width:94%;
max-width:94%;
border-radius: 10px 10px 0 0;
padding:0 5px 0 0;
}

Notas Importantes:

• El script no puede ir en el </head>, ya que las etiquetas <data> requieren una cierta ubicación para poder funcionar.
• Los atributos deben ir antes de  ]]></b:skin>
• Si en las páginas estáticas se ve el contenedor, puedes usar condicionales y encerrar todo el código con el siguiente:

<b:if cond='data:blog.pageType != "static_page"'> 
<!-- Inserta acá el código del script --> 
</b:if>