» Códigos, Dicas, Templates, Tutoriais para deixar o seu blog do seu jeito!

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.
Lista de Links Expansível Lista de Links Expansível Reviewed by Áurea on 7/06/2014 Rating: 5

3 comentários:

  1. Ola! eu so queria conseguir que a minha lista de posts dos anos anteriores ficasse expandida o tempo todo (como a lista de 2009) sem que o usuario tivesse que clicar pra abrir a lista que mostra os meses e os titulos das postagens.

    Mas nao encontro!

    Vc pode me ajudar?

    ResponderExcluir
  2. gostei deste tutorial vou usar no meu logo mais, pois tenho umas ideias que teu Menu Expansível vai ser bem util. obrigado.

    ResponderExcluir
  3. Muito obrigada!
    Antes mesmo de você postar sobre a imagem, eu já tinha descoberto dentro do código onde mudava pra exibir a imagem no título. Adorei, o efeito ficou super legal, vou fazer em todos os meus blogs assim que tiver um tempinho ^^ Bjks

    ResponderExcluir

Todos os comentários são lidos e moderados antes da publicação.
Para que seu comentário seja publicado leia a Política de Comentários do Blog no post Regras do Blog

Tecnologia do Blogger.