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.