Blogger: Otra forma de navegar por las etiquetas

Este hack es viejo; lo vi por primera vez cuando Gabriel lo intentaba implementar en Café de por medio. Recuerdo sus comentarios respecto a lo dificultoso que le había resultado ya que no conseguía respuestas. Se trata de un truco llamado AJAX Labels y que permite que mostremos un extracto de los posts al hacer click en un enlace con una etiqueta sin salir de la página.

No parece estar implementado en muchos sitios y una de las razones es que el script no es accesible ya que lo han alojado en Google Pages y los problemas del ancho de banda hacen que no funcione; otra posible razón es que está en inglés y las explicaciones no son nada claras. Desde la página de origen puede incluirse como widget directamente en la sidebar pero, como los archivos no se cargan, el resultado es frustrante.

En realidad, implementarlo es sencillo y la clave, como casi siempre, termina reduciéndose a definir las propiedades CSS.

Para utilizarlo, necesitamos prototype así que si no lo tenemos incluido en el blog, lo descargamos y lo agregamos a la plantilla. Lo mismo haremos con el script en si mismo.

Como siempre, alojamos prototype.js y ajaxCategorias.js en un servidor externo como Google Pages o el que nos resulte cómodo y luego, justo antes de </head> escribimos:

<script type='text/javascript' src='URL_prototype.js'></script>
<script type='text/javascript' src='URL_ajaxCategorias.js'></script>

A esto le faltarían las propiedades de estilo. La mayoría de estas son muy personales y dependerán de la plantilla que usemos pero, de manera elemental serían las siguientes:

<style type='text/css'>
#cargadorLabels { /* bloque que muestra texto de carga */
margin: 0;
padding: 20px 0;
text-align: center;
z-index: 1000;
}
#bloqueLabels { /* el bloque que contiene todo el hack */
border: 1px solid #unColor;
font-size: 11px;
padding: 10px;
margin: 0;
}
.encabezadoLabels { /* el título del bloque */
background-color: #unColor; 
border: 1px solid #unColor;
padding: 4px 10px;
text-align: right;
}
.encabezadoLabels a { /* el enlace para suscribirse */
[agregar propiedades personales]
}
.tituloLabels { /* el título de cada post mostrado */
margin: 15px 0 0 0;
[agregar propiedades personales]
}
.tituloLabels a { /* el enlace de cada post mostrado */
[agregar propiedades personales]
}
.contenidoLabels { /* el extracto de cada post mostrado */
[agregar propiedades personales]
}
.cerrarLabels { /* la barra final para cerrar la ventana */
background-color: #unColor; 
border: 1px solid #unColor;
cursor: pointer;
margin: 20px 0 10px 0;
padding: 4px 10px 0 0;
text-align: right;
}
</style>

Una vez que tenemos todo esto, nos falta hacer que funcione.
Primero que nada, debemos agregar dos bloques DIVs; uno será el que contenga la advertencia de carga y el otro será donde se mostrarán los posts extractados. Pero ... ¿DONDE? La respuesta rápida es "donde se nos ocurra", exactamente donde quisiéramos que se mostrara ese resumen.

Lo más sencillo, para empezar, es colocar arriba, justo encima de los posts:

<div id='main-wrapper'>

<div id='cargadorLabels' style='display: none;'>CARGANDO</div>
<div id='bloqueLabels' style='display:none'> </div>

<b:section class='main' id='main' showaddelement='no'>

Como la idea es que al hacer click en las etiquetas se ejecute el truco, necesitamos modificar la parte de la plantilla que las contienen y otra vez, aparecen variantes ya que hay dos sectores del blog que las muestran; por lo general, debajo de los posts y en el elemento Etiquetas de la sidebar.

Ya que Blogger nos permite agregar tantos elementos Etiquetas como nos de la gana, lo ideal es crear uno nuevo para no interferir con los que ya tenemos así que vamos a Elementos de la página y agregamos un nuevo elemento Etiqueta; le ponemos un título para reconocerlo y lo guardamos. Volvemos a la Edición HTML de la plantilla y, expandiendo los artilugios, lo buscamos.

Nos mostrará un código como este:

<b:widget id='LabelX' locked='false' title='elNOMBRE' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span dir='ltr'><data:label.name/></span>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Allí, reemplazaremos el enlace marcado por lo siguiente:

<a href='#bloqueLabels'
expr:onclick='"javascript:getCat(\"" + data:label.name + "\",null)"'>
<data:label.name/>
</a>

Guardamos la plantilla y listo. Cuando hagamos click en uno de esos enlaces, se desplegará el bloque en la parte superior de la ventana, mostrando un resumen de cinco posts con esa etiqueta.

Hasta acá no debería haber problemas salvo los que se refieren a ajustes gráficos pero, la idea puede ampliarse un poco.

Muchos usamos una nube de etiquetas en lugar de una lista ¿es posible hacer que esa nube utilice el scipt? Sí, es posible y eso será motivo de otro post; por eso, sugiero agregar un elemento nuevo para probar y de esa forma, no interferir con lo que tenemos.

¿Y por qué no lo estoy usando? Porque me ha parecido más interesante implementarlo en los mismos posts ya que, como dije antes, debajo de cada uno de ellos se muestran las etiquetas.

Aquí, entonces, nos encontramos con un problema ya que el blog se muestra de dos modos diferentes, uno cuando estamos en una página individual y otro cuando estamos en cualquier otro punto. En el primer caso, sólo se muestra un post, en el segundo, un número variable de posts, uno debajo del otro así que, en ese caso, no podría mostrarse debajo de cada uno de ellos.

La idea sería que, si estamos en una página individual, el bloque se muestre debajo de este y si estamos en otro tipo de página, se muestre en la parte superior y nos posicione allí, sin importar donde nos encontremos.

Para esto, usamos los códigos condicionales y colocamos un bloque tal como en el primer ejemplo, justo arriba de los posts pero le diremos a la plantilla que sólo lo agregue cuando NO estemos en una página individual:

<div id='main-wrapper'>

<b:if cond='data:blog.pageType != "item"'>
<div id='cargadorLabels' style='display: none;'>CARGANDO</div>
<div id='bloqueLabels' style='display:none'> </div>
</b:if>

<b:section class='main' id='main' showaddelement='no'>

Y haremos lo mismo en alguna parte del footer de los posts, ese lugar dependerá mucho de la plantilla de cada uno; probablemente, antes de:

<p class='post-footer-line post-footer-line-3'>

Agregamos lo mismo pero, indicando lo contrario, que ese bloque sólo se cree cuando estemos en una página individual:

<div id='main-wrapper'>

<b:if cond='data:blog.pageType == "item"'>
<div id='cargadorLabels' style='display: none;'>CARGANDO</div>
<div id='bloqueLabels' style='display:none'> </div>
</b:if>

<b:section class='main' id='main' showaddelement='no'>

Ahora buscaremos los enlaces de las etiquetas:

<p class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/>;
<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
</p>

Y, otra vez, lo único que necesitamos cambiar es el enlace pero también le daremos dos alternativas; si estamos en una página individual, se abrirá debajo pero, si estamos en otro tipo de página, se abrirá arriba y nos posicionará allí:

<b:if cond='data:blog.pageType == "item"'>
<a href='#bloqueLabels' rel='tag'
expr:onclick='"javascript:getCat(\"" + data:label.name + "\",null)"' >
<data:label.name/>
</a>
<b:else/>
<a href='#bloqueLabels'
expr:onclick='"javascript:getCat(\"" + data:label.name + "\",null),scroll(0,0)"' >
<data:label.name/>
</a>
</b:if>

Y ahora sí, creo que ya es todo.