Bloques animados en el elemento Etiquetas

Hace unos días mostraba la forma de utilizar la técnica de los bloques animados en el elemento Archivos de Blogger y preguntaban si era posible hacer lo mismo en elemento Etiquetas y la respuesta es sí.

Otra vez, para quien no lo haya visto, estamos hablando de un script descripto en esta entrada y que se llama animatedcollapse.js; archivo que hay que alojar en un servidor propio y luego, insertarlo en la plantilla de Blogger, justo antes de la etiqueta </HEAD>:

<script type="text/javascript" src="URL_animatedcollapse.js"></script>

Expandimos los artilugios y buscamos el código de las etiquetas:

<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>

    <div style='text-align:center;'>
      <a href='javascript:lasEtiquetas.slideit()'>EXPANDIR/CONTRAER</a>
    </div>

    <div id='EtiquetasLista'>

      <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>
          <span dir='ltr'>(<data:label.count/>)</span>
        </li>
      </b:loop>
      </ul>

    </div>
    <script type='text/javascript'>var lasEtiquetas=new animatedcollapse("EtiquetasLista", 500, false)</script>

    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

Agregaremos entonces las líneas en color y eso es todo.

Aquí lo que hemos hecho es agregar un DIV para contener la lista de etiquetas y lo identificamos con un nombre único: id='EtiquetasLista'

El script, lo podemos usar varias veces en diferentes elementos con la única condición de ejecutarlo usando nombres distintos (lasEtiquetas).

El resultado puede verse en la sidebar de mi blog de pruebas funcionando sobre una plantilla Mínima.