Poner separadores en los gadgets

Hace alg?n tiempo vimos c?mo poner separadores en las entradas, y desde esa vez muchos han preguntado c?mo poner separadores en los gadgets de la sidebar. La verdad es que es un procedimiento sumamente sencillo que no deber? quitarnos ni 3 minutos de tiempo.

Haremos algo similar como lo que hicimos para enmarcar entradas y gadgets s?lo que aqu? tendremos la opci?n de incluir una imagen como separador y as? delimitar de forma est�tica el final de cada gadget.

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.