Etiquetas desplegables en la sidebar

Como Blogger no nos ofrece alternativas para manejar nuestros archivos, organizarlos o listarlos, generalemente, no queda más remedio que recurrir a scripts que leen el contenido RSS de nuestro blog y de esa manera hacer cosas diferentes de las no-pensadas por los desarrolladores.

Una de esas alternativas es la que muestra El escaparate de Rosa en un artículo reciente y que es muy sencilla de implementar.

La idea es mostrar las etiquetas pero adosándoles la posibilidad de desplegarse para que además, cada una nos liste las últimas entradas asociadas como enlaces individuales; de alguna manera, se trata de crear un estilo similar al que se ve en el elemento Archivos.

Para implementarlo, debemos descargar el archivo JS con el script, alojarlo en un servidor y luego, si seguimos las instrucciones de Rosa, no habrá problemas.

Como alternativa, ya que el tema de usar archivos externos es un "drama" para muchos, voy a explicar la manera de hacer lo mismo pero, agregando el código directamente y de esa manera, no depender de servidores. Como se verá, el resultado final, será el mismo.

Empiezo agregando un elemento Etiquetas en la plantilla, dándole un título para poder encontrarlo luego y lo ubico en la sidebar donde quiero que se muestre. Ahora vamos a Edicion HTML de la plantilla y expandimos los artilugios para buscar ese elemento que dirá algo así:

<b:widget id='LabelX' locked='false' title='El Titulo' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
.......
.......
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Vamos a eliminar todo eso que está entre <ul> y </ul> para reemplazarlo por nuestro propio código:

<script type='text/javascript'>
// <![CDATA[
home_page = 'http://NOMBREBLOG.blogspot.com/';
max_rc_posts = 10;
function showentry(json){
var maxp = (max_rc_posts <= json.feed.entry.length) ? max_rc_posts : json.feed.entry.length;
var text = "<ul>";
for (var i = 0; i < maxp; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
text += "<li><a href='"+posturl+"'>" + posttitle + "</a></li>";
}
text += "</ul>";
document.getElementById("showItemLabel").innerHTML = text;
}
function showPostLabel(sPL_label,e){
var isDOM  = (navigator.appName.match("Microsoft Internet Explorer") || navigator.appName.match("MSIE")) ? false : true;
var check = document.getElementById("showItemLabel");
if(check) {
if(!isDOM) { check.removeNode(true); }
else {check.parentNode.removeChild(check);}
}
var elm;
if(e.target) elm = e.target;
else elm = window.event.srcElement;
var div = document.createElement('div');
div.innerHTML = "";
div.id = "showItemLabel";
if(!isDOM) { elm.insertAdjacentElement('afterEnd', div); } else { elm.parentNode.insertBefore(div, this.nextSibling); }
var elm2 = document.getElementById("showItemLabel");
elm2.style.display = "inline";
elm2.innerHTML = "<br/>Cargando entradas...";
var script = document.createElement('script');
script.src = home_page+"feeds/posts/summary/-/"+sPL_label.replace(/ /g,"%20")+"?start-index=1&max-results="+max_rc_posts+1+"&alt=json-in-script&callback=showentry";
script.type = "text/javascript";
document.getElementsByTagName('head')[0].appendChild(script);
}
// ]]>
</script>
<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 dir='ltr'>(<data:label.count/>)</span> <a expr:onclick='"showPostLabel(\"" + data:label.name + "\",event)"' href='javascript:void(0)'>►</a>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
<span dir='ltr'>(<data:label.count/>)</span> <a expr:onclick='"showPostLabel(\"" + data:label.name + "\",event)"' href='javascript:void(0)'>►</a>
</b:if>
</li>
</b:loop>
</ul>

El único dato que debemos modificar es la dirección de nuestro blog que está en una de las primera líneas:

home_page = 'http://NOMBREBLOG.blogspot.com/';

El otro dato que podemos modificar con facilidad es la cantidad máxima de entradas a ser mostradas; eso lo hacemos con esta línea:

max_rc_posts = 10;

Es importante saber que la demora en cargarse dependerá de ese número así que no conviene usar valores muy altos.

Cada vez que hagamos click en una de esas etiquetas, se mostrará "Cargando entradas..." que es un texto que podemos modificar si lo buscamos en el código:

elm2.innerHTML = "<br/>Cargando entradas...";

Lo mismo podemos hacer con el contador de entradas por etiqueta, borrando lo marcado en color rojo (está en dos lados):

<data:label.name/> <span dir='ltr'>(<data:label.count/>)</span> <a ...

En el script, también se utiliza un símbolo [ ► ] como enlace para "expandir":

&#9658;

Podemos reemplazarlo por otros o por cualquier texto o imagen:

&#9660; [ ▼ ]
&#9668; [ ◄ ]

Como lo que se genera es una lista, el estilo se adaptará a nuestra sidebar y si queremos personalizarla, podemos agregar las definiciones y propiedades de estilo justo antes de </b:skin>.

Si queremos establecer un estilo distinto al estandard, deberemos identificar el elemento:

#LabelX ul { ....... }
#LabelX ul li { ....... }
#LabelX ul li a { ....... }

El área expandida está dentro de un DIV llamado showItemLabel así que la controlamos con esa definición. Por ejemplo:

#showItemLabel { /* es el área completa */ }
#showItemLabel ul { /* la lista */
padding:0;
margin:0;
}
#showItemLabel ul li { /* cada item de la lista */
background-color: #343F4A;
list-style-image: url();
padding: 0 0 0 10px;
margin: 2px 0;
width: 85%;
}
#showItemLabel ul li a, #showItemLabel ul li a:visited { /* cada item es un enlace */
color: #FF9933;
font-weight: normal;
}
#showItemLabel ul li a:hover { /* efecto rollover sobre los enlaces */
color: #FFFFFF;
}