Títulos de la sidebar personalizados IV: expandir y contraer gadgets

Anteriormente vimos tres formas de personalizar los títulos de la sidebar:

» Con colores, fuentes y bordes (ver entrada)
» Con imágenes e íconos (ver entrada)
» Gadgets con distintos fondos (ver entrada)

Hoy vamos a ver una cuarta forma, y más adelante quizás encontremos otra forma más para agregar.
La forma que veremos hoy es para expandir y contraer cualquier gadget , con efecto deslizante. Para algunos casos especiales, mirad las siguiente entradas, aunque la presente entrada es igualmente válida:

» Expandir/contraer gadget de Etiquetas (ver entrada)
» Expandir/contraer gadget de Archivos (ver entrada)

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.§ Buscaremos el nombre que le dimos al gadget al que vamos a agregar el efecto de expandir y contraer.

Por ejemplo, digamos que el gadget al que quiero agregar el efecto se llama Blogroll,el nombre deberemos de buscarlo en la plantilla y deberá de tener la siguiente estructura:

<b:widget id='HTML1' locked='false' title='Blogroll' type='HTML'>

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='HTML1' locked='false' title='Blogroll' type='HTML'>
<b:includable id='main'>
<a href='#' onclick='Effect.toggle(&quot;ENLACES&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;&#47;&#9650; <data:title/></h2>
</b:if>
</a><div align='center' id='ENLACES' style='display: none;'>
<div class='widget-content'>
<data:content/>
</div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Damos click a guardar.