Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Tutoriais Blogger Vanessa S.

Marcadores como Menu Expansível

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")



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

| Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Desculpe, os comentários deste artigo estão encerrados.

1 Comentário

  1. Denise disse:

    Valeeeeu!
    Super bem explicado, simples, até Euzinha consegui!!
    Obrigada!

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.