CLASSIFICACAO DO TUTORIALINTERMEDIARIOEste hack e bem facil e antigo.Acho util porque nao exige um codigo javascript muito longo nem a necessidade de usar o JQuery para ser aplicado, alem de ser bem simples.Eu ja havia postado sobre este hack aqui no TPV em 2008 indicando um post da minha colega Elke do Templates e Acessorios.Mas resolvi fazer um post ensinando-o com mais detalhes para voce entender melhor o que esta fazendo em seu blog.Utilizo este hack na pagina Links Uteis do meu outro blog o Farmaceutico DigitalMesmo assim sugiro que antes de aplicar qualquer hack em seu blog SEMPRE faca o teste em um Blog de Testes.E facil, rapido e gratis ter um blog de testes. Assim voce nao corre o risco de ter problemas em seu blog principal, nem perder visitas. Nao Se Esqueca: Essas configuracoes demandam algum conhecimento em codigos HTML e CSS. Portanto: Sempre tente antes num blogue de testes. Salve o seu template antes de comecar, clicando em: Fazer backup/Restaurar Leia o tutorial ate o fim e tenha certeza de ter entendido.1o Passo: Aplicar o Javascript dos Botoes ExpansiveisEntre no seu blog: Va em Modelo Editar HTMLSe nao souber como fazer:Leia:Como Acessar o Editor de HTML do Blog e Ativar o SearchCopie o codigo Javascript e cole abaixo da tag </head> do seu blog, ou seja, ja deixe o codigo Java dentro do html do seu blog e quando quiser usar os botoes expansiveis em gadgets HTML nao precisara acrescentar esta parte dos codigos.<!-- 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 codigo Javascript logo abaixo desta tag Clique em Salvar modelo2o Passo: Criando o Menu Expansivel em um Gadget HTMLNeste passo voce tem 2 opcoes:1- Criar o Menu Expansivel usando Imagens como BotoesVa em Layout Clique em Adicionar um Gadget no Local onde deseja Escolha o Gadget HTML e Cole o codigo abaixo:<a href="javascript:void(0);" onclick="expandcollapse('Botao1')"><img border="0" src="URLImagemBotao"/></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 Codigo: Veja a linha: [ <a href="javascript:void(0);" onclick="expandcollapse('Botao1')"><img border="0" src="URLImagemBotao"/></a> ]Em "URLImagemBotao" voce devera colar URL da imagem do botao que criou para o seu menu expansivel.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 espaco de uma linha de uma imagem para outra, se voce achar que os botoes ficaram muito longe um do outro pode apagar esta tag. Assim, para cada botao deve-se colocar uma definicao diferente veja o exemplo abaixo: Link1 Link2 Link3 10 Links com Imagens de Botoes para Menus e Banners Gratis Botoes para Links Alguns Buttons Lista de Links Expansivel Marcadores que Expandem O Codigo 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 Botoes para Menus e Banners Gratis </a></li><li><a