Expandir y contraer gadgets con efecto deslizante

Muchas veces algunos gadgets se vuelven muy largos con el paso de tiempo, como el de Etiquetas, Archivo del blog, Lista de enlaces, etc. y estos comienzan a ocupar demasiado espacio en la sidebar, as? que una buena forma de ahorrarnos ese espacio es contraer los gadgets para que se expandan s?lo cuando el lector quiera verlos, y adem?s de eso con un efecto deslizante. 

Puedes ver un ejemplo en este blog de pruebas.

Para hacer esto en los gadgets vamos a usar Scriptaculous que es el que le dar? el efecto deslizante.

S?lo vamos a Dise?o | Edici?n de HTML y marcamos la casilla Expandir plantillas de artilugios.

Agrega antes de </head> lo siguiente:

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

Ahora localizamos el gadget al que queremos aplicarle el truco, por ejemplo, un gadget HTML/Javascript ser?a m?s o menos as?:

<b:widget id='HTML1' locked='false' title='T?tulo del gadget' type='HTML'>
<b:includable id='main'>
<a href='#' onclick='Effect.toggle(&quot;ExpandGadget1&quot;,&quot;slide&quot;); return false'>

<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'>&#9660;&#9650; <data:title/></h2>
</b:if>
</a><div align='center' id='ExpandGadget1' style='display: none; text-align:left;'>
<div class='widget-content'>
<data:content/>
</div>

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

Agrega lo que est? en color rojo y listo. Aqu? lo que se debe tomar en cuenta es que cada vez que se ponga en un gadget se debe cambiar lo que est? en color azul por otro nombre, por ejemplo ExpandGadget2, ExpandGadget3, etc. o cualquier otro nombre pero nunca debe ser igual a otro que ya tengamos.

Es seguro que la estructura de algunos gadgets no se vean como el del ejemplo pues �stos var?an seg?n el tipo de gadget que sean, pero para saber d?nde debemos poner el c?digo s?lo hay que guiarnos por los c?digos que est?n en color gris, as? que s?lo localiza la primera l?nea gris y debajo pega el primer c?digo en rojo, luego localiza la segunda parte gris y ah? deber?s pegar alrededor lo otro en color rojo, y por ?ltimo busca la ?ltima l?nea gris y arriba de ella pega el ?ltimo c?digo rojo.

No est? de m?s recordarles que se usa Scriptaculous y que no es compatible con jQuery, as? que si usas jQuery entonces deber?s realizar el hack para que puedan funcionar las dos librer?as juntas.