Botões Expansíveis no Seu Blog
Autor: Aurea R C | Publicado: 2014-07-14T20:38:00-03:00


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 &lt;/head&gt; 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.
&lt;!-- JavaScript Expandir --&gt;&lt;style type="text/css"&gt;.texthidden {display:inline}.shown {display:block}&lt;/style&gt;&lt;script type="text/javascript"&gt;document.write('&lt;style&gt;.texthidden {display:none} &lt;/style&gt;');&lt;/script&gt;&lt;script type="text/Javascript"&gt;function expandcollapse (postid) {whichpost = document.getElementById(postid);if (whichpost.className=="shown") {whichpost.className="texthidden";}else {whichpost.className="shown";}}&lt;/script&gt;

Como fazer?
Em Editar HTML » Encontre a tag &lt;/head&gt; (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:
&lt;a href="javascript:void(0);" onclick="expandcollapse('Botao1')"&gt;&lt;img border="0" src="URLImagemBotão"/&gt;&lt;/a&gt;
&lt;ul id="Botao1" class="texthidden"&gt;
&lt;li&gt;&lt;a href="Link1" target="_blank"&gt; Titulo_Link1 &lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="Link2" target="_blank"&gt; Titulo_Link2 &lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="Link3" target="_blank"&gt; Titulo_Link3 &lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;br/&gt;

Entendendo o Código:
♥&nbsp;Veja a linha: [ &lt;a href="javascript:void(0);" onclick="expandcollapse('Botao1')"&gt;&lt;img border="0" src="URLImagemBotão"/&gt;&lt;/a&gt; ]

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

♥ A tag&nbsp;&lt;br/&gt; 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:
&lt;a href="javascript:void(0);" onclick="expandcollapse('Botao1')"&gt;&lt;img border="0" src="http://i59.tinypic.com/2rw1dox.jpg"/&gt;
&lt;/a&gt;
&lt;ul id="Botao1" class="texthidden"&gt;
&lt;li&gt;&lt;a href="Link1" target="_blank"&gt; Link1 &lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="Link2" target="_blank"&gt; Link2 &lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="Link3" target="_blank"&gt; Link3 &lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;a href="javascript:void(0);" onclick="expandcollapse('IMV')"&gt;&lt;img border="0" src="http://i62.tinypic.com/24or0vm.jpg"/&gt;
&lt;/a&gt;
&lt;ul id="IMV" class="texthidden"&gt;
&lt;li&gt;&lt;a href="http://xuxxu.blogspot.com/2014/07/imagens-de-botoes-para-menus-e-banners-gratis-free.html" target="_blank"&gt; 10 Links com Imagens de Botões para Menus e Banners Grátis &lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="http://xuxxu.blogspot.com.br/2008/06/botes-para-links.html" target="_blank"&gt; Botões para Links &lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="http://xuxxu.blogspot.com/2008/04/alguns-buttons.html " target="_blank"&gt; Alguns Buttons &lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;a href="javascript:void(0);" onclick="expandcollapse('TPV')"&gt;&lt;img border="0" style="border:0" src="http://i57.tinypic.com/2m61p2d.jpg"/&gt;
&lt;/a&gt;
&lt;ul id="TPV" class="texthidden"&gt;
&lt;li&gt;&lt;a href="http://www.templatesparavoce.com/2008/12/gadget-da-lista-de-links-expansivel.html" target="_blank"&gt; Lista de Links Expansível &lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="http://www.templatesparavoce.com/2008/12/marcadores-que-expandem.html" target="_blank"&gt; Marcadores que Expandem &lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
♦ Veja que hospedei as imagens dos botões no site Tinypic&nbsp;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Ê&nbsp; 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*/ &lt;style type="text/css"&gt;
.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;}
&lt;/style&gt;/*Fim codigo CSS*/

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

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

.i2Style{ font:bold 12px Arial, Helvetica, sans-serif; font-style:normal;
color:#fff; background:#2288BB; 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 { background: url(http://i25.tinypic.com/2v31vsn.jpg) no-repeat left;/*img-flecha*/ 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;}




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&nbsp;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!