Códigos e Scripts Vanessa S.
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("' + rnd + '"); tmp.style.display = (tmp.style.display == "none") ? "block" : "none"; 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
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.
Oi Clau! Td bom! adorei a sua dica. mas ela n ta funcionando.. fica o codigo [+/-] mas quando clica n expande! Pode me ajudar?
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.
O código não está funcionando, dá erro ! ajudaaaa!!!!
ola esse codigo nao ta funcionando