Etiquetas de elementos de la página para los diseños

El <cuerpo> de una plantilla de "Diseños" se compone principalmente de secciones y widgets. Las secciones delimitan áreas de la página, tales como la barra lateral, el pie de página, etc. Un widget es un elemento de página individual como una imagen, un blogroll o cualquier otro elemento que puedas añadir desde la pestaña "Elementos de la página". Puedes incluir cualquier HTML que quieras alrededor de estas secciones de la plantilla.

Cada sección de la plantilla cuenta con una etiqueta de apertura y cierre, que es algo así:

<b:section id='header' class='header' maxwidgets="1" showaddelement="no">
</b:section>

Una etiqueta <b:section> puede tener los siguientes atributos:

  • id: (obligatorio) un nombre único con solo letras y números.
  • class: (opcional) los nombres de clase habituales son "navbar", "header", "main", "sidebar" y "footer". Si cambias de plantilla más adelante, estos nombres ayudan a Blogger a determinar la mejor forma de transferir el contenido. Sin embargo, si lo prefieres, puedes utilizar nombres diferentes.
  • maxwidgets: (opcional) el número máximo de widgets permitidos en esta sección. No habrá ningún límite en caso de que no lo especifiques.
  • showaddelement: (opcional) puede ser "yes" o "no", con "yes" como opción predeterminada. Esto determina si en la pestaña "Elementos de la página" aparecerá el enlace "Añadir un elemento de página " en esta sección.
  • growth: (opcional) puede ser "horizontal" o "vertical", con "vertical" como opción predeterminada. Esto determina si los widgets de esta sección se ordenan uno al lado del otro o de forma apilada.

Una sección puede contener widgets, pero no otras secciones ni otro código. Si necesitas insertar código adicional entre determinados widgets o alrededor de ellos dentro de una sección, tendrás que dividir la sección en dos o más secciones nuevas.

En su forma más sencilla, un widget está representado por una única etiqueta, que básicamente se trata de un marcador de posición que indica cómo se debe gestionar el widget en la pestaña "Elementos de la página". Los datos reales de un widget determinado se almacenan en la base de datos de Blogger y solo se accede a ellos cuando es necesario mostrar el widget. Algunos ejemplos de widgets (uno para una cabecera de página y uno para una lista) son:

<b:widget id="header" type='HeaderView' locked="yes"/>
<b:widget id="myList" type='ListView' locked="no" title="Mis cosas favoritas"/>
<b:widget id=”BlogArchive1” locked=”false” mobile=”yes” title=”Archivo del blog” type=”BlogArchive”/>

Un widget puede tener los siguientes atributos:

  • id: (obligatorio) debe contener letras y números solamente; además, todos los ID de los widgets deben ser exclusivos. Por otra parte, el ID de un widget no puede modificarse sin eliminar el widget y crear uno nuevo.
  • type: (obligatorio) indica el tipo de widget y, además, debe ser alguno de los tipos válidos que se indican a continuación.
  • locked: (opcional) puede ser "yes" o "no", con "no" como opción predeterminada. Un widget "locked" no se puede mover ni eliminar de la pestaña "Elementos de la página".
  • title: (opcional) el título mostrado para el widget. Si no se especifica ninguno, se utilizará un título predeterminado como "List1".
  • pageType: (opcional) puede ser "all", "archive", "main" o "item", con "all" como opción predeterminada. El widget aparecerá solo en las páginas designadas del blog. Todos los widgets se muestran en la pestaña "Elementos de la página", independientemente del valor del atributo "pageType".
  • mobile: (opcional) puede ser "yes", "no" u "only", con "default" como opción predeterminada. Este atributo determina si el widget se mostrará o no en Google para móviles. Las secciones de la cabecera, el blog, el perfil, la lista de páginas, AdSense y la atribución se mostrarán en Google para móviles únicamente si el valor del atributo "mobile" es "default".

Los tipos de widgets que puedes especificar son:
  • BlogArchive
  • Blog
  • Feed
  • Header
  • HTML
  • SingleImage
  • LinkList
  • List
  • Logo
  • BlogProfile
  • Navbar
  • VideoBar
  • NewsBar

Cada widget también puede escribirse de forma extensa y así detallar el diseño completo y el contenido para dicho widget. Esto es lo que verás, por ejemplo, si descargas la plantilla desde la pestaña "Edición de HTML" para realizar una copia de seguridad. Por lo general, no necesitarás trabajar con los widgets en este modo, ya que es más sencillo modificarlos desde la pestaña "Elementos de la página". No obstante, si quieres obtener más información, puedes consultar los detalles sobre las etiquetas de los widgets.

Nota: en el blog publicado, todas las etiquetas <b:section> y <b:widget> se reemplazarán por etiquetas <div>, que tendrán el ID especificado. Por tanto, si te apetece, te invitamos a consultar, por ejemplo, div#header o div#myList en el CSS.