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

domingo, 18 de junio de 2017


¡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!

12 comentarios

  1. Hola
    Muchas gracias por estos tutoriales, son geniales. 😙

    ResponderEliminar
  2. Hola Alex,
    Este fue el código que te pedí hace tiempo y que me resolvió la vida blogeril jajajajajaa desde entonces logré que mi bebé se viera ordenado y poner los gadget que quería y cómo los quería.
    Adoro esta sección.
    ¡Un beso!

    ResponderEliminar
  3. Hola! Hace tiempo que estaba buscando cómo hacer esto. Muchas gracias! Pronto voy a reorganizar mi blog y aplicar este detalle :)
    Esta sección es muy útil :D
    Saludos desde Adictos a la lectura

    ResponderEliminar
  4. Hola! Buenisimo tutorial! Estaba pensando en cuál gadget aplicarlo, pero creo que en el Archivo es el que encuentro más útil (aunque ya lo tenía desplegable jeje) de igual forma me guardo esta entrada para más adelante! Muchas gracias. Besos <3

    ResponderEliminar
  5. Hola! no sabía como se hacían los menús desplegables, así que me ha parecido muy interesante la entrada. En principio, no tengo pensado cambiar el diseño del blog, pero ya sabes como son estas cosas, lo mismo un día te levantas con ganas de cambios y nunca está mal saber trastear el html del blog ;)

    Besos

    ResponderEliminar
  6. Hola amorosa! Este tutorial me encanta, que cuando lo quise hacer yo me costó encontrarlo. Ahora ya no lo tengo, pero me guardo tu entrada por si en algún momento quiero volver a ponerlo así.
    Besos!

    ResponderEliminar
  7. Holaaa
    Muchisimas gracias por este tutorial bella ^^
    ¡Me encantó leerlo y aprender un poquito!
    un besazo ^^

    ResponderEliminar
  8. Hola!! Que sección más interesante!!! Me parece genial y hermoso que te abras el espacio para ayudar a otros bloggers! Y quiero decir que el tutorial me vino genial!! Un millón de gracias porque hace bastante estoy pensando en aplicarlo pero no sabía cómo hacerlo! Un besito enorme!!

    ResponderEliminar
  9. ¡Hola!
    Muchísimas gracias por el tutorial, creo que es super interesante y el blog queda mejor organizado.
    Nos leemos

    ResponderEliminar
  10. No sabía nada de este desplegable y me lo apunto, tengo planeado ir cambiando cosas en agosto. ¡Gracias! que estoy de nuevo por aquí y ya no te me escapas

    ResponderEliminar
  11. Hola
    Pues hace un tiempo lo queria hacer, aunque ahora ya he terminado de remodelar mi blog, pero lo guardo, nunca se sabe cuando lo necesite.
    Saludos
    Ataque Friki

    ResponderEliminar
  12. hola, esta super bien explicada tu entrada. seguí todos los pasos pero, en mi blog no se pudo poner y lo intente varias veces.

    ResponderEliminar

¿Dónde está mi lápiz? © . Design by Berenica Designs.