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:

<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;prototype&quot;, &quot;1.6.1.0&quot;);
window.JSON = {
parse: function (st) { return st.evalJSON(); },
stringify: function(obj) { return Object.toJSON(obj); }
};
google.load(&quot;scriptaculous&quot;, &quot;1.8.3&quot;);
</script>

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 ejemploExpandGadget2, 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.

Imprimir artículo