Blogger: Las etiquetas en una solapa

Mandelrot tenía una inquietud que expresaba en varios comentarios. Había agregado el script Fabtabulous e intentaba agregar contenidos automáticos.

Empecemos por el principio.

Fabtabulous es un pequeño script que usa la librería Prototype y que nos permite crear un bloque con solapas que tengan diferente contenido por lo que en poco espacio, podemos mostrar varias cosas sin tener que extendernos a lo largo de la sidebar.

Para mi gusto es una de los mejores scripts ya que es muy pequeño, sencillo de usar y tiene la característica de poder personalizarse gráficamente con CSS. Los archivos necesarios para usarlo y las explicaciones respectivas pueden verse en el este post [más información]

La pregunta de Mandelrot apuntaba a un ejemplo concreto: poder colocar las etiquetas del blog en una de esas solapas.

La idea me pareció interesante y el uso de solapas me gusta, de hecho, con el mismo script, era lo que usaba en WordPress pero en Blogger ¿cómo hacerlo?

Hubo un largo feedback de ideas y fracasos. El problema radica en que en Blogger, ciertos datos sólo son accesibles cuando se encuentran incluidos en un elemento (widget) determinado. Por ejemplo, los datos del post solo podemos leerlos en el elemento Entradas del Blog y los datos de los archivos en el el elemento Archivos. Lo mismo ocurre con las etiquetas que sólo podemos leer en un elemento Labels. Esta es la gran limitación de Blogger, si pudiéramos leerlas en cualquier parte de la plantilla incluyendo el header, sabríamos la categoría del post a mostrar antes de hacerlo y podríamos manipularlo; por ejemplo, mostrar un diseño diferenciado según fuera de un tipo o de otro.

Esta bien, entonces, si sólo podemos leer las etiquetas en un elemento Labels ¿podemos usar el elemento Labels para agregar otro tipo de contenido? Esa era la idea que quedó flotando y en principio, no veo porque no debería poder hacerse. Claro, no podremos agregar datos de otros elementos exclusivos pero podemos agregar contenido propio como hacemos con los elementos HTML.

Si bien el ejemplo está implementado con Fabtabulous, en realidad, podríamos usar cualquier otro script del mismo tipo.

Lo que vamos a aprovechar es la posibilidad de crear tantos elementos Label como se nos ocurra. Si ya tenemos uno, agregamos otro desde Elementos de la Página, le ponemos un título y establecemos las opciones que nos parezcan convenientes. Guardamos y ahora vamos a Edición HTML de la plantilla y expandimos los artilugios.

Buscamos el código del nuevo elemento (por eso es bueno colocar un título claro aunque después lo cambiemos). Si ya teníamos un elemento similar, lo que veremos será algo así:

<b:widget id='Label2' locked='false' title='NOMBRE' type='Label'>
<b:includable id='main'>
<!-- este es el título del elemento -->
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<!-- este es el bucle que lee las etiquetas del blog y las muestra -->
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>
<!-- este es el ícono para editar el elemento -->
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Como en este momento no estoy usando un script con solapas en mi blog, decidí entonces colocarlo en uno de pruebas y, para probar las cosas, simplemente copié el ejemplo del post anterior

<b:widget id='Label2' locked='false' title='NOMBRE' type='Label'>
<b:includable id='main'>
<!-- este es el título del elemento -->
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<!-- AQUÍ COLOCO EL CÓDIGO DE LAS SOLAPAS -->
<ul id='tabs'>
<li><a class='active-tab' href='#tab1'>Tab 1</a></li>
<li><a href='#tab2'>Tab 2</a></li>
<li><a href='#tab3'>Tab 3</a></li>
<li><a href='#tab4'>Tab 4</a></li>
</ul>
<div class='demoTabs'>
<div class='panel active-tab-body' id='tab1'>El contenido de la primera solapa.</div>
<div class='panel' id='tab2'>El contenido de la segunda solapa.</div>
<div class='panel' id='tab3'>El contenido de la tercera solapa.</div>
<div class='panel' id='tab4'>El contenido de la cuarta solapa.</div>
</div>
.......

Obviamente la parte gráfica no se ve muy bien pero las solapas funcionan así que probemos que pasa si movemos el loop de Blooger y lo colocamos en el contenido de una ellas.

En lugar de:

<div class='panel' id='tab2'>
El contenido de la segunda solapa.
</div>

Ponemos:

<div class='panel' id='tab2'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>
</div>

Parece que no hay problemas, es aceptado y las etiquetas se muestran correctamente aunque, claro, deberá adaptarse el estilo con CSS.

¿Y el resto de las solapas? En principio, cualquier contenido es válido excepto otro elemento de Blogger.

¿Podría hacerse con el elemento Archivos? No lo he probado pero imagino que sí, sólo habría que seguir el mismo criterio, copiar el contenido del elemento (todo lo que está entre el título y el ícono de edición) en la solapa donde quisiéramos verlos.