Indice alfabético de etiquetas expandibles
Para el Blogger: Cuando hay muchas etiquetas en tu blog, tal vez requieras un clasificarlas y así mostrar un índice alfabético basado en etiquetas. Se formara un índice con las letras desde la "A" hasta la "Z" y al pulsar la letra "A", esta se expanderá para mostrar todas las etiquetas que empiecen con la letra "A". Mira el ejemplo del índice alfabético en este blog.Para ello realiza los siguientes pasos.Desde "Diseño". "Elementos de pagina", agregue una sección "Etiquetas" a su blog. Luego vaya a 'Edición de HTML" y active la casilla "Expandir plantillas de artilugios". Busque algo similar a:
<div expr:class='"widget-content " + data:display + "-label-widget-content"'>
<b:if cond='data:display == "list"'>
<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>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='"label-size label-size-" + data:label.cssSize'>
<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>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(<data:label.count/>)</span>
</b:if>
</span>
</b:loop>
</b:if>
<b:include name='quickedit'/>
</div>
<!-- INICIO -->
<script type='text/javascript'>
// definición de las variables utilizadas
var elBlog ="<data:blog.homepageUrl/>"; // la URL del blog
var listaEtiquetas = new Array(); // el array que contendrá las etiquetas
var listaEtiquetasNum=0; // contador auxiliar
var laSeccion = ""; // guarda los nombres de las categorías
var elEnlace =""; // el enlace a cada subcategoría
// usamos los datos de Blogger para recopilar todas las etiquetas del blog
<b:loop values='data:labels' var='label'>
// leemos el nombre de cada una de las etiquetas
var elNombre = "<data:label.name/>";
// lo guardamos en el array
listaEtiquetas[listaEtiquetasNum] = elNombre;
listaEtiquetasNum ++; // incrementamos el contador
</b:loop>
// función auxiliar para expandir y contraer las secciones
function linkLista(cual) {
var idListaUL = document.getElementById(cual);
if(idListaUL.style.display == 'none') {
idListaUL.style.display = 'block';
}else{
idListaUL.style.display = 'none';
}
return false;
}
</script>
<script type='text/javascript'>
//<![CDATA[
// leemos todas las etiquetas, las separamos en dos partes y procesamos
for (var i = 0; i < listaEtiquetas.length; i++) {
var cual=listaEtiquetas[i]; // leemos la etiqueta completa
var leerSeccion = cual.substr(0,1); // guardamos el nombre de la categoría
var leerItem = cual; // guardamos el nombre de la subcategoría
// si no hay una subategoría, leerItem no tendrá un valor y lo salteamos
if (leerItem!=undefined) {
// sólo mostramos categorías y subcategorías
if (laSeccion != leerSeccion) {
// si todavía no lo hicimos, creamos el enlace de la categoría desplegable
document.write("</ul>"); // por las dudas, cerramos cualquier lista abierta
laSeccion = leerSeccion; // el nombre de la categoría (el continente)
// creamos un enlace con una clase CSS llamada listadoSECCION que servirá para desplegar y contraer la categoría
document.write("<a class=\"listadoSECCION\" title=\"Expandir/Contraer la sección\" href=\"javascript:void(0);\" onclick=\"return linkLista('" + laSeccion + "');\">" + laSeccion + "</a> ");
// iniciamos el bloque oculto con la lista de subcategorías a las que le establecemos una clase CSS llamada listadoBloqueITEMS
document.write("<ul class=\"listadoBloqueITEMS\" id=\"" + laSeccion + "\" style=\"display:none;\">");
}
// determinamos la URL de cada enlace
elEnlace = elBlog + "search/label/" + leerItem
// escribimos cada item de la lista con una clase CSS llamada listadoITEM
document.write("<span class=\"listadoITEM\"><a href=\""+ elEnlace + "\">" + leerItem + "</a></span> ");
}
}
//]]>
</script>
<!-- FIN -->
