Para ter um menu que se expande, como este acima, copie o código abaixo, vá até o HTML do seu blog, procure pelo código
<head>
e abaixo dele, cole o próximo código.
<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>
<style type='text/css'>
#dolphincontainer{position:relative;height:43px;color:#f06214;background:#ffffff;
width:100%;font-family:Helvetica,Arial,Verdana,sans-serif;}
#dolphinnav{position:relative;height:34px;font-size:12px;text-transform:uppercase;
font-weight:bold;background:#F06214 url() repeat-x bottom left;
padding:0 0 0 20px;}
#dolphinnav ul{margin:0;padding:0;list-style-type:none;width:auto;float:left;}
#dolphinnav ul li{display:block;float:left;margin:0 1px;}
#dolphinnav ul li a{display:block;float:left;color:#ffffff;text-decoration:none;
padding:0 0 0 20px;height:33px;}
#dolphinnav ul li a span{padding:12px 20px 0 0;height:21px;float:left;}
#dolphinnav ul li a:hover{color:#000000;
background:transparent url() repeat-x bottom left;}
#dolphinnav ul li a:hover span{display:block;width:auto;cursor:pointer;}
#dolphinnav ul li a.current,#dolphinnav ul li a.current:hover{color:#FCD9B6;
background:#ffffff url() no-repeat top left;line-height:275%;}
#dolphinnav ul li a.current span{display:block;padding:0 18px 0 0;width:auto;
background:#805E5E url() no-repeat top right;height:33px;}
</style>
Salve.
Agora vá em layout,
Clique em "Adicionar um Gadget"
Clique então em HTML/Javascript
E cole o código abaixo, inserindo os links nos locais indicados.
<a href="javascript:void(0);" onclick="expandcollapse('lista de link 1')"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrz0lBn_09WoPjH3uQGF8ENjTFaegc0wR-HT8RzRRWcgjtm8oopw8XLVcm7rHypVB2tDQ7KyE1GfFmNFHNRMe5vUs1bi6mhqPtcVsb1Wp218bs1fLOJUEhejTzTlc-VjDo7QuYmeROAsnZ/s1600/lista+de+links+1.png"/></a><br/>
<ul id="lista de link 1" class="texthidden">
<li><a href="http://endereço.com/" target="_blank">Escreva aqui o nome do blog</a></li>
<li><a href="http://endereço.com/" target="_blank">Escreva aqui o nome do blog</a></li>
<li><a href="http://endereço.com/" target="_blank">Escreva aqui o nome do blog</a></li>
<li><a href="http://endereço.com/" target="_blank">Escreva aqui o nome do blog</a></li>
</ul>
<a href="javascript:void(0);" onclick="expandcollapse('lista de link 2')"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyQLo4i5e5VI3ujH47pYc99XojniN1sm-RIIuxvOwLCuCzAICbXCxP6a36E0OI_pGwTN_S3jTFHXi82ijSP68dh2Qz_s18w3cwlBC4pDJv7uum-Jk-oylkvBD4opdgyfKyqbIAFAUsTGjj/s1600/lista+delink+2.png"/></a><br/>
<ul id="lista de link 2" class="texthidden">
<li><a href="http://templateseacessorios.blogspot.com" target="_blank">Templates & Acessórios </a></li>
<li><a href="http://endereço.com/" target="_blank">Escreva aqui o nome do blog</a></li>
<li><a href="http://endereço.com/" target="_blank">Escreva aqui o nome do blog</a></li>
<li><a href="http://endereço.com/" target="_blank">Escreva aqui o nome do blog</a></li>
<li><a href="http://endereço.com/" target="_blank">Escreva aqui o nome do blog</a></li>
</ul>
<a href="javascript:void(0);" onclick="expandcollapse('lista de link 3')"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOn1IBqjl4d-Cna1dQggbmgu435rlFj_g0dniMz8c1A_LkF-ZSdcDhEPUNSVkUAL2PhR3SKeJ4H6wL5JYgNi83gu-I74ppt0YR3yUGb3rsa5rLkXh9gMxwz1KujLBrNl-8lVqQYUIdz1CA/s1600/lista+delink+3.png"/></a><br/>
<ul id="lista de link 3" class="texthidden">
<li><a href="http://endereço.com/" target="_blank">Escreva aqui o nome do blog</a></li>
<li><a href="http://endereço.com/" target="_blank">Escreva aqui o nome do blog</a></li>
<li><a href="http://endereço.com/" target="_blank">Escreva aqui o nome do blog</a></li>
<li><a href="http://endereço.com/" target="_blank">Escreva aqui o nome do blog</a></li>
<li><a href="http://endereço.com/" target="_blank">Escreva aqui o nome do blog</a></li>
</ul>
<a href="javascript:void(0);" onclick="expandcollapse('lista de link 4')"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNTg0RlcDBZd2yVX338Bc3L-0gdhyphenhyphentJngyAYxkx4GiIYUZKqlzx-QyzNatmW4lT7fEOTeFKhFtZRsQQEcqIWrhLEISbKX0UKJzkobdXv5xfkChlcjHf4ikEkt0-IWATAFeDEux-8IO0z1h/s1600/lista+delink+4.png"/></a><br/>
<ul id="lista de link 4" class="texthidden">
<li><a href="http://endereço.com/" target="_blank">Escreva aqui o nome do blog</a></li>
<li><a href="http://endereço.com/" target="_blank">Escreva aqui o nome do blog</a></li>
<li><a href="http://endereço.com/" target="_blank">Escreva aqui o nome do blog</a></li>
<li><a href="http://endereço.com/" target="_blank">Escreva aqui o nome do blog</a></li>
<li><a href="http://endereço.com/" target="_blank">Escreva aqui o nome do blog</a></li>
</ul>
<a href="javascript:void(0);" onclick="expandcollapse('lista de links 5')"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN5pcPgI2x5ele1xejnQAPqrBTTgmwnyH361cML2nX6CXQ1jM4QWUjxKjNIlirXpXDocT5yhcA19BGA-rxGk91rDzUEcz75q1YVwUyrvNMAHp6Zxk6RcLzZ32f37HNtiw_cPDu18OPtZR-/s1600/lista+de+link+5.png"/></a><br/>
<ul id="lista de links 5" class="texthidden">
<li><a href="http://endereçodofcebook.com" target="_blank">Facebook</a></li>
<li><a href="http://endereçodotwittercom" target="_blank">Twitter</a></li>
<li><a href="mailto:endereçodoseuemail@seuservidor.com" target="_blank">Email</a></li>
</ul>
No código acima é perceptível uma variedade de cores, fiz isso para facilitar para vocês.
Azul-------------------Código do endereço dos botões, troque-os se forde seu agrado.
Vermelho-------------Código para a troca de endereço dos links
Rosa-----------------Código que é a chave para abrir o menu, não precisa mexer senão quiser
Laranja--------------Código dos nomes dos links
Abaixo 4 modelos de boões, caso prefira colocar sua inscrição:
Eu adorei, e estou testando em meu blog de teste. Eu usaria mais em posts. E percebi que cada post o id ñ pode ter o mesmo nome do id anterior. E tbm percebi que se fecha com a tag [/ul] Ms eu não gostaria de usar a tag [ul] pois deixa o formato estranho, tem como ñ usar o ul?
ResponderExcluirHe he he he....funcionou beleza e nao saco nada de programação, estou aposentado e fico o tempo todo fuxicando esse negócio de blog.
ResponderExcluirObrigado pela dica, assinarei com prazer seu blog.
Um Abraço
Olá querida... legal esse tuto, mas eu queria saber como faço pra colocar menu expansivo na minha navbar (menu horizontal) já existente em meu template.
ResponderExcluirSe puder me ajudar ficarei grata!
BjOs^^
Como eu coloco essa setinha ao lado dos comentarios
ResponderExcluirQuando cliquei no link aqui foi para o WordPress e não apareceu ninhem código!
ResponderExcluirOi Niker, depois demais de ano, atualizei o código. Abraços.
Excluirmuito bom obrigada ajudou pra caramba!
ResponderExcluir\m/
ResponderExcluirOi Zaraki, acabei de atualizar o código. Obrigada pelo aviso. Abraços.
ResponderExcluir