ABL | Diseño&Tutoriales: Cómo hacer los gadgets desplegables

¡Hola a todos, buscadores de lápices!

Ya llevaba bastante tiempo sin traeros una entrada de la sección de Ayuda al Bloguero literario. Así que, este domingo he decidido venir con algo nuevo que espero que os sea muy útil. Nos vamos a centrar en el apartado dedicado al diseño y a los tutoriales. Os voy a enseñar a hacer desplegables los gadgets de vuestro blog.

Estaba pensado en qué entrada traeros de esta sección tan amplia pero, como muchos de vosotros me habéis pedido este tutorial, al final he pensado que os iba a gustar esta entrada. Aunque al principio os agobie ver mucho código, rápidamente descubriréis lo sencillo que es y lo poco que os costará aplicarlo a vuestro rinconcito.

Convertir los gadgets en desplegables es una opción estupenda para aligerar la barra lateral sin tener que renunciar a algunos elementos. A veces es inevitable que se vea repleta de imágenes y otras cosas, por lo que comprimir algunos gadget ayudará a que sea más agradable a la vista, cómoda y práctica para nuestros lectores. Espero que os sirva y no tengáis problemas. :)

Esto es lo que queremos conseguir con este tutorial:

Los gadgets de nuestro blog, por defecto, presentan el aspecto de la izquierda; es decir, están desplegados y muestran su contenido. Sin embargo, con este tutorial conseguiremos comprimirlos y que solo aparezca el título. De modo que, para abrirlos, no hay más que hacer click en ellos como muestra la imagen derecha. Podéis hacer desplegables todos los gadget que queráis.

PASOS

Aspectos a tener en cuenta antes de crear el gadget...

Hay determinados tipos de gadget que son de especial interés para convertirlos en desplegables, como puede ser el de Archivos o el de Entradas populares. No es necesario tenerlos a la vista pero sí está bien que permanezcan en la barra lateral para que puedan ser consultados.

Sin embargo, un aspecto positivo de este tutorial, aparte de lo práctico que puede ser por lo que ya hemos dicho anteriormente, es que aporta bastante juego y dinamismo al diseño y la personalización de un blog.

Por tanto, este tutorial estará dividido en dos partes. En primer lugar, vamos a ver cómo hacer desplegable el gadget de Archivos y, a continuación, aprenderemos cómo editar cualquier otro gadget para conseguir el mismo efecto.

Primero hacemos la copia de seguridad...

Siempre es recomendable hacer una copia de seguridad cuando vayamos a hacer cambios y, en especial, si vamos a trabajar con código HTML. Por lo que el primer paso es guardar una copia de nuestro blog siguiendo estos pasos:

¡Vamos con el primer código!

El siguiente paso es ir a "Tema", de nuevo de vuelta al panel de control de Blogger, para después hacer click en "Editar HTML", el cuadro de la derecha de los dos que aparecen bajo la previsualización de nuestro blog.

Una vez ahí haremos click en cualquier parte del código que aparece y pulsaremos en el teclado "Control + F". Buscaremos "</head>" en el cuadrito que aparecerá y, justo después de "</head>", pegaremos el código que os presento a continuación.

Es decir: Tema → Editar HTML → "Control+F" → Pegar código después de </head>.

 CÓDIGO QUE HAY QUE PEGAR DESPUÉS DE </HEAD> 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>

Hacemos desplegable el gadget de Archivos...

El siguiente paso es hacer desplegable el gadget que más nos interesa: el de Archivos. Para ello tendremos que hacer click en "Ir al widget" y buscar "BlogArchive1".

A continuación, nos encontraremos con el código del gadget de Archivos y tendremos que asegurarnos de que el código de uno de sus apartados esté desplegado. Es el caso del valor 'main' que, como podéis ver en la imagen de abajo, hay que abrir haciendo click sobre el icono de "▶" que está destacado por el color rojo.

Es decir: Ir al widget → BlogArchive1 → Desplegamos el valor 'main'

Ahora tenéis que estar muy atentos porque vamos a modificar ese código que hemos desplegado, esta es la clave para que funcione este tutorial. ¡Vamos a ello!

Este código del cuadro de abajo será lo que os encontraréis una vez realizados los pasos anteriores a excepción de esas partes que están destacadas en este color. Lo que tenemos que hacer es sencillo: añadirlas a nuestro código "incompleto". Esos valores nos permitirán hacer desplegable el gadget, por lo que es importante que os fijéis bien dónde se deben colocar (es decir, entre qué códigos). No tenéis más que fijaros en el de abajo.

<b:widget id=' BlogArchive1 ' locked='false' title='Título del gadget de archivo' type=' BlogArchive '>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'>
<span id='expandirGadget1' style='cursor:hand;cursor:pointer;'>
&#9660;
<data:title/>
</span>
</h2>
</b:if>
<div class='widget-content'>
<div class='expandir1' style='display: none;'>
<data:content/>
</div>
<script>$(document).ready(function(){$(&#39;#expandirGadget1&#39;).click(function(){$(&#39;.expandir1&#39;).slideToggle(&quot;slow&quot;)})});</script>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget> 

Una vez hayáis terminado este paso, podéis hacer click en "Vista previa del tema" para comprobar que el resultado es el buscado. Después guardáis el tema ¡y ya estaría terminado!

Hacemos desplegables otros gadgets...

Si estabais temiendo encontraros con otro mareo de códigos para hacer desplegables otros gadgets, ¡no os preocupéis! Es igual de sencillo. De hecho, tenéis que repetir exactamente las mismas pautas del Paso 4.

SÓLO HAY UN CAMBIO:

Es importante cambiar el número que aparece en este código "expandirGadget1" que, a su vez, está presente dos veces en el código. Para que no quepa lugar a dudas, abajo os vuelvo a mostrar el código de antes y qué partes debéis modificar exactamente cuando queráis hacer desplegables otros gadgets.

<b:widget id=' BlogArchive1 ' locked='false' title='Título del gadget de archivo' type=' BlogArchive '>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'>
<span id='expandirGadget1' style='cursor:hand;cursor:pointer;'>
&#9660;
<data:title/>
</span>
</h2>
</b:if>
<div class='widget-content'>
<div class='expandir1' style='display: none;'>
<data:content/>
</div>
<script>$(document).ready(function(){$(&#39;#expandirGadget1&#39;).click(function(){$(&#39;.expandir1&#39;).slideToggle(&quot;slow&quot;)})});</script>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget> 

★ IMPORTANTE: Este es el único cambio que deberéis hacer cada vez que queráis modificar un nuevo gadget para hacerlo desplegable. De modo que tenéis que "llevar la cuenta" porque cada nuevo gadget debe tener un número diferente. Por ejemplo:

Archivos: "expandirGadget1"
Entradas populares: "expandirGadget2"
Últimas reseñas del blog: "expandirGadget3"

Sorteos: "expandirGadget4"
Iniciativas: "expandirGadget5"

Recordad que podéis hacer desplegables todos los gadgets que queráis. Lo único que debéis hacer es seguir cada paso y no olvidaos de cambiar el número de este pequeño código (que aparece dos veces, por tanto, deberéis modificar ambos repitiendo el número). 

¿Qué te ha parecido este tutorial? 

Puedes dejar en los comentarios cualquier duda que tengas.
O alguna sugerencia para la siguiente entrada. :)

¡Hasta la próxima!