Cómo disminuir la separación entre los gadgets de Blogger

Continuando con nuestros tutoriales de Blogger, hoy les traemos un truco para personalizar y dejar aún mejor su sitio. Basta de lidiar con las plantillas y sus formatos preestablecidos, modificaremos la separación de nuestros gadgets manualmente.

Como siempre toda la información después del salto.

¿Qué necesito?

• Un Blog creado en Blogger
• Al menos 2 Gadgets insertados en el blog

¿Cómo lo Hago?

1.- Ingresamos al menú de Blogger y hacemos clic en la opción Diseño. Aquí aparecerá el menú donde vemos el esqueleto de nuestro blog.

2.- Vamos al menú donde están agregados nuestros gadgets y ubicamos el cursor encima de la palabra Editar sin darle clic. Aparecerá abajo una dirección muy larga de la cual sacaremos el nombre real de nuestro gadget, el cual debemos anotar.

El nombre siempre lo encontramos luego de la palabra widgetId= En este caso nuestro primer gadget se llama Image1

* Es muy importante tener en cuenta que este proceso se realiza siempre tomando en consideración el gadget que se encuentra arriba por lo que veremos que las cosas se acercarán a él, pero este no se moverá.

Este proceso debe hacerse uno por uno, con cada gadget que tengamos en nuestro blog.

3.- Ahora volvemos al menú principal y nos dirigimos a la opción Plantilla. Dentro de esta, hacemos clic en Personalizar.

4.- Luego de esto aparecerá una nueva pantalla, dentro de esta nos dirigiremos a la opción Avanzado y en el sub menú hacemos clic en Añadir CCS. A la derecha nos aparecerá una pantalla en blanco y nuestro blog bajo ella.

5.- Dentro del recuadro blanco que tenemos a la derecha del menú pegaremos el siguiente código:

#NombreDeNuestroGadget {
    margin-bottom: -10px !important;
}

La parte del código que se encuentra en negrita debemos cambiarla por el nombre del gadget que obtuvimos en el paso 2, que en nuestro caso era Image1. Entonces nuestro código quedará así:

#Image1 {
    margin-bottom: -10px !important;
}

*Debemos tener presente que el número que aparece en el código corresponde a la separación que tendremos entre nuestros gadgets, por lo que podemos modificarlo a gusto.

Un número más grande significará menos separación, mientras uno más pequeño aumentará la distancia, eso es debido a que trabajamos con un número negativo.*

Generalmente entre -10 y -20 pixeles es la separación ideal para los gadgets en los blogs.

6.- Una vez que estamos conformes con la distancia entre nuestros gadgets, hacemos click en el botón Aplicar al Blog y ¡Listo!

* Si queremos ajustar cualquier otro gadget debemos repetir el tutorial y agregar un código independiente para cada elemento del blog.

Cualquier duda, consulta o apretón de manos, déjalo más abajo en los comentarios.

Les recordamos que este tutorial ha sido desarrollado y documentado por el equipo de Cómo Lo Hago, por lo que cuenta con nuestro sello de garantía:

¡Hasta la próxima!