Cómo poner la fecha debajo del título en Blogger

Si has visitado mi página de Cursos para Bloggers puede que te hayas fijado en la posición de la fecha de las entadas del blog, centrada debajo del título. Me han llegado varios emails preguntándome una manera sencilla de mover la fecha en Blogger... Y bueno, no sé si será la más sencilla de todas, pero es la que he usado yo y puedo asegurarte que funciona.

Mover la fecha debajo del título

1.- Abrimos nuestra plantilla HTML, pinchamos dentro de ella con el ratón y abrimos el buscador interno de blogger pulsando Control + F.

Buscamos:

b:if cond='data:post.dateHeader'

Encontraremos:

  <div class='date-outer'>
    <b:if cond='data:post.dateHeader'>
      <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
    </b:if>
    <div class='date-posts'>

Cortamos las tres líneas de código que te he marcado en amarillo y las pegamos en un lugar seguro ya que solo vamos a cambiarlo de lugar.


2.- Ahora buscamos:

 <div class='post-header'>

Encontraremos dos, a nosotros nos interesa el segundo:

 </h3>
          </b:if>

          <div class='post-header'>
            <div class='post-header-line-1'/>
          </div>





3.- Una vez localizado el código exacto, recuperamos el primer código que teníamos guardado y lo pegamos entre  </h3> y </b:if>. Así:

</h3>
<b:if cond='data:post.dateHeader'>
   <div align='center'><h2 class='date-header'><span><data:post.dateHeader/></span></h2></div>
</b:if>
    </b:if>

La parte del código que te he marcado en azul sirve para centrarla. Si la prefieres alineada a la izquierda, solo tienes que eliminar esos dos fragmentos de tu código final.

Y comprobamos los cambios en Vista Previa.

Como ves, aparece con el formato por defecto de la fecha de Blogger. Puedes personalizarla directamente desde el Diseñador de Plantillas o, como hago yo, desde tu plantilla HTML haciendo algunos cambios en el código que da estilo a la fecha.

Personalizar la Fecha en Blogger

1.- Dentro de nuestra plantilla HTML buscamos:

.date-header span {


Si nunca has personalizado tu fecha directamente desde tu plantilla HTML, encontrarás:

.date-header span {
  background-color: $(date.header.background.color);
  color: $(date.header.color);
  padding: $(date.header.padding);
  letter-spacing: $(date.header.letterspacing);
  margin: $(date.header.margin);
}

Tu código de fecha lleno de variables ($) que es lo que hace que pueda modificarse desde el Diseñador de Plantillas sin necesidad de saber nada de programación.

2.- Vamos a desglosar el código y a eliminar las variables para optimizarlo:

Corta todo el código anterior y pega en su lugar el siguiente:

.date-header span {
background-color: #ffffff;
font: normal bold 14px Open Sans;
color: #8FE1D8;
padding: inherit;
letter-spacing: 0px;
margin: inherit;
text-transform: uppercase;
}

Puedes personalizar:

background-color: color de fondo.
font: el tipo de letra.
color: el color de la letra.
text-tranform: yo la he puesto en mayúsculas. Si la quieres normal puedes eliminar esta parte del código.

Puedes elegir el color HTML desde esta web:

Colores HTML


Con este sencillo cambio si pinchamos en Vista Previa vemos:

3.- Vamos a personalizarla un poco más. Para ello, debajo del código anterior añadimos:

h2.date-header{
text-align: center;
line-height:0;
margin-top: 15px !important;
}

Así:

/* Posts

----------------------------------------------- */

.date-header span {

background-color: #ffffff;

font: normal bold 14px Open Sans;

color: #8FE1D8;

padding: inherit;

letter-spacing: 0px;

margin: inherit;

text-transform: uppercase;

}

h2.date-header{

text-align: center;

line-height:0;

margin-top: 15px !important;

}

Añadiendo el código margin-top lo que hacemos es aumentar el espacio superior de nuestra fecha, para que no quede tan pegada al título de la entrada.

Otro detalle que podemos añadir es una línea superior, separando el título de la entrada de nuestra fecha:

h2.date-header{

text-align: center;

line-height:0;

margin-top: 15px !important;

border-top: 1px solid #000000;

}

Donde puedes añadir el código de color que prefieras.

Pero queda demasiado pegada a la fecha, así que vamos a ampliar ese espacio:

h2.date-header{
text-align: center;
line-height:0;
margin-top: 15px !important;
border-top: 1px solid #000000;
padding-top: 10px !important;
}

Puedes aumentar o reducir el número de px hasta que quede el espacio que quieras.

¡Y ya tenemos nuestra fecha lista y colocada debajo de los títulos de nuestras entradas! No ha sido tan complicado ¿verdad? 

¡Si te animas a hacerlo, déjame el enlace a tu blog en comentarios para verlo!

---

Suscríbete a mis entradas por email ¡para no perderte nada!





♥ Las recibirás en tu bandeja de entrada el mismo día que sean publicadas ♥