Si queda claro como formamos bloques contenedores con
DIV's, ahora nos interesa saber como generar una sección propiamente dicha. Como se dijo anteriormente, en cualquier otro tipo de página web no nos haría falta hacer nada más, pero como dice J.Miur, "
Blogger habla lenguaje Blogger" y la cosa funciona mejor aquí, haciendo uso de las secciones.
Una sección sin contenido tiene un código muy simple...
<b:section class='CLASE_ESTILO' id='NOMBRE_SECCION' />
Nota: Al no tener ningún gadget incluido, la sección se cierra con una contrabarra (/)antes del símbolo de cierre >, no necesitando una etiqueta </b:section>En la parte de HTML Si añadimos este código tal cual, por ejemplo dentro del
DIV denominado
MAIN-WRAPPER y justo debajo de la sección de las entradas, veremos desde
Elementos de Página como nos aparece un nuevo bloque en ese lugar para poder añadir los gadgets que queramos.
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section>
<b:section class='CLASE_ESTILO' id='NOMBRE_SECCION'/>
</div>

La etiqueta
SECTION puede incluir un par de atributos interesantes:
- SHOWADDELEMENT: Sirve para que podamos añadir gadgets a cada sección. Su valor puede ser YES o NO. Si probais por ejemplo en la sección de la cabecera a cambiar el valor (normalmente viene en las plantillas ajustado como NO), vereis que aparece un nuevo recuadro arriba con el mensaje "Añadir un gadget". A partir de ese momento podeis generar nuevos gadgets ahí, que quedarán dentro del bloque de la cabecera. Esté se quedará encima de dicha cabecera, pero luego lo podreis mover. Ese mismo valor se puede cambiar en cualquier otra sección según nos interese. Puede no venir porque es opcional y caso de no ponerse, se entiende con valor YES.
- MAXWIDGETS: Máximo número de gadgets que admitirá la sección. Si no se coloca, el número de artilugios no tendrá un tope. Bueno, seguramente tenga un máximo, pero tan alto que lo desconozco por innecesario. También es modificable en otras secciones que vengan "de serie".
Aunque este otro es un atributo de la etiqueta
WIDGET, quizás sea oportuno que también lo conozcais:
- LOCKED: Sus valores son TRUE o FALSE y sirve para bloquear/desbloquear la posibilidad de mover gadgets desde Elementos de Página.
El nombre indicado tanto en el
ID del
DIV como en el de la sección (
SECTION), es realmente un selector de bloque. En el caso de las secciones, tiene que ser único, distinto para cada sección. Se genera en la parte CSS mediante una almohadilla (
#) seguida del nombre que le asignemos y sus atributos (ancho, color, etc.) encerrados entre llaves (
{}). Estos atributos afectarán a todo el bloque dentro de las etiquetas que lo incorporen. Como normalmente los atributos del
DIV ya están definidos, no suele hacer falta definir también el
ID de la
SECTION que queda dentro.
#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
}
Más interesante seguramente, es definir una clase (
CLASS) para cada sección. Eso nos permite dar un estilo individual a cada sección si fuera necesario. A diferencia de los
ID, las clases se generan con un punto (
.) delante del nombre de la clase. Por ejemplo, con el uso de clases, conseguimos diferenciar el aspecto del bloque de las entradas y el de la barra lateral.
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}
Ver también: