Blogger: Plantilla, elementos y secciones (2)

Habíamos dicho que una sección de Blogger comenzaba con la etiqueta <b:section> y terminaba con la etiqueta </b:section> y que sólo podía contener elementos (widgets).

Un elemento, también está definido por un par de etiquetas: <b:widget> </b:widget> y no es otra cosa que un "contenedor" que es utilizado por Blogger en la solapa Elementos de la página de la ventana Diseño. No tiene otra función que poder ser manipulados desde el navegador (editarlo, eliminarlo, moverlo) y, de hecho, podríamos prescindir de ellos y reemplazarlos con códigos HTML pero, claro, perderíamos una de las funciones más cómodas de Blogger.

En una plantilla, los elementos casi no tienen código y su contenido es guardado de manera separada.

<b:widget id='Header1' locked='true' title='nombre (cabecera)' type='Header'>
  ......
</b:widget>

<b:b:widget id='LinkList1' locked='false' title='VÍNCULOS' type='LinkList'>
  .......
</b:widget>

Un elemento puede tener los siguientes atributos:

id es obligatorio y debe ser un nombre único (letras y/o números). Este parámetro no puede ser cambiado manualmente, una vez creado, si queremos modificarlo deberemos eliminarlo y crear uno nuevo.
type es obligatorio e indica el tipo de elemento. Este dato es colocado de forma automática al crearlo y tampoco podemos modificarlo (BlogArchive, Blog, Feed, Header, HTML, LinkList, List, Navbar, VideoBar, etc).
locked es opcional, puede ser yes o no (por defecto es no) e indica si el elemento está o no está bloqueado es decir, si podemos moverlo o eliminarlo.
title es opcional y es el título mostrado. Si no se especifica ninguno, se establece uno por defecto.
pageType este atributo opcional no es muy utilizado y es muy interesante ya que indica si el elemento se mostrará en determinado tipo de páginas. Puede tener los siguientes valores: all, archive, main o item (por defecto es all)

Al igual que con las secciones, cada etiqueta b:widget es reemplazada por una etiqueta div al mostrarse las páginas en el navegador.

Si vamos a Edición HTML de la plantilla y marcamos Expandir artilugios veremos el código interno de cada elemento. algunos de ellos son muy complejos, por ejemplo los del elemento Blog que contienen la forma en que se mostrarán los posts; pero muchos otros son muy simples y poseen una estructura similar:

<b:widget id='XXX' locked='false' title='texto' type='XXX'>
  <b:includable id='main'>
     <!-- este es el título -->
     <b:if cond='data:title'>
        <h2 class='title'><data:title/></h2>
     </b:if>
     <!-- este es el contenido que Blogger guarda por separado -->
     <div class='widget-content'><data:content/></div>
     <!-- este es el ícono de edición rápida -->
      <b:include name='quickedit'/>
  </b:includable>
</b:widget>

Muchos elementos no pueden ser agregados sin que tengan título. Es más, no es recomendable no colocarles un título porque luego se nos hará difícil localizarlos en la parte de diseño. Si no queremos que ese título se muestre, podemos hacer dos cosas: eliminar esto:

<b:if cond='data:title'>
  <h2 class='title'><data:title/></h2>
</b:if>

o marcarlo como si fuera un comentario para que no se ejecute:

<!--
<b:if cond='data:title'>
  <h2 class='title'><data:title/></h2>
</b:if>
-->

De esta manera, veremos el título en la ventana de diseño pero no en las diferentes páginas del blog.

Los elementos también pueden ser añadidos, movidos o eliminados manualmente, escribiendo el código correspondiente. En este caso, no hace falta expandir la plantilla así nos evitamos errores. Por ejemplo, supongamos que en la sidebar tenemos tres elementos HTML:

<b:widget id='HTML1' locked='false' title='nombre uno' type='HTML'/>
<b:widget id='HTML2' locked='false' title='nombre dos' type='HTML'/>
<b:widget id='HTML3' locked='false' title='nombre tres' type='HTML'/>

y queremos reordenarlo y agregar uno más.

Simplemente, copiamos y pegamos una de las líneas y las ubicamos en el orden que se nos ocurra:

<b:widget id='HTML2' locked='false' title='nombre dos' type='HTML'/>
<b:widget id='HTML4' locked='false' title='nombre cuatro' type='HTML'/>
<b:widget id='HTML1' locked='false' title='nombre uno' type='HTML'/>
<b:widget id='HTML3' locked='false' title='nombre tres' type='HTML'/>

La única precaución que debemos tener es que el atributo id sea único, es decir, que no haya otro con el mismo nombre, sino, Blogger nos dará un error cuando intentemos guardarla.

Si lo que queremos hacer es eliminarlo, simplemente borramos la línea. Al guardar la plantilla, nos preguntarán si queremos eliminar el elemento y le diremos que sí.

Todas las modificaciones hechas de este modo se reflejarán en la solapa Elementos de la página.