Indice alfabético blogger. 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='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
    <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>

y elimine todo el texto entre los "<b:if> </b:if>" que se muestra en color amarillo y reemplácelo con lo siguiente:

<!-- 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).toUpperCase(); // 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 -->

Guarde la plantilla y ya cuenta con un indice alfabético de etiquetas (basado en la idea de JMiur) Mira el ejemplo del índice alfabético en este blog.