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:

<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).