Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1508408623
Vida do cache: 1508451823
Status: 1
Mensagem: Centive nao respondeu
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

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

Hospedagem - 728 x 90

Tutoriais Blogger

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.

Sobre o autor | 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.

1 Comentário

  1. Denise disse:

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

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

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