Cómo reducir el espacio entre los gadgets

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).

Yo misma no lo he hecho, porque ya se sabe que en casa del herrero... pero sí que lo he hecho por ejemplo en el blog Oh pero esto se come, ya que no sé por qué, en unos diseños (supongo que por el modelo de títulos) se ve incluso más que en otros. 

Por si alguien no entiende bien de lo que hablo, me refiero a esto. Fijaos como en el ejemplo de arriba hay más espacio entre los títulos y sus respectivos gadgets:

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í. 

Voy a hacerlo yo con uno. 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.

Este es el primer pasito:

Y este el segundo:

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.

Yo, poniendo esos dos códigos en mi cajita de Añadir CSS, consigo esto:

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

Las que estáis haciendo el Curso Dos, si veis que queréis ajustar el hueco que os queda encima de vuestra barra de pestañas personalizada, podéis usar este sistema para reducirlo o agrandarlo.

Yo lo hice así en este blog de prueba, que me quedaba mucho hueco entre la barrita de páginas y la presentación de fotos con diapositivas.

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!

Besos,

P.D. Y hablando de esto, alguna quiere aprender a poner en su blog una barra de páginas/pestañas personalizada o una presentación de fotos (es estupendo para blogs de repostería, manualidades, moda... y en definitiva de cosas con fotos bonitas), puede comprar el Curso Dos pinchando aquí.

En él vais a aprender muchiiiiiiiiiiiiiiiiiiisimas cosas. Pensad que esas dos cosas son sólo 18 páginas... ¡de 221!

Creedme, ese curso es una mina (y esto no lo digo yo, sino que ya me lo ha dicho la gente que lo ha comprado). Por supuesto, es tan fácil de entender y ameno como todos mis cursos y tutoriales, y a un precio que da la risa :)

P.D #2. Yo de vosotras no me perdería por nada del mundo el post de mañana... ;)