22 ene 2015

[Tutorial] Reducir o aumentar espacio entre cabecera y cuerpo [100% MÍO!]

Hii! Hoy hare un tutoria sobre como poner o quitar margen o espacio entre la cabecera y la entrada, o de la cabecera y un gadget (o de gadget a gadget)! Para que lo entendáis mejor os enseñare una captura donde he utilizado uno de los códigos:
Como vereis en la imagen, la imagen esta pegada a la entrada! Esa imagen la he puesto con el gadget HTML/Javascript y como quedaba mucho espació entre ese gadget y las entradas, pues he reducido ese espació con el código que os enseñare hoy :D Entendéis~?
Aquí os dejo los códigos con su tutorial de como ponerlo ^^

~ELIMINAR ESPACIO ENTRE CABECERA Y ENTRADAS~
1. Primero vamos a Plantilla > Editar HTML
2. Buscamos .main-inner .columns { una vez que lo tengamos, pegamos debajo este código:
margin-top: -35px;
Cuanto mas grande sea el numero (-35px) mayor sera el espacio que te quitara. Y si lo que queremos es más espacio, ponemos lo mismo pero sin el -
margin-top: 35px;
3. Al tenerlo! Miramos en Vista Previa que se vea como queríamos y Guardamos! ^^

~ELIMINAR ESPACIO DE GADGET A GADGET O ENTRADA~
1. Vamos a Plantilla > Editar HTML y buscamos el código del gadget en cuestión: lo encontraras buscando el título que le hayas puesto al gadget! (Ctrl + F) Encontraras algo similar a esto pero seguramente con otro nombre:
<b:widget id='HTML1' locked='false' title=‘Cabecera’ type='HTML'>
Cabecera: Este es el titulo que le he puesto al gadget al que quiero reducir el margen que nos pone Blogger.
HTML1: Nombre que le ha puesto el HTML al gadget.

2. Una vez que tenemos el nombre del gadget del HTML (HTML1) vamos a Plantilla > Editar HTML....
Si quieres reducir o aumentar el espació inferior, encima de ]]></b:skin> pegas este código:
#HTML1{margin-bottom: -43px;
}
Si quieres reducir o aumentar el espació superior, en encima de ]]></b:skin> pega:
#HTML1{
margin-top: -43px;
}
3. Al mirar en Vista Previa veras que se ha reducido el espacio! (si no es así vuelve a mirar el nombre del gadget a ver si lo tienes bien o el código en sí). Si quieres reducir más el espació aumenta el numero, y si lo quieres aumentar pon 43px es decir, sin el "menos: -" que teníamos antes!

---------------------------------------------------

Fiiiiin! Cualquier duda me dicen ^^
TUTO 100% MÍO! Si lo ponen en su blog, pongan créditos y avisenme avisenme!

4 comentarios:

  1. Hiiii! Graciias por nominarme :D Cuanto pueda hago la entrada!

    ResponderEliminar
  2. Esto le he estado buscando mucho tiempo, gracias *o*

    ResponderEliminar
  3. Owwww, gracias. Estuve rato buscandolo

    ResponderEliminar
  4. Saludos, me podría indicar como realizó los gadget de la parte derecha de su blog...

    ResponderEliminar