Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1508668343
Vida do cache: 1508711543
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

Códigos e Scripts

Titulos de Widgets como lista expansivel na Sidebar

Você já viu como transformar o gadget Marcadores como Menu Expansível.
Vamos ver aqui neste tutorial, como deixar os titulos dos demais gadgets(widgets) como menu expansível.
Se você possui muitos widgets na sidebar do blog e quer aproveitar espaço, há várias maneiras de fazê-lo. Uma boa opção é esconder a lista dos elementos contidos em determinados widgets, mostrando/ocultando estes elementos nos titulos, onde aparecerão somente quando o leitor clicar no titulo de cada widget.

Para dar este efeito basta fazer algumas modificações diretamente no código de cada widgets.

Se você quiser aplicar este recurso em outros Widgets, basta localizar todo o código de acordo com o Titulo que você deu ao seu Widget.
Por exemplo, um Widgets com uma lista de links com nome de “Minhas Músicas”, procure pelo código onde está escrito “Minhas Músicas” e substitua tudo o que estiver contido a partir do trecho <b:includable id=’main’> , até o trecho </b:widget>.
Devendo ficar assim:


<b:widget id='HTML1' locked='false' title='Minhas Músicas' type='HTML'>
<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>

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

Dica: 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.

Agora é só verificar quais elementos tem necessidade de ocultar ou não no seu blog.

Se quiser conferir uma outra maneira de ocultar conteúdo dos gadgets da sidebar, veja este tutorial:
Efeito Revelar/Esconder Conteúdo com JQuery Toggle



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.

5 Comentários

  1. BEM VINDO AO BLOG DE GISOALVES disse:

    Olá clau boa tarde, muito bom esse codgo revelar/esconder, fis o teste e deu certo. Eu gostaria de saber se alguns conteúdo proibido pode ser ocultado, e quem querer ver tinha que deixar o e mail?

    Obrigado.

  2. Rafaela Regis disse:

    Oi Clau! Td bom! adorei a sua dica. mas ela n ta funcionando.. fica o codigo [+/-] mas quando clica n expande! Pode me ajudar?

  3. .:: Clau ::. disse:

    Oi pessoal,
    Esse tutorial foi publicado em 06/10/10 e para eu poder verificar o erro, terei que refazer todos os passos do tutorial, e infelizente, no momento,eu não disponho de tempo para isso.Mas assim que tiver um tempinho eu dou uma verificada.
    Desculpe por não poder ajudar no momento, de qualquer forma agradeço pelo comentário.

  4. BubbleGoth BR disse:

    O código não está funcionando, dá erro ! ajudaaaa!!!!

  5. Capas PT disse:

    ola esse codigo nao ta funcionando

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

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