Blogger

Ξ 1 comentario

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

por Hina Palitah
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?

 

Materiales

 

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

 

1

 

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

 

2

 

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

 

3

 

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.

 

4

 

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

 

5

 

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!

 

6

 

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

 

Final

 

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:

 

Sello de GarantÍa CLH

 

¡Hasta la próxima!

Comparte este tutorial

El culpable de todo esto

Una vida de grandes ideas ha rodeado a Hina Palitah. Desde una temprana edad (por ahí por 10 años bajo cero) se ha dedicado a la invención de discutidas y resistidas ideas, las cuales a pesar de su éxito, no lograron traerle la fama y reconocimiento que merecía. Hasta que un día, cuando la oportunidad tocó su puerta, decidió irse de un concurso de nudos antes de presentar su mejor nudo, al darse cuenta que la idolatría y fortuna no era lo que perseguía. Finalmente, gracias a un exitoso negocio de zapatos de papel, fue reclutada por Topher, quien buscaba hacer algunas adquisiciones, para incorporar su visión y grandes ideas al equipo. Hoy llega renovada y en busca de venganza, ¿contra quién?, no sabemos.

En los barrios marginales se le conoce como: Hina Palitah

Comentarios en Facebook

1 Comentario

  • Gracias!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!, funcionó perfecto.



Deja un comentario

Ingresa con tu cuenta de Cómo Lo Hago

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Gente linda que nos quiere

Donde mas estamos