Poner separadores en los gadgets

Si usamos bordes tendremos un resultado como este.


Y si usamos imágenes podrá verse más o menos así.

Veremos cómo hacerlo para las plantillas antiguas de Blogger, y las hechas con el Diseñador de plantillas de Blogger. En cualquier de los dos casos entra en Diseño | Edición de HTML y luego...
Para plantillas hechas con el Diseñador de plantillas de Blogger

Si quieres que el separador sea un borde agrega antes de ]]></b:skin> lo siguiente:
.column-right-outer .widget, .column-left-outer .widget {
border-bottom:4px solid #000;

padding-bottom:20px;
}

Si quieres que el separador sea una imagen entonces en lugar de lo anterior agrega esto:
.column-right-outer .widget, .column-left-outer .widget {
background: url(URL de la imagen)no-repeat 50% 100%;
padding-bottom:70px;

border:0;
}

Para las Plantillas antiguas de Blogger


De igual manera agrega antes de ]]></b:skin> lo siguiente si quieres que el separador sea un borde:
.sidebar .widget {
border-bottom:4px solid #000;

padding-bottom:20px;
}

O bien, si quieres que el separador de los gadgets sea una imagen entonces lo que deberás agregar será esto:
.sidebar .widget {
background: url(URL de la imagen)no-repeat 50% 100%;
padding-bottom:70px;

border:0;
}

Agrega la URL de la imagen del separador donde se indica si es que te decidiste por el separador con imágenes. Si la imagen fuera muy alta cambia donde dice padding-bottom:70px; por una valor más grande hasta que la imagen se muestre por completo.

En el caso de los separadores con bordes puedes modificar el grosor, tipo y color del borde, eso se hace donde dice border-bottom:4px solid #000;
4px es el grosor, solid es el tipo de borde, puedes cambiarlo por dotted, dashed, double, groove, ridge, outset, o inset, y #000 es el color del borde.
En donde dice padding-bottom:20px; podemos controlar la distancia entre cada gadget.
Como dije antes, es un procedimiento bastante simple que quizá la parte más difícil será decidirnos por un estilo que nos guste.

One thought on “Poner separadores en los gadgets”

  1. Se puede editar de alguna forma para que no aparezca un separador debajo de cada widget si no donde yo quiera? Por favor espero tu respuesta si puede ser por e-mail: doblebelleza@gmail.com

Leave a Reply