Expandir/contraer gadget de Archivos con efecto deslizante

Habíamos visto como expander y contraer partes de la sidebar para ahorrar espacio; ahora vamos a ver algo similar, pero usando dos librerías de Google API : Prototype y Scriptaculous, que nos permitirá expander y contraer nuestros gadgets con un efecto deslizante. Por cierto, un ejemplo lo pueden ver en mi blog, en el gadget "Archivo [+/-]" que se encuentra en la sidebar.

Si bien la forma de expandir y contraer es casi la misma para cualquier gadget, he notado que a muchos les parece más difícil hacerlo en el gadget de etiquetas y de archivos, quizás porque la estructura del gadget es diferente a los de cualquier otro que agreguemos. Así que hoy vamos a ver cómo expandir y contraer el gadget de Archivos con un efecto deslizante y más adelante haremos lo mismo con el gadget de etiquetas y finalmente con los de cualquier otro gadget.

Ahora empecemos:

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 archivos. Puede que le hayamos puesto simplemente "Archivo" (como en mi caso) u otro nombre (Mis archivos, Blog Archive,etc).
Por ejemplo, digamos que mi sección de archivos se llama Archivo del blog,el nombre deberemos de buscarlo en la plantilla, pero al buscar nos encontraremos con dos o tres, así que el que usaremos será el que tenga la siguiente estructura:

<b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'>

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='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'>
<b:includable id='main'>
<a href='#' onclick='Effect.toggle("Archivo","slide"); return false'>
<b:if cond='data:title'>
<h2>&#9660;&#47;&#9650; <data:title/></h2>
</b:if>
</a><div align='center' id='Archivo' style='display: none;'>
<div class='widget-content'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>

Damos click a guardar y listo !