Aumentar el espacio entre el título del post y el contenido (Tutorial)

¡Buenas! Igual ya os habéis fijado en que he cambiado un poquillo los colores y el diseño del blog... y como todo no-experto me he topado con algún problemilla: La semana pasada me pegué un buen rato para conseguir tener más separado el título de los post de lo que es la propia publicación.

Digamos que "por defecto", Blogger establece unos determinados píxeles de distancia, y a veces según el tipo de letra que utilicemos puede quedar todo muy apretujado.
Eso me pasó a mí. Lo veía todo apelotonado y no me gustaba nada de nada... Y por mucho que busqué en la web un tutorial sobre como hacerlo, no di con ninguno que funcionara.

Al final conseguí encontrar por el código HTML que tanto miedo nos da a todas las aventureras, los parámetros que hay que modificar para que nuestro título del post se separe más del contenido. Es algo muy sencillito y me hace mucha ilusión enseñároslo. ¡Así que ahí va mi primer tutorial!


Bien, pues lo que hay que hacer es muy fácil. Nos vamos al código HTML del blog (Plantilla - Editar HTML) y en el buscador interno (clic en cualquier parte del código y pulsar Ctrl + F) escribimos .post-header. Nos tendrá que salir algo así:



Lo que tenemos que modificar es lo de "margin: 0 0 1em". Cambiamos el 1 por el valor que queramos; cuanto más grande sea el número, más espacio quedará. Yo he puesto 3.3, que es un espacio suficiente para que se diferencie la entrada del titulo y no queden demasiado separados.


Cuando hayamos puesto la cifra que queramos solo tenemos que darle a "Guardar plantilla" y voilà.

Hasta aquí mi post de hoy. ¿A qué no es tan difícil? Si no os sale o tenéis alguna duda no dudéis en mandarme un correo o dejar un comentario, os responderé lo antes posible (:
¡Buena semana!

Post relacionados

10 Comentarios

  1. ¡Hola! Pásate por mi blog, te he nominado al premio "Conóceme" :)

    Besitos! ^^,

    ResponderEliminar
  2. Muchas gracias por pasarte por mi blog, no conocia el tuyo y creo que me voy a quedar me encanta este tuto y todo lo que tenga que ver con el diseño y trastear el html. Asi que por aqui me quedo. ;)

    ResponderEliminar
    Respuestas
    1. Gracias a ti por pasarte por mi rinconcito ^^ Un beso :*

      Eliminar
  3. Hola!

    Te comparto un recurso muy útil para entender el tema del CSS mejor:
    http://www.w3schools.com/css/css_margin.asp -> explican qué significa cada numerito de la propiedad "margin"
    y es más, por si te pica la curiosidad, puedes saber qué significan los "em" aquí: http://www.w3schools.com/cssref/css_units.asp

    Un saludo!

    P.D.: Dibujas unos animalicos monísimos *_*

    ResponderEliminar
    Respuestas
    1. Uyyyy muchísísímas gracias por la info! Ahora iré a echar un vistazo :D

      Eliminar
  4. Anónimo4/3/14

    Elena gracias por compartir este tuto, ya lo he puesto en práctica ;) pásate por mi blog que te he nominado a un premio que espero te guste.
    Besitossss

    ...... por cierto tu gatito es una monada!!!!!

    http://craftandcharm.blogspot.com.es/2014/03/premios-conoceme-y-liebster-award-que.html

    ResponderEliminar
    Respuestas
    1. Me alegro de que te haya servido!!
      Millones de gracias por pensar en mí y darme el premio!! Ahora me paso a echar un vistazo por tu blog (;

      Eliminar
  5. Los títulos de mis posts no tienen la letra muy grande, creo que por eso no lo veo apretujado. Pero si algún día quiero personalizar el tamaño de ese espacio ahora ya sé ;)
    El blog te está quedando cada día más mono!

    Besotes!

    ResponderEliminar
    Respuestas
    1. Ya, si normalmente muy apretujado no suele quedar. A no ser que hagas cosas raras jaja
      Muchas gracias!!! *-*
      Un besazo! :*

      Eliminar

Gracias por emplear al menos tres segundos de tu vida por aquí.
Me encanta leer vuestros comentarios *-*