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

enero 01, 2015


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 ♥






Te encantará:

32 pensamientos ¡falta el tuyo! ;)

  1. Muchas gracias por el tutorial Celia ¡ha quedado genial en mi blog! Feliz Año Nuevo

    ResponderEliminar
    Respuestas
    1. ¡Que bien! Me alegro mucho, guapa :D

      ¡¡Feliz año!! ^^

      Eliminar
  2. Ostras, qué casualidad, ¡¡¡es justo lo que estaba buscando ahora mismo!!! ¡Me has salvado, muchas gracias!

    Aunque tengo un par de dudas:

    - Lo primero, ¿se puede poner hacia la derecha en lugar de centrado? No sé, cambiando "center" por "right" o algo así...

    - Lo segundo, yo tengo los comentarios puestos debajo del título, a la izquierda. Al poner también la fecha, podrían pisarse o afectar en algo?

    De nuevo muchas gracias por tu atención.

    ResponderEliminar
    Respuestas
    1. ¡Hola guapa!

      Claro, cambia center por la alineación que prefieras y listo. Si lo quieres a la derecha: right.

      Respecto al tema de los comentarios, no puedo decirte, si van en contenedores (div) diferentes no tendían porqué solaparse, pero tendrías que probar usando la Vista Previa o haciendo copia de seguridad antes de guardar los cambios ;)

      ¡Gracias a ti! Feliz finde :)

      Eliminar
  3. Hola Celia yo no encuentro esos códigos en mi plantilla.
    Los busco con Control +F pero no se señalan.
    Los he buscado directamente yo, pero tampoco coinciden al 100%. No se.
    Voy a releerlo.

    ResponderEliminar
    Respuestas
    1. Hola Marisol!

      He buscado tu blog (recuerda que si no me dejas el enlace y tu perfil es de Google Plus me es complicado encontrarlo...) y yo si que lo he encontrado, inténtalo otra vez porque si que aparece. Sino estuviese tu blog no tendría la fecha en ningún sitio jejeje

      ¡Ya me cuentas!

      Feliz domingo ;)

      Eliminar
  4. Upss, La verdad que no pensé que me fueras a revisar el blog, siento no haber puesto el enlace. Muchísimas gracias por tomarte la molestia wapa, y tambien por tu calendario del 2015.
    Son superpracticos estos de casillero, a mi me encantan para anotar cosillas.
    Finalmente conseguí poner la fecha debajo del título. Biennn!!
    Un besote.

    ResponderEliminar
  5. Hola guapi! Estoy siguiendo tu tutorial para poner la fecha pero nada, que no hay manera, o me desaparece o no se me cambia, yo ya no se que hacer y me veo letritas por todos lados >_<

    Gracias por los tutos, me sirven mogollón!!

    http://nyaaa-pink.blogspot.com <- te dejo la dirección para que le eches un vistacillo

    ResponderEliminar
    Respuestas
    1. ¡Hola guapa!

      No he podido visitar tu blog, me dice que se ha eliminado :(

      Eliminar
    2. Ya está solucionado, gracias guapi!

      Eliminar
  6. Hola!! Lo he intentado mil veces y sigue sin salirme bien. Encuentro los códigos y tú te explicas genial (o al menos eres a la que mejor entiendo), pero lo único que he logrado es que la fecha desaparezca >.<
    Quiero poner la fecha justo debajo del título, centrada y todo, y con una línea de separación, pero no sé lo que estoy haciendo mal. ¿Tú te haces alguna idea de qué puede ser?
    Gracias!

    ResponderEliminar
    Respuestas
    1. ¡Hola Teresa!

      ¿Te has asegurado de seguir correctamente el paso 2?

      Revisa que estés trabajando realmente con el SEGUNDO, no con el primero que encontrarás en tu plantilla :)

      ¡Ya me dices si era eso!

      Feliz semana ^^

      Eliminar
    2. Hola! Vale, ya he conseguido centrar la fecha, cambiarle el tipo de letra y poner la línea; pero sigo sin poder ponerla debajo del título >.<
      he pensado que igual la dejo encima, pero entonces me gustaría saber si se puede cambiar la línea de lugar. En vez de ponerla encima de la fecha, ponerla debajo.
      Un beso!

      Eliminar
    3. ¡Hola guapa!

      Que raro... para que te aparezca debajo tienes que cortar el código del paso uno, buscar el que vemos en el paso dos (que te aparecerá varias veces, asegúrate de que sea el correcto), cortar lo que te he marcado en amarillo y sustituirlo por el código de antes, el que movemos de lugar... Y debería aparecer debajo :(

      Respecto a la línea, para ponerla debajo tienes que cambiar el margin-top y el border-top por margin-bottom y border-bottom. Y después modificar el número de píxeles para que se ajuste a la idea que tienes :)

      ¡¡Besos!!

      Eliminar
  7. Hola Celia mi lo que me pasa es que en mi blog no aparece la fecha al principio de la entrada, aparece al final, como podría colocarla arriba.
    Felicidades por el blog es un pozo de conocimientos me encanta!!!, me quedo para seguir todas tus entradas.
    Besos

    ResponderEliminar
    Respuestas
    1. ¡Hola, Cristina!

      ¿Qué plantilla usas? Yo trabajo con la sencilla. si la fecha te aparece en otro lugar supongo que tienes instalada otra plantilla... así que no sabría decirte, tendría que mirar el código.

      Si te animas a cambiar a la sencilla, aquí encontrarás muchos tutoriales para ponerla bien bonita :)

      ¡Besos y muchas gracias!

      Eliminar
  8. Hola Celia,

    Yo he conseguido hacer todo, excepto que desaparezca la fecha donde me aparecía antes.

    Te dejo link a mi blog para que le eches un vistazo: www.alrededordeana.com

    ResponderEliminar
    Respuestas
    1. ¡Hola, Ana!

      Veo que ya lo has conseguido ¡que bien! :D

      Perdona el graaan retraso, voy fatal de tiempo, el enano me tiene hipotecada :)

      ¡Besos!

      Eliminar
  9. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  10. Hola Celia, no he conseguido que aparezca debajo del título del post, simplemente me ha desaparecido.
    He comprobado que sea en el segundo código y todo esté correcto, pero algo falla.

    Cuando puedas, por favor, me lo revisas?
    Muchas gracias.

    http://josenoriega-arquitectotecnico.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. ¡Hola, Jose!

      Fíjate que hayas pegado el código en el lugar exacto del tutorial.

      Si lo repasas, verás que en el apartado de mover la fecha, en el punto 2, os comento que podemos encontrar dos veces el código, a nosotros nos interesa el que aparece en la imagen. Si lo ponemos en el otro, la fecha desaparece ;)

      ¡Feliz tarde!

      Eliminar
  11. Acabo de seguir tus instrucciones (muy claras, por cierto) y me ha salido!! Además he modificado el color de la línea y me gusta como queda ^^ Aquí está mi blog para verlo: http://rubibeauty.blogspot.com
    Llevaba tiempo queriendo hacerlo y hoy por fin he encontrado un tutorial que me ha convencido para intentarlo. Tienes una nueva suscriptora por aquí =)

    ResponderEliminar
    Respuestas
    1. ¡Que bien, Rubi! Queda genial :)

      Por cierto ¡me encantan los iconos de tus redes sociales! ♥

      ¡Gracias y feliz tarde! ;)

      Eliminar
  12. Hola! Antes que nada muchísimas gracias por todos tus tutoriales. Están demasiado geniales.
    Me salido la fecha por debajo. Pero me sale la misma fecha arriba del titulo también. O sea, tengo una arriba y una abajo. No sé por que.
    Lo único que le hice antes de eso, fue centrar y ponerle otro tipo de letra.
    Saludos y gracias!

    ResponderEliminar
  13. Hola Celia, Cómo está? Espero que muy bien.
    Sabes estoy creando un nuevo blog y estoy diseñando el tema, pero me ha surgido un problema con la fecha. He seguido el paso a paso para centrar la fecha bajo el título de los post y me ha resultado, pero el problema que tengo es que ahora veo dos fechas de los post, el que he centrado y el que está sobre los post a la izquierda, que imagino es el original. Supongo que es porque debo eliminar algún fragmento de código que está duplicado, pero no logró dar con el. Me podrías ayudar, por favor. Por el momento tengo el Blog privado, pero lo dejare publico unos días esperando que me puedas responder, en la medida de tu tiempo disponible.
    De antemano muchísimas gracias!!

    María Angleica
    contacto@tallerdepapel.net

    ResponderEliminar
  14. ¡Que genial tuto! Muchas gracias:3
    Pero... ¿cómo puedo poner la fecha hacia la derecha?

    ResponderEliminar
  15. Hola, muchas gracias por el post, me ha servido de mucha ayuda. Pero una duda, ¿como crear mas espacio entre la fecha y el texto de la entrada?
    Un saludo

    ResponderEliminar
  16. Como puedo acortar la linea entre titulo y fecha?? no doy con el codigo... para hacerlo
    gracias!!!!!

    ResponderEliminar
  17. Hola! me ha servido mucho tu tutorial, aunque solo he logrado centrar la fecha, ya que cuando apreto control+f y busco nunca, nunca jamás, me encuentra las cosas en el código html, asi que lo tengo que buscar manualmente, a lo mejor tu sabrás por que me pasa eso?

    ResponderEliminar
  18. Hola, muchísimas gracias por el tutorial, por algún casual no sabrás poner la fecha encima del títlo?
    Gracias ^^

    ResponderEliminar
  19. Gracias por el tuto! fue de mucha ayuda :D

    ResponderEliminar



¡Anímate a comentar! ♥Tu opinión es muy importante para mí♥



El Perro de Papel es una Marca propiedad de Celia Espada García debidamente registrada en la OEPM, Modalidad M, Número 3527002 (0). Todos los recursos creados por Celia Espada García están correctamente protegidos y vinculados a la autora y no pueden usarse sin consentimiento previo.

Safe Creative #1408270134965
Los derechos de autor y propiedad intelectual del material compartido, tanto gratuitamente como de pago, en esta web y sus redes sociales pertenecen a "El Perro de Papel", exceptuando las referencias a otros creadores, los cuales están debidamente citados en los créditos.