Modifica el aspecto de la fecha de tus posts para impactar a tus lectores

27.8.14

¿Te has fijado que muchos blogs están muy personalizados, pero que hay muy pocos que hayan modificado el aspecto de la fecha? Normalmente la fecha aparece encima del post y simplemente de un color, pero hoy (si quieres, claro) vas a cambiarlo!!

Prepárate para cambiar la cabecera de tus posts. Habrá un antes y un después! :) Y sino...me lo cuentas cuando termines de leer! Te prometo que promete! 

personalizar fecha post


A ver, empecemos por el principio. Primero de todo tienes que escoger el formato de fecha que más te guste y después le cambias el color, el tamaño y lo que haga falta!

Cambiar formato de la fecha del post


Pon el formato de la fecha de la  manera que más te convenga y que quede bien con el estilo de tu blog.
  1. Entra en el menú "Configuración" y seguidamente en "Idioma y formato".


  2. Una vez dentro, puedes modificar el idioma en el que aparecerá la fecha, tu zona horaria (en España es GMT+01:00 Berlín) y el formato de la fecha.


  3. Ahora toca que escojas el formato que tu quieras o que más cómodo te sea. Sólo tienes que clicar la flecha hacia abajo y te aparecerán los tipos de formato de fecha de que dispone Blogger (están todas las maneras posibles de escribir una fecha! Seguro que encuentras la tuya!)

  4. Ya está! No te olvides de guardar la configuración, que sino no sirven de nada los cambios! No te puedes ni imaginar cuántas veces he hecho cambios sin guardarlos!
     
Pues ahora que ya tienes escogido el formato, vamos a mejorar la apariencia de la fecha con un poco de forma y de color. Esto lo haremos con un código que deberás pegar en CSS . ¿Te acuerdas cómo ir? Plantilla --> Personalizar --> Avanzado --> Añadir CSS.


Mejorar el aspecto de la fecha


Te enseño unos ejemplos de cómo puedes hacer más bonita la fecha, pero está claro que lo puedes/debes adaptar a tu gusto. Primero hay siempre el código que tienes que añadir a CSS y luego cómo queda. Al final de todo de los ejemplos te explico qué es cada una de las lineas de código, para que no te líes y te quede todo claro!


 .date-header span {
     color: #333333;
     background-color: #ACFA58;
     font-size: 9px;
     padding:30px 0px 22px 5px;
     border-radius:30px;
 }





 .date-header span {
     color: #333333;
     background-color: #ff6600;
     font-size: 9px;
     padding:30px 0px 22px 5px;
     /*border-radius:30px;*/
 }





  .date-header span {
     color: #ff3399;
     background-color: #ccff99;
     font-size: 9px;
     padding:30px 0px 22px 5px;
     border-radius:15px;
 }





  .date-header span {
     color: #ff3399;
     background-color: #ccff99;
     font-size: 9px;
     padding:12px 0px 11px 5px;
     border-radius:15px;
 }





  .date-header span {
     color: #ff3399;
     background-color: #ccff99;
     font-size: 9px;
     padding:12px 20px 11px 25px;
     border-radius:15px;
 }




No está mal verdad? Sé que hay mucho código HTML, pero de verdad que no tienes que tenerle miedo!  Ahora te explico qué es cada línea de código y para qué sirve.

Antes de empezar a modificar cualquier cosa, debes tener en cuenta que se trata un poco de ir jugando con los números. Depende del tamaño  que tengas de letra (font-size) deberás añadir o quitar píxeles de los bordes.



Te explico un poco más para qué sirve cada trozo de código. Así no tendrás dudas ni dificultades.

  • color --> El el color en qué se escribirá la fecha. Lo tienes que poner en código Hex (hexadecimal). Aquí puedes encontrar una paleta de colores con los códigos correspondientes.
  • background-color --> Es el color del fondo de la fecha. También está en código Hex (hexadecimal).
  • font-size --> Es el tamaño de la letra. Si lo quieres dejar del mismo tamaño que el resto del texto, puedes eliminar esta línea.
  • padding--> Son las medidas en píxeles, de la "caja" donde hay la fecha (el trozo de color). El primer número corresponde a los píxeles que quedan arriba del texto, 
    el segundo a los de la derecha del texto, 
    el tercero a los de abajo del texto y
    el último a los de la izquierda del texto.
    Te quedará un cuadrado o un rectángulo, depende de las medidas que pongas.
  • border-radius --> Si no ponemos esta línea de código, tendremos un cuadrado o un rectángulo. Aquí se redondean los bordes del rectángulo. Si lo hacemos muy grande, al final tendremos una redonda.

Anímate a cambiar el aspecto de tu fecha! No hay muchos blogs que la tengan modificada, y en mi opinión da un toque muy personal! :)


Laura

¿Te ha gustado lo que has leído?
Muchas gracias por compartirlo en tus redes sociales!
Tus contactos y yo te lo agradeceremos! :-)

¿Quieres contenido exclusivo para mejorar tu blog?
Suscríbete y recibirás AHORA la guía para dominar Blogger HOY!
Tu blog no pasará inadvertido.
Dejará huella.