Cómo Expandir y contraer gadgets en la sidebar

¡Hola!

Aquí traigo otra de las dudas que me dijeron en COMUNIDAD BLOGGER ARGENTINA.

Aquí les dejo un ejemplo con el gadget de Archivos del blog.

¡Empecemos!
Para comenzar modificaremos como ejemplo el gadget de Archivos del blog.

  1. Ir a Plantilla - Crear/Restablecer copia de seguridad
  2. Ir a Plantilla - Editor html
  3. Click en la ventana de código y hacer Ctrl+f
  4. Buscar <b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive' version='1' visible='true'>
  5. Deben desplegar esto: <b:includable id='main'>...</b:includable>
  6. Van a ver que aparece esto:

Ahora bien, verán que aparece esto:

 <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'>
    <h2><data:title/></h2>

Deberá quedar así:
 <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'>
    <h2><span id='expandirGadget1' style='cursor:hand;cursor:pointer;'>
&#9660;
<data:title/></span></h2>

Lo que está en celeste es lo que se agregó.
  <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'>
    <h2><span id='expandirGadget1' style='cursor:hand;cursor:pointer;'>
&#9660;
<data:title/></span></h2>
  </b:if>
  <div class='widget-content'>
  <div id='ArchiveList'>

Debajo de <div class='widget-content'> deben colocar:
<div class='expandir1' style='display: none;'>

Luego queda algo así:
<b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'>
    <h2><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;'>  <div id='ArchiveList'>
  <div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
    <b:include cond='data:style == &quot;HIERARCHY&quot;' data='data' name='interval'/>
    <b:include cond='data:style == &quot;FLAT&quot;' data='data' name='flat'/>
    <b:include cond='data:style == &quot;MENU&quot;' data='data' name='menu'/>
  </div>
  </div>
</div>
  <b:include name='quickedit'/>

Arriba de <b:include name='quickedit'/> deben colocar lo siguiente:
<script>$(document).ready(function(){$(&#39;#expandirGadget1&#39;).click(function(){$(&#39;.expandir1&#39;).slideToggle(&quot;slow&quot;)})});</script>
Ahora deben ver en Vista Previa que no haya ningún error y aparezca la flecha al lado del título del gadget.


¡ESO ES TODO!


9 comentarios:

  1. Hola!! ¿Cómo estás?
    Gracias por tus consejos tan útiles! La verdad es que tengo que poner a leerlos bien, para poder aprenderlos y aplicarlos en mi blog.
    Vengo para contarte que te nominé para el Best Blog Book Tag.
    Así que espero que puedas hacerlo.
    Saludos!

    P.D: te dejo el link, así podes verlo.
    http://roarandsmile.blogspot.com.ar/2017/02/2-best-blog-book-tag_20.html

    ResponderEliminar
    Respuestas
    1. ¡Hola! Bien y tú?

      No es nada y sí, son cosas a las que hay que estar atento ya que un mínimo error y se arruina el código.

      Gracias por nominarme ♥

      ¡Saludos!

      Eliminar
  2. ¡Hola! Ay, soy tan mala con esto del diseño que todos los tutoriales son muy bien recibidos. Andaré leyéndolos todos~

    Aprovecho para invitarte a participar del concurso que estoy haciendo en mi blog por los 100 suscriptores:

    http://diariodeunaestudiantedeletras.blogspot.com.ar/2017/02/sorteo-nacional-100-suscriptores.html

    ¡Saludos!

    ResponderEliminar
    Respuestas
    1. ¡Hola! Todo es por ayudarlos un poco <3

      ¡Gracias por invitarme!

      Eliminar
  3. Esto ya es muy complicado para mi pobre cerebro jaja. ME ENCANTAN tus pequeñso tutoriales de blogger <3, he usado más de uno ya.

    ResponderEliminar
  4. ¡Hola!
    Hubo un tiempo en el que me leia cada tutorial que encontraba pero la verdad es que me rendí y puse una plantilla que me parecia bonita. Me gusta como explicas, paso a paso y bastante facil.

    Un beso, gracias.

    ResponderEliminar
  5. Hola Maar!
    Muchísimas gracias por este tutorial, fue la que te lo pidió en el grupo y me quedó bien salvo que cuando hago click no se abre. De todas formas lo intentaré de nuevo :)
    Saludos y muchas gracias por todos tus tutoriales!!

    ResponderEliminar
  6. ¡Hola Maar!
    Que tutorial tan útil. Me gusta la idea de que quien quiera pueda abrir el gadget , o bien dejarlo cerrado para para que no ocupe tanto espacio en la sidebar.
    Algún día me haré tiempo para implementarlo!
    Gracias!
    Abrazos!

    ResponderEliminar
  7. ¡Siempre vienen bien estos tutoriales! Especialmente estos que ayudan a que los gadgets ocupen menos espacio en la página. ¡Gracias por compartirlos! ¡Y saludos!

    ResponderEliminar