Crear Secciones en las Plantillas para Agregar Widgets

Crear Secciones en las Plantillas para Agregar Widgets

Ayer o antier (nótese que feliz vivo) vi que Blogger hizo unos cambios en la sección de "Diseño". Ahora cada sección aparece delimitada y se muestra con el nombre del Id con el que fue nombrada. Así que vamos a aprovechar esta novedad para hablar sobre este tema, ¿te apuntas?.Todas las plantillas de Blogger fueron creadas a partir de secciones, con el fin de facilitarnos a los usuarios incluir widgets fácilmente usando la funcionalidad: "Añadir un gadget" que encontramos en Diseño y con la que probablemente ya estarás muy familiarizado si utilizas el servicio.

Los widgets son esos elementos que seguramente ya has agregado al blog, como por ejemplo: la lista de páginas o una lista de enlaces. Aunque, algunos ya vienen incluidos por defecto al crear el blog, como lo son el widget de la cabecera o el de las entradas del blog.

En la siguiente imagen puedes ver cómo se ve la sección que incluye el widget de las entradas(Blog1), y que fue nombrada como: "main".

Es posible crear secciones para agregar widgets desde la sección de Diseño. Para lograrlo, es necesario utilizar código propio de Blogger así como hacemos con el código condicional para incluir o excluir elementos en la plantilla.

Para crear una sección hay que usar una etiqueta llamada: <b:section> y ésta debe llevar una etiqueta de cierre: </b:section>.

Dicha etiqueta: <b:section> es devuelta por Blogger al navegador como una etiqueta: <div>; en otras palabras Blogger convierte su etiqueta <b:section> en un <div> que en HTML es una etiqueta que permite dividir/delimitar el contenido de la página en secciones.

El código de las secciones puede incluir ciertos atributos. Solo uno de ellos es obligatorio, mientras que el resto se pueden agregar de forma opcional si se necesitara.

Puedes ver la lista completa de atributos desde la página de Blogger. 

El único atributo obligatorio de una sección es:
-"id", y su valor debe ser un nombre único, es decir, no puede repetirse al igual que ocurre con el id de un div en HTML. Puede ser un nombre que incluya letras y números, por ejemplo, puede nombrarse: "seccion_menu" o "columna1".

Ya sabiendo que la sección debe incluir solo el atributo "id" de forma obligatoria, podemos crear una sección en su forma más simple y el código de ésta se vería más o menos así:
<b:section id='seccion1'></b:section>
O simplemente lo pondríamos así:
<b:section id='seccion1'/>
Ya que en un principio la sección no tendrá ningún widget, es decir, la etiqueta no encierra o envuelve ningún código de un widget.

Una vez agregado el código de la sección en el código fuente de la plantilla, se estará habilitando la funcionalidad de añadir widgets y se podrán agregar desde la sección de Diseño.

Para definir la apariencia de la sección creada, usamos su id al crear la regla de CSS, del mismo modo que se hace con un <div> en HTML; por ejemplo:
#seccion1 {
width: 100%;
position: relative;
...
}
Es decir, ponemos la almohadilla: "#" antes del nombre que es "seccion1" que es el valor del atributo: id de la etiqueta: <b:section>.

También podemos definir reglas de CSS para definir la apariencia de la sección si usamos el nombre/valor del atributo "class" (que es opcional), si por ejemplo queremos usar la misma regla para varias secciones.

Código de los widgets de Blogger

Cuando creamos una sección y agregamos un widget usando el enlace: "Añadir un gadget", aparecerá el código del widget dentro de la sección.

Los widgets utilizan una etiqueta denominada: <b:widget>. Puede incluir atributos y solo dos de ellos son obligatorios.

Los atributos obligatorios de la etiqueta: <b:widget> son:

• id: que permite identificar el widget. Puede ser un nombre que incluya letras y números y son exclusivos, es decir no se puede repetir.
• type. Cuyo posible valor incluye el nombre del widget que ha definido Blogger y estos son los más comunes que se agregan al blog u otros ya vienen por defecto:
• BlogArchive (el widget del Archivo)
• Blog (corresponde a las entradas del blog)
• Header (el widget de la cabecera)
• PageList (lista de páginas)
• HTML (para agregar código HTML o JavaScript)
• Image (para agregar una imagen)
• LinkList ( lista de enlaces)
• List (una lista con viñetas)
• BlogProfile (perfil del autor)
• Navbar (la barra superior de Blogger)
• Gadget (los widgets de terceros, es decir, que no son de Blogger)

Todos los tipos de widgets de Blogger están acompañados de un número, empezando por el 1, Por ejemplo: "Blog1" que es el widget de las entradas.

Algunos widgets solo se puede agregar solo una vez, como el widget de lista de páginas, mientras que otros se pueden agregar de forma indefinida y Blogger los va numerando sucesivamente al irse agregando.

El código de un widget puede incluir código HTML además del código de Blogger. Por lo general incluye también código condicional, para mostrar contenido según la configuración de widget. Por ejemplo, se muestra el título si se ha agregado, o se muestra una versión distinta según el tipo de dispositivo con el que es visto el blog, como por ejemplo sucede con el widget de lista de páginas: éste tiene una estructura definida para la plantilla móvil y solo es devuelta por Blogger cuando un usuario visita el sitio usando un dispositivo móvil. 

Resumen y Conclusiones

• Las secciones de Blogger se crean con el propósito de habilitar la funcionalidad de agregar widgets al blog desde la sección de "Diseño" anteriormente llamada: "Elementos de la página".
• El código de las secciones solo sirve para incluir dentro código de widgets.
• Para crear secciones es necesario utilizar la etiqueta <b:section>.
• Una sección que utiliza la etiqueta <b:section> es devuelta por Blogger como un <div>.
• El código de los widgets llevan la etiqueta <b:widget>.
• Tanto la etiqueta <b:section> como la etiqueta <b:widget> pueden llevar atributos.
• El único atributo obligatorio de la etiqueta <b:section> es "id", mientras que los atributos obligatorios de la etiqueta <b:widget> son "id" y "type".
• Los widgets son elementos que agregamos al blog desde la sección de "Diseño", usando el enlace que dice: "Añadir un gadget".
• Los widgets pueden incluir código HTML además del código de Blogger (sus propias etiquetas y elementos).

Saber crear secciones resulta muy útil para cualquier diseñador que cree plantillas para otros, ya que ofrece a los usuarios la posibilidad de gestionar el contenido de los mismos fácilmente, sin tener que ingresar al código de la plantilla.

También es útil para cualquier webmaster que personalice su blog y desee sacar provecho de esta funcionalidad.

¿Listo (a) para crear secciones? 

Referencia/Fuente:
Etiquetas de elementos de la página para los diseños:https://support.google.com/blogger/answer/46888?hl=es#

Por: Karla Castañedaen 6/17/2015