EXPANDIR GADGET

Utilizar este recurso es una opción muy inteligente para ahorrar espacio en la sidebar de nuestra web o blog, consiste simplemente en mostrar el título de nuestro gadget y si el usuario está interesado en observar su contenido, lo podrá hacer haciendo click encima del título, seguidamente el título se despleglará mostrando su información.

Un ejemplo es el siguiente, esto es lo que se mostrará:


Al hacer click encima se desplegará mostrando la información de la siguiente forma:

Esto es un simple ejemplo, pero podemos utilizarlo para cualquier gadget.

Primer paso:(Copiar el script)

Iremos al código de nuestra plantilla y colocaremos el siguiente script justamente encima de </head>

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


Segundo paso:(Buscar el gadget)

Para ello marcaremos la casilla de expandir artilugios en el caso de blogger y realizaremos la búsqueda por ejemplo con ctr+F y realizaremos la búsqueda por el nombre de nuestro gadget, tal y como aparece en nuestro panel de administrador, por ejemplo en el caso anterior mi gadget se llama ARCHIVOS.
Nos encontraremos con la línea de código tal como la siguiente:

<b:widget id='HTML4' locked='false' title='ARCHIVOS' type='HTML'>


El nombre variará dependiendo del nombre de vuestro gadget.

Tercer paso:(Agregar código)

*Agregaremos la siguiente línea marcada de color azul de forma que quede así:

<b:widget id='HTML4' locked='false' title='ARCHIVOS' type='HTML'>
<b:includable id='main'>
<a href='#' onclick='Effect.toggle("RINCON","slide"); return false'>


La palabra marcada en color rojo hace referencia a un identificador, en el caso de que insertéis este recurso repetidas veces deberéis de cambiar este nombre por cualquier otro de forma que no aparezcan 2 gadgets con el mismo identificador.

Unas líneas mas abajo nos encontraremos con la siguiente línea:

<h2 class='title'><data:title/></h2>
</b:if>

*Agregaremos lo que indico en color azul, de forma que quede de la siguiente forma:

<h2 class='title'><data:title/> &#9660;</h2></b:if>
</a><div align='center' id='RINCON' style='display: none;'>

Tener en cuenta lo dicho anteriormente del identificador, ya que aquí también tendremos que indicar su nombre correcto en el caso de insertar varios gadgets.

*De la misma forma que anteriormente continuamos hacia abajo en el código y añadimos la línea que indico en color azul.

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