Enmarcar entradas y gadgets

Algunas veces las plantillas suelen ser muy "planas" y nos hacen sentir como que los gadgets o las entradas se pierden entre ellos mismos pues no se distingue d?nde empiezan y d?nde acaban.
As? que una opci?n para delimitar los espacios de �stos es enmarcar las entradas y gadgets del blog y as? definir cada uno con un borde. Por supuesto que podemos elegir si se lo aplicamos s?lo a las entradas, o ?nicamente a los gadgets.

Haremos que las entradas se vean m?s o menos as?.

Y los gadgets as?.

Veamos pues c?mo enmarcar entradas y gadgets tanto en las plantillas "nuevas" como en las "antiguas" de Blogger. Para cualquiera de las dos entra en Plantilla | Edici?n de HTML, y ahora...

Para plantillas hechas con el Dise?ador de plantillas de Blogger

Antes de ]]></b:skin> agrega esto:

.post-outer {
border: 1px solid #000;
border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
padding:15px;
margin: 20px 0;
}

.column-right-outer .widget, .column-left-outer .widget {
border: 1px solid #000;
border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
padding:10px;
margin: 10px 0;
}

.footer-inner .widget {
border: 1px solid #000;
border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
padding:10px;
margin: 10px 0;
}

El tama?o, tipo y color del borde se modifica en border: 1px solid #000;
Tambi�n puedes elegir que los bordes sean redondeados, s?lo cambia los valores en color azul por unos m?s altos, por ejemplo 10px entre m?s alto sea el valor m?s redondeadas ser?n las esquinas.

El primer bloque corresponde a los bordes de las entradas, el segundo bloque a los bordes de los gadgets de la sidebar, y el tercer bloque a los gadgets del footer. Si no quieres aplicar el enmarcado a una de estas ?reas s?lo elimina el que le corresponde.

En el caso de algunos dise?os de las plantillas Awesome Inc y Ethereal en lugar del primer bloque, el que utilizaremos ser? este:

.date-outer {
border: 1px solid #000;
border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
padding:15px;
margin: 40px 0;
}

Para las Plantillas antiguas de Blogger

Antes de ]]></b:skin> agrega esto:

.post {
border:1px solid #000;
border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
}
.main .post {margin:20px 0; padding:15px;}

.sidebar .widget {
border:1px solid #000;
border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
margin:15px 0;
padding: 10px;
}

.footer .widget {
border:1px solid #000;
border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
margin:15px 0;
padding: 10px;
}

De igual forma el primer bloque es para las entradas, el segundo para la sidebar, y el tercero para el footer.

Ya sea que uses una plantilla del Dise?ador, o una plantilla antigua, quiz? tengas que modificar la separaci?n del borde pues en algunos casos podr? quedar muy pegado al contenido. Esa separaci?n se modifica en el padding que aparece en los estilos. Y en el caso de la distancia entre gadgets y gadget o entrada y entrada, esa se controla en el margin, el primer valor es el margen superior e inferior, y el segundo valor es el margen izquierdo y derecho.

Estos m�todos son ?nicamente para plantillas oficiales de Blogger, para cualquier otra plantilla personalizada les recomiendo contacten al autor de su plantilla para preguntar sobre el procedimiento.