Lista de Links Expansível

CLASSIFICAÇÃO DO TUTORIAL
AVANÇADO

Aprendi com a Elke no post sobre Menu Expansível como fazer para expandir os menus, aí comecei a fuçar e consegui fazer com que o Título da Sidebar funcionasse como o botão/link para expandir. Assim como está aqui no blog.

Revisando...

1º Coloque este código Java Script no seu blog logo acima da tag </head> senão nenhum menu vai expandir.
<!-- JavaScript Expandir --><br /><style type="'text/css'">.texthidden {display:inline}.shown {display:block}</style><script type="'text/javascript'">document.write('<style>.texthidden {display:none} </style>');</script><script type="'text/Javascript'">function expandcollapse (postid) {whichpost = document.getElementById(postid);if (whichpost.className=="shown") {whichpost.className="texthidden";}else {whichpost.className="shown";}}</script>
Se você leu o tutorial da Elke já deve ter visto que para criar um botão expansível devemos aplicar o código abaixo em uma gadget tipo HTML:
<a href="'javascript:void(0);'" onclick="expandcollapse('favoritos')"><img border="0" src=" Endereço da Imagem que vai servir como botão" /></a><br/><br /><ul id="favoritos" class="texthidden">Endereços dos Links, Texto, Imagem, etc... </ul>

Para que o título da Lista de Links seja o botão expansível, você deve:

1º Configurar o código CSS do Título da Sidebar:

1- Vá em Modelo → Editar HTML.

2 - Colocar em cima do código [ .sidebar h2 { ] estes códigos que indicam que seu título da sidebar é um link.

.sidebar h2 a{
color:$sidebarcolor;
font: $linkfont;
text-decoration:none;
}
.sidebar h2 a:hover{
color:$visitedlinkcolor;
text-decoration:underline;
}

3 - Clique em SALVAR ALTERAÇÕES.

Observações Importantes:
1ª- color:$sidebarcolor;→ Se seu template não tem a variável sidebarcolor pode colocar uma cor, ex #000000=preta, de preferência a cor definida no grupo de códigos do [ .sidebar h2 { ] para ficar igual aos outros títulos das sidebars, porém este vai ser um link.
2ª- color:$visitedlinkcolor;→ Se seu template não tem a variável visitedcolor pode colocar uma cor, ex #018101=verde

2º - Agora você vai → Selecionar a caixinha Expandir Widgets:

Para que uma LISTA DE LINKS seja um botão expansível a partir do seu título encontre a linha com a palavra linklist, use Ctrl+F para encontrar mais rápido, veja o código abaixo:

<b:widget id='LinkList1' locked='false' title='TUTORIAIS' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

1 - Na linha:

<h2><data:title/></h2>

O código <data:title/> deve ser substituído por:

<a href='javascript:void(0);' onclick='expandcollapse("favoritos")'><data:title/></a>

2 - A linha <ul> deve ser substituída por:

<ul id="favoritos" class="texthidden">

3 - Clique em SALVAR ALTERAÇÕES.

IMPORTANTE:
A palavra 'favoritos' deve ser alterada sempre que colocar outro botão expansível e corresponder nas duas linhas a 1ª e a 2ª.
<ul id="_____" class="texthidden">► Esta é a identidade do seu botão expansível e devem iguais para as duas partes do código seu botão não expandirá.
Cada botão Expansível deve ter a sua Identidade.

Exemplo - Clique na figura para ampliar

Não Se Esqueça:
» Essas configurações demandam algum conhecimento em códigos HTML e CSS. Portanto:
♥ Sempre tente antes num blogue de testes.
♥ Salve o seu template antes de começar, clicando em Baixar modelo completo.
♥ Leia o tutorial até o fim e tenha certeza de ter entendido.

Obs: Estou republicando este post atualizado e corrigido, o post original foi publicado em 30/11/07 e foi apagado.