Cómo reducir el espacio entre los gadgets de blogger

Estas dos últimas semanas tres personas me han preguntado la misma cosa, y me ha hecho gracia, porque hasta ahora nadie me la había preguntado... Cómo reducir el espacio que queda entre los gadgets (sobre todo al poner el título a algo).

Entonces, no es nada difícil, pero vais a tener que poner antención. Eso sí, antes de nada, tenéis que aprender dónde mirar el nombre de vuestros gadgets (ID se llama). Es muy fácil.

Cuando estamos en Diseño, tenemos que pasar por encima de donde dice Editar del gadget en sí. 

Abajo a la izquierda saldrá una línea informativa y se cargará en dos pasos. Pimero un poco, y luego el resto. Hay que dejar que se cargue por completo o no lo veremos.

Esta es una captura general del página:

Y este es el detalle de la linea inferior:

Fijaos que se llama Image5:

Si es un gadget Imagen, como en este caso, siempre será Image y un número. 

Y ahora, teniendo esto claro, empezamos.

Como reducir el espacio entre los gadgets

Paso 1. Pensar qué gadgets queremos juntar.

Es decir, esto que vamos a ver se hace uno a uno, juntando un gadget al gadget de justo debajo. Va a ser un código detrás de otro.

Digamos que el código que ponemos arriba del todo es Image 5, bueno, pues nos juntará ese al siguiente. Y así.

Entonces esta es mi columna de gadgets (para el tutorial, no es la de mi blog)

Pero no quiero juntar todo a todo o quedará un batiburrillo.

Quiero:

a) Juntar Buscar a su cuadrito de búsqueda.

b) Dejar espacio entre el cuadrito y Suscríbete.

c) Juntar Suscríbete a su cuadrito para poner el email.

Paso 2. Vamos a añadir CSS

Y el código que necesitamos será:

#Image5{ 

margin-bottom: -20px !important; 

}

Pensad que donde dice Image5 tendrá que ir cada vez el código del gadget de arriba, es decir, el que queremos juntar al siguiente.

Y que el -20 lo podemos cambiar por lo que quieras. Son los píxeles que de espacio que dejamos.

Como es un número negativo, un -5 dejará bastante espacio y un -50 lo juntará muchísimo.

De todos modos -20 es una medida que más o menos os quedará bien.

Entonces, con ese código he juntado mi primer gadget (Image5 – Imagen Buscar) al siguiente (su cuadrito de búsqueda)

Doy un par de intros, y pongo:

#Image3{ 

margin-bottom: -20px !important; 

}

¿Por qué? Porque Image3 es el gadget Imagen con la imagen de Sucríbete, y ya hemos visto antes en el paso  c)  que no quería espacio entre el cuadrito de búsqueda y el siguiente…

Y así uno a uno. 

Además esto, por supuesto, lo podéis hacer con todos los gadgets que queráis, y no sólo de la columna. 

Por supuesto también podría haberlo usado para ajustar el espacio entre la cabecera y las diapositivas, pero me parecía que así quedaba bien.

En este caso, los dos (tanto la presentación como la barrita), ya sabéis que son gadgets HTML, así que su ID será HTML y un número...

Siempre el ID será aquello de lo que sea el gadget y luego su número correspondiente :)

¡Espero que os sea útil!

Fuente: http://personalizaciondeblogs.blogspot.com.ar/2013/03/como-reducir-el-espacio-entre-gadgets.html