Botões Expansíveis no Seu Blog

CLASSIFICAÇÃO DO TUTORIAL
INTERMEDIÁRIO

Este hack é bem fácil e antigo.
Acho útil porque não exige um código javascript muito longo nem a necessidade de usar o JQuery para ser aplicado, além de ser bem simples.

Eu já havia postado sobre este hack aqui no TPV em 2008 indicando um post da minha colega Elke do Templates e Acessórios.
Mas resolvi fazer um post ensinando-o com mais detalhes para você entender melhor o que está fazendo em seu blog.

Utilizo este hack na página Links Úteis do meu outro blog o Farmacêutico Digital

Mesmo assim sugiro que antes de aplicar qualquer hack em seu blog SEMPRE faça o teste em um Blog de Testes.

É fácil, rápido e grátis ter um blog de testes. Assim você não corre o risco de ter problemas em seu blog principal, nem perder visitas.

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: Fazer backup/Restaurar ♥ Leia o tutorial até o fim e tenha certeza de ter entendido.

1º Passo: Aplicar o Javascript dos Botões Expansíveis

Entre no seu blog: Vá em Modelo → Editar HTML

Se não souber como fazer:»Leia:Como Acessar o Editor de HTML do Blog e Ativar o Search

Copie o código Javascript e cole abaixo da tag </head> do seu blog, ou seja, já deixe o código Java dentro do html do seu blog e quando quiser usar os botões expansíveis em gadgets HTML não precisará acrescentar esta parte dos códigos.

<!-- JavaScript Expandir --><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>

Como fazer?

Em Editar HTML » Encontre a tag </head> (Use Ctrl+F) » Cole o código Javascript logo abaixo desta tag » Clique em Salvar modelo

2º Passo: Criando o Menu Expansível em um Gadget HTML

Neste passo você tem 2 opções:

1- Criar o Menu Expansível usando Imagens como Botões

Vá em Layout » Clique em Adicionar um Gadget no Local onde deseja » Escolha o Gadget HTML e Cole o código abaixo:

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

Entendendo o Código:

♥ Veja a linha: [ <a href="javascript:void(0);" onclick="expandcollapse('Botao1')"><img border="0" src="URLImagemBotão"/></a> ]

• Em "URLImagemBotão" você deverá colar URL da imagem do botão que criou para o seu menu expansível.
• Em: [ <a href="javascript:void(0);" onclick="expandcollapse('Botao1')"> ] → O nome Botao1 deve corresponder ao mesmo na lista de links definida por: [ <ul id="Botao1" class="texthidden"> ]

♥ A tag <br/> significa o espaço de uma linha de uma imagem para outra, se você achar que os botões ficaram muito longe um do outro pode apagar esta tag.

» Assim, para cada botão deve-se colocar uma definição diferente veja o exemplo abaixo:

• Link1
• Link2
• Link3

• 10 Links com Imagens de Botões para Menus e Banners Grátis
• Botões para Links
• Alguns Buttons

• Lista de Links Expansível
• Marcadores que Expandem

O Código do menu acima ficou assim:

<a href="javascript:void(0);" onclick="expandcollapse('Botao1')"><img border="0" src="http://i59.tinypic.com/2rw1dox.jpg"/>
</a>
<ul id="Botao1" 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>
<a href="javascript:void(0);" onclick="expandcollapse('IMV')"><img border="0" src="http://i62.tinypic.com/24or0vm.jpg"/>
</a>
<ul id="IMV" class="texthidden">
<li><a href="http://xuxxu.blogspot.com/2014/07/imagens-de-botoes-para-menus-e-banners-gratis-free.html" target="_blank"> 10 Links com Imagens de Botões para Menus e Banners Grátis </a></li>
<li><a href="http://xuxxu.blogspot.com.br/2008/06/botes-para-links.html" target="_blank"> Botões para Links </a></li>
<li><a href="http://xuxxu.blogspot.com/2008/04/alguns-buttons.html " target="_blank"> Alguns Buttons </a></li>
</ul>
<a href="javascript:void(0);" onclick="expandcollapse('TPV')"><img border="0" style="border:0" src="http://i57.tinypic.com/2m61p2d.jpg"/>
</a>
<ul id="TPV" class="texthidden">
<li><a href="http://www.templatesparavoce.com/2008/12/gadget-da-lista-de-links-expansivel.html" target="_blank"> Lista de Links Expansível </a></li>
<li><a href="http://www.templatesparavoce.com/2008/12/marcadores-que-expandem.html" target="_blank"> Marcadores que Expandem </a></li>
</ul>

♦ Veja que hospedei as imagens dos botões no site Tinypic e para cada botão expansível usei uma definição diferente Botao1, IMV e TPV. → É muito importante que você preste atenção a estes detalhes para que cada botão expanda a sua lista de links ou texto correspondente.

♦ Veja este menu expansível funcionando no Demoplate 2010-2

»Confira no post : [10 Links com Imagens de Botões para Menus e Banners Grátis] do Imagens para VOCÊ  9 links de imagens de botões para o seu Menu e um link com um Botão Expansível que tem sites onde você pode criar botões em CSS.

2- Criar o Menu Expansível usando CSS para os Botões.

Vá em Layout » Clique em Adicionar um Gadget no Local onde deseja » Escolha o Gadget HTML e Cole o código abaixo:

/*Codigo CSS*/ <style type="text/css">
.i2Style{
font:bold 12px Arial, Helvetica, sans-serif;
font-style:normal;
color:#fff;
background:#2288BB;/*Cor do fundo do Botão*/
border:0px solid #ffffff;
text-shadow:1px 1px 2px #333;
box-shadow:0px 0px 3px #000000;
-moz-box-shadow:0px 0px 3px #000000;
-webkit-box-shadow:0px 0px 3px #000000;
border-radius:8px 8px 8px 8px;
-moz-border-radius:8px 8px 8px 8px;
-webkit-border-radius:8px 8px 8px 8px;
width:130px;
padding:8px 16px;
cursor:pointer;
margin:5px 5px 0px 5px;
}
.i2Style:active{
cursor:pointer;
position:relative;
top:2px;
}
.shown ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.shown li {
margin:5px 0; border-bottom:1px dotted #cccccc; 
padding:0 0 2px 23px;
line-height:1.0em; list-style:none;
}
.shown li a {color:#5588aa;}
</style>/*Fim codigo CSS*/

<a href="javascript:void(0);" onclick="expandcollapse('Botao1')">
<div class="i2Style">Título_Botão1</div></a>
<ul id="Botao1" class="texthidden">
<li><a href="Link1" target="_blank"> Titulo_Link1 </a></li>
<li><a href="Link2" target="_blank"> Titulo_Link2 </a></li>
<li><a href="Link3" target="_blank"> Titulo_Link3 </a></li>
</ul>
<br/>
<a href="javascript:void(0);" onclick="expandcollapse('Botao2')">
<div class="i2Style">Título_Botão2</div></a>
<ul id="Botao2" class="texthidden">
<li><a href="Link1" target="_blank"> Titulo_Link1 </a></li>
<li><a href="Link2" target="_blank"> Titulo_Link2 </a></li>
<li><a href="Link3" target="_blank"> Titulo_Link3 </a></li>
</ul>
<br/>

» Coloquei um botão expansível ▼ aqui no post para você ver como fica este estilo CSS acima.

Meus Blogs ッ

• Templates para VOCÊ
• Farmacêutico Digital
• Imagens para VOCÊ

» Veja o menu Expansível com os Botões em CSS funcionando no Demoplate 2006-2

OBSERVAÇÃO IMPORTANTE

O código CSS do botão que sugeri de exemplo foi criado no site i2style.
» Você pode entrar neste site ou em outros como sugiro aqui abaixo▼ e criar o seu modelo de botão CSS e substituir o /*Código CSS*/ do seu menu expansível pelo que quiser.

• Online Button Generator
• i2style
• Online Menu Generator
• Geradores de CSS e CSS3

Gosto muito deste hack por ser de fácil implantação e ser uma ótima opção de economia de espaço no blog.
Espero que você goste e aplique em seu blog!