Expandir/contraer gadget de Etiquetas con efecto deslizante

En un post anterior vimos como expander y contraer el gadget de Archivo con efecto deslizante; hoy vamos a hacer lo mismo con el gadget de etiquetas. Como dije en la entrada mencionada, si bien la forma de lograrlo es casi igual para cualquier gadget, a muchos les parece difícil conseguirlo en el gadget de etiquetas y archivos por eso vamos a hacer este post dedicado para el gadget de etiquetas usando Prototype y Scriptaculous.


Si deseamos conseguir este efecto deslizante para los Archivos, mirad » esta entrada

Para conseguirlo, seguimos los siguientes pasos:

1.§ Vamos a Diseño - Edición de HTML y Expandir plantillas de artilugios.

2.§ Con ayuda de CTRL+F buscamos </head> y antes de éste pegaremos el siguiente código:

<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'/>
<script>
google.load("prototype","1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>
<!-- Prototype y Scriptaculous-->

Sí ya tenemos este código en nuestra plantilla no será necesario agregarlo de nuevo.

3.§ Ahora , nuevamente con ayuda de CTRL+F buscaremos el nombre que le dimos al gadget de nuestra sección etiquetas.

Por ejemplo, digamos que la sección de etiquetas se llama Las etiquetas,el nombre deberemos de buscarlo en la plantilla y deberá de tener la siguiente estructura:

<b:widget id='Label1' locked='false' title='Las etiquetas' type='Label'>

4.§ Con mucho cuidado insertamos lo que está resaltado en negrita, sin olvidar el </div> que está casi al final; debemos de tener en cuenta que el código puede cambiar un poco según cada plantilla, pero nos guiaremos por el código que está debajo de las líneas que pegaremos:

<b:widget id='Label1' locked='false' title='Las etiquetas' type='Label'>
<b:includable id='main'>
<a href='#' onclick='Effect.toggle("Etiquetas","slide"); return false'>
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'>&#9660;&#47;&#9650; <data:title/></h2>
</b:if>
</a><div align='left' id='Etiquetas' style='display: none;'>
<div class='widget-content'>
<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 + &quot;?max-results=30&quot;'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</div>
</b:includable>
</b:widget>

Damos click a guardar.