Menú de etiquetas (expandir y contraer)

Una sencilla manera de mostrar las etiquetas en nuestra sidebar de forma que no ocupen casi espacio.
Será muy útil para aquellos que tienen en su blog aplicado un número excesivo de etiquetas, ya que solo se mostrará el título del elemento con el símbolo [+/-] delante y una vez se pinche en este símbolo, las etiquetas aparecerán expandidas debajo hasta que, volviendo a pinchar en el símbolo, se oculten de nuevo.



[Paso 1] En la pestaña de Diseño - Edición Html, localizamos el código del elemento "Etiquetas" sin expandir la plantilla de artilugios:

<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>

[Paso 2] Sustituimos esa línea por este código:

<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>
<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="#" 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:5px;">');
//]]>
</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:labels' var='label'>
<li>

<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
</li>
</b:loop>
</ul>

<script type='text/javascript'>
//<![CDATA[
document.write('<\/div>');
//]]>
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

[Paso 3] Comprobar en "Vista Previa" y si todo está correcto "Guardar Cambios".