lunes, 2 de noviembre de 2009

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.
Compartir:

11 comentarios:

  1. gracias por la información.

    de todos modos no hay ningún texto en rojo con lo que no me queda claro qué es lo que hay que sustituir.

    ResponderEliminar
  2. Disculpa el olvido, ya lo iluminé en amarillo.

    ResponderEliminar
  3. muchas gracias.

    al final había sustituido casi todo el widget y más o menos me había funcionado.

    no sé si tienes tiempo y me puedes dar algún consejo. me crea un índice que diferencia entre mayúsculas y minúsculas y repite algunas letras.

    ¿tienes idea de cómo hacer para que no diferencie las mayúsculas y las minúsculas? ¿y es posible modificar la tipografía de las letras?

    http://img692.imageshack.us/img692/5706/sinttulo2copiau.png

    si no tienes tiempo de responder, no te preocupes, entraré en algún foro a ver si me pueden echar una mano, que yo de lenguajes webs no tengo ni idea.

    gracias por el invento!

    ResponderEliminar
  4. bueno, pues como no sé nada de CSS, parece que al final he descubierto cómo solucionar el problema por otro lado.

    tenía etiquetas encabezadas con mayúsculas y etiquetas con mínúsculas. La minúsculas creaban perturbaciones en el listado y además hacían que no apareciesen las etiquetas con mayúsculas que venían tras ellas -dentro de una misma letra-.

    he modificado las etiquetas manualmente -ahora todas empiezan con mayúsculas- y el listado parece ahora correcto.

    ResponderEliminar
  5. Vi tu pagina y para que quede mejor cambia:

    document.write("<span class="listadoITEM"><a href=""+ elEnlace + "">" + leerItem + "</a></span> ");

    por

    document.write("<span class="listadoITEM"><a href=""+ elEnlace + "">" + leerItem + "</a></span><br />");

    El <br /> extra hara que cada etiqueta aparezca debajo

    ResponderEliminar
  6. He probado y me pasa lo mismo que a afasia, me crea un índice que diferencia entre mayúsculas y minúsculas y repite algunas letras.

    Algún consejo? Gracias

    ResponderEliminar
  7. Le he agregado (en verde) .toUpperCase() para el problema de las minusculas.

    ResponderEliminar
  8. mmuy bueno!! ya pensaba en hacer algo parecido por mi cuenta, se agradece!!

    ResponderEliminar
  9. muy bueno el indice pero una pregunta se podria mostrar el nombre de las entradas en lugar de las etiquetas de cada entrada y nada mas y poner una señal por ejemplo una imagen a ciertas etiquetas te agradeceria mucho si me pudieras ayudar con eso

    ResponderEliminar
  10. hola quisiera saber si se podria modificar para que motrara el nombre del post en lugar del de las etiqueas

    ResponderEliminar