Marcadores como Menu Expansível

• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn

Você já viu várias maneiras de personalizar o gadget de Marcadores no seu blog.
Vamos ver aqui neste tutorial, como deixar os marcadores como um menu expansível, onde você pode esconder as tags contidas nos marcadores, mostrando/ocultando a lista de categorias, onde aparecerão somente quando o leitor clicar no titulo “Marcador”.

Para ativar este recurso, as alterações devem ser feitas através de modificações realizadas diretamente no código do seu template.
Entre na edição HTML do seu template, clique em “Expandir modelos de widgets” e procure pelo código do Widget de Marcadores:

<b:widget id='Label1' locked='false' title='Marcadores' type='Label'><b:includable id='main'><b:if cond='data:title'><h2><data:title/></h2></b:if><div class='widget-content'><ul><b:loop values='data:labels' var='label'><li><b:if cond='data:blog.url == data:label.url'><span expr:dir='data:blog.languageDirection'><data:label.name/></span><b:else/><a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a></b:if><span dir='ltr'>(<data:label.count/>)</span></li></b:loop></ul><b:include name='quickedit'/></div></b:includable></b:widget>

E SUBSTITUA todo ele por:

<b:widget id='Label1' locked='false' title='Marcadores' 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>

Vá visualizando e ajustando os valores de 'margin'contidos neste trecho: style="float:left;margin-right:5px; até ficar de acordo com o que deseja.
Salve as modificações.

Se quiser aplicar este mesmo efeito aos demais widgets contidos na sidebar, siga este tutorial:
Titulos de Widgets na sidebar como lista expansível

Visualize o demo deste efeito de "marcadores como menu expansível" neste blog de testes.(Veja o Titulo "Marcadores 2")

• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn