Lista de Links Expansível

CLASSIFICAÇÃO DO TUTORIAL
AVANÇADO

Há muito tempo atrás aprendi 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.

Revisando e Aprendendo como fazer funcionar este Recurso...

→Vá em Modelo » Editar HTML » encontre a tag </head>(Use o Ctrl+F) » Copie e cole este código Java Script no logo acima desta tag senão nenhum menu vai expandir.

<!-- JavaScript Expandir --><style type='text/css'>.texthidden {display:ipostnline}.shown {display:block}</style><script type='text/javascript'>document.write(&#39;<style>.texthidden {display:none} </style>&#39;);</script><script type='text/Javascript'>function expandcollapse (postid) {whichpost = document.getElementById(postid);if (whichpost.className==&quot;shown&quot;) {whichpost.className=&quot;texthidden&quot;;}else {whichpost.className=&quot;shown&quot;;}}</script>

→Clique em Salvar modelo

☺Para criar os botões expansíveis devemos sempre aplicar o código abaixo seja em uma gadget tipo HTML ou da forma que vou ensinar agora:

<a href="javascript:void(0);" onclick="expandcollapse('BT1')"><img border="0" src="URLImagemBotão"/></a>
<ul id="BT1" class="texthidden">
<li><a href="Link1" target="_blank"> Link1 </a></li>
<li><a href="Link2" target="_blank"> Link2 </a></li>
<li><a href="Link3" target="_blank"> Link3 </a></li>
</ul>
<br/>

»Podendo trocar a Imagem do Buttom/Menu <img border="0" src="URLImagemBotão"/> por Palavras ou Botões CSS

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

Criar a lista de links em seu blog

Vá em Layout » Clique em Adicionar um Gadget » Procure por Lista de Links e Clique para adicionar » Coloque os Links que Deseja e siga para o próximo passo

 

Agora Você vai configurar o Título da Lista de Links para Expandir

Você tem 2 opções:
1º - Título da lista de links como link expansível;
2º - Colocar uma Imagem no título da lista de links para expandir.

1º - Título da lista de links como link expansível

Vá em Modelo → Editar HTML → Clique na caixinha Expandir Widgets.
Para que apenas o TÍTULO da LISTA DE LINKS seja um botão expansível encontre a linha com a palavra [linklist], use Ctrl+F para encontrar mais rápido, veja o código abaixo:

<b:widget id='LinkList2' locked='false' title='Hacks Blogger do TPV' 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>

→Observe que no código do exemplo acima a lista de links que escolhi é a [LinkList2] porque já tinha outra lista de links no blog e eu pretendo expandir somente esta com o Título: 'Hacks Blogger no TPV [+/-]' → Veja no Demoplate

FIQUE ATENTO A ESTE DETALHE!

Continuando...
1 - Na linha:

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

A tag <data:title/> deve ser substituída por:

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

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

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

3 - Clique em Salvar modelo.

MUITO IMPORTANTE:

► A palavra 'hacks' deve ser alterada para o nome da lista de links ou uma palavra do título da lista de links como fiz no exemplo.
E sempre corresponder nas duas linhas a 1ª e a 2ª.

Na tag <ul id="_____" class="texthidden">► [id] É a identidade do seu botão expansível e deve ser igual para as duas partes do código senão seu botão não expandirá.

►Cada botão Expansível deve ter a sua Identidade.
Exemplo - Clique na figura para ampliar

Você pode colocar no título da sua lista de links o símbolo [▼] mostrando que esta gadget é expansível. Veja→ Símbolos - Atalhos do Teclado

Configurando o CSS do Título da Sidebar:

Se você não deseja que o título da sidebar seja uma imagem deve configurar para que ele se comporte como um link.
→Encontre a linha [ .sidebar h2 { ] cole as linhas abaixo acima desta linha do sidebar h2:

.sidebar h2 a{
color:$sidebarcolor;/*cor do link*/
text-decoration:none;
}
.sidebar h2 a:hover{
color:$visitedlinkcolor;
text-decoration:underline;
}

→ Estes códigos vão configurar o Título da sidebar como um link para expandir.
3 - Clique em Salvar modelo.

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.
[Veja: »Como identificar cores]
2ª- color:$visitedlinkcolor;→ Se seu template não tem a variável $visitedcolor pode colocar uma cor, ex #018101=verde.

2º - Colocar uma Imagem no título da lista de links para expandir

O procedimento é o mesmo que o 1º passo:
Vá em Modelo → Editar HTML → Clique na caixinha Expandir Widgets.
Encontre a linha com o título da linklist que você criou usando o Ctrl+F.
Neste caso minha lista de links tinha o título de Blogs. Estas são as linhas da widget da linklist:

<b:widget id='LinkList1' locked='false' title='Blogs' 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' rel='nofollow=' target='_blank'><data:link.name/></a></li>
     </b:loop>
   </ul>
   <b:include name='quickedit'/>
 </div>
</b:includable>
</b:widget>

→Observe que no código do exemplo acima a lista de links que escolhi é a [LinkList1]

1 - Na linha:

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

A tag <data:title/> deve ser substituída por:

<a href='javascript:void(0);' onclick='expandcollapse("Blogs")'><img border="0" src="URL da Imagem que vai servir como botão" /></a>

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

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

O seu código ficará assim:

<b:widget id='LinkList1' locked='false' title='Blogs' type='LinkList'>
<b:includable id='main'>

<b:if cond='data:title'>
<h2><a href='javascript:void(0);' onclick='expandcollapse("Blogs")'><img border="0" src="URL da Imagem que vai servir como botão" /></a></h2>
</b:if>
 <div class='widget-content'>
   <ul id="Blogs" class="texthidden">
     <b:loop values='data:links' var='link'>
       <li><a expr:href='data:link.target' rel='nofollow=' target='_blank'><data:link.name/></a></li>
     </b:loop>
   </ul>
   <b:include name='quickedit'/>
 </div>
</b:includable>
</b:widget>

3 - Clique em Salvar modelo.

Importante:

Na tag <ul id="_____" class="texthidden">► [id] É a identidade do seu botão expansível e deve ser igual para as duas partes do código senão seu botão não expandirá.
» No Exemplo acima usei a id="Blogs" e a imagem no Site de Demonstração: Demoplate é esta:

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.

Post Atualizado em 06/07/2014

NÃO Retire os Créditos!
NÃO é Permitido redistribuir os templates ou os tutoriais/hacks do TPV sem a prévia autorização de sua Autora.

Observação: Este hack se aplica aos templates da plataforma Blogger 2006. Ainda não testei nos templates do Blogger a partir de 2010. Assim que testar e conseguir fazer funcionar prometo postar aqui no TPV.