Cómo cambiar la posición del título del post

30.8.14

Ya te avisé la semana pasada que ahora también tendrás un post para leer el sábado a partir de septiembre, pero no me he podido esperar y aquí tienes el primer post finsemanero! :) Será cortito pero productivo.

Después del post del miércoles,  necesitaba redondearlo y darte un consejo más para que la fecha y el título del blog queden de lo más bonito.



Con la fecha bien mona dentro de un círculo o cuadradito, ¿no te gustaría más poner la fecha delante del título del post y no arriba? Es exactamente lo que te enseñaré hoy. No bajaremos la fecha delante del título, sino que subiremos el título al lado de la fecha.

Como muy a menudo, simplemente se trata de pegar un trocito de código en CSS ¿Te acuerdas cómo ir? Plantilla --> Personalizar --> Avanzado --> Añadir CSS. Aquí te dejo el código y luego te explico qué significa.


 
 h3.post-title {
     margin-top: -30px !important;
     margin-bottom: 30px !important;
     margin-left: 110px !important;
  }



Quedaría así


¿Para qué sirve cada línea?

Antes de poner estas líneas de código en CSS, el título estaba debajo de la fecha. Ahora lo que hemos hecho ha sido ponerlo un poco hacia arriba, un poco a la derecha (para que no quede el título encima de la fecha) y lo he separado un poco más del texto inicial del blog, para que no quede todo comprimido. Ten en cuenta que todos los valores son en píxeles.

Tienes que jugar un poco con los números, para cambiar la posición del título.  Depende de la talla de tu fuente y de las medidas de la fecha, deberás poner unos márgenes u otros. Tenlo muy en cuenta. Pero no pasa nada, ya que a medida que vas modificando los valores, lo ves al instante cómo te queda!!

Entonces, tenemos:
  • margin-top --> Es el margen de arriba del título. Cómo lo que quieres es subirlo, tiene que sen valor negativo. Si lo pones en positivo verás que el título se separa cada vez más de la fecha.
  • margin-bottom --> Es el margen de debajo del título. Te sirve para poner más espacio entre el título y el inicio del blog. Si pot lo contrario tu quieres que haga menos espacio, sólo tienes que ponerlo en negativo.
  • margin-left --> Es el margen de la izquierda del título. Tienes que ponerlo de tal manera que el título cuando suba no te quede encima de la fecha.
Ahora sólo te queda hacer algunas pruebas y listo! :) Espero que tengas un buen fin de semana!


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.