Expandir y contraer un gadget

Para maximizar el espacio de nuestra barra lateral o de nuestro footer, podemos utilizar este sencillo truco, pero muy práctico.

Algunas consideraciones a tener en cuenta es que en las plantillas de blogger funciona normalmente, pero en algunas plantillas que solemos descargar de sitios que las ofrecen gratis puede que se superpongan los gadgets si le haces el truco a dos consecutivos. Te aconsejo que, si tienes una plantilla ajena a blogger, expandas solamente el gadget que se encuentre ubicado al final, es decir, debajo de los demás, como lo he hecho yo en Taller literario

Para ver una demo de cómo funciona en las plantillas de blogger puedes entrar a mi blog de pruebas

Empecemos

En primer lugar debes identificar la línea del gadget que quieras expandir. Utiliza CTRL + F y busca el nombre de tu gadget (en el ejemplo Enlaces). Para esto está claro que el gadget debe tener un nombre, así que si no lo tiene colócaselo.

Luego deberás completar el código agregando donde corresponda lo que está en color

<b:widget id='LinkList1' locked='false' title='Enlaces' type='LinkList'>

<b:includable id='main'>

<script type='text/javascript'>

//<![CDATA[

if(typeof(rnd) == 'undefined') var rnd = '';

rnd = Math.floor(Math.random()*1000);

rnd = 'id-' + rnd;

document.write('<a href="javascript:void(0)" onclick="tmp = 
document.getElementById(&quot;' + rnd + '&quot;); 
tmp.style.display = (tmp.style.display == &quot;none&quot;) ? 
&quot;block&quot; : &quot;none&quot;; return false;" 
style="float:left;margin-right:6px;">');

//]]>

</script>[+/-]

<script type='text/javascript'>

//<![CDATA[

document.write('<\/a>');

//]]>

</script>



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

 <div class='widget-content'>

<script type='text/javascript'>

//<![CDATA[

document.write('<div id="' + rnd + '" style="display:none;">');

//]]>

</script>

   <ul>

     <b:loop values='data:links' var='link'>

       <li><a expr:href='data:link.target'><data:link.name/></a></li>

     </b:loop>

   </ul>

   <b:include name='quickedit'/>

 </div>

</b:includable>

</b:widget> 

Lo que está en color azul es el símbolo que se verá. Si deseas otra imagen, debes sustituir eso por esta línea

<img src="AQUI LA URL DE LA IMAGEN"/>

FUENTE: lA TRUCOTECA DE BLOGS