Menu para Blog: Colocar Menu Accordion (Sanfona) Vertical no Blog
Veja como criar um menu Accordion no seu blog usando HTML e CSS. Você poderá criar diversos efeitos e combinações de cores para personalizar o menu sanfona (menu Accordion) no seu site ou blog. Outra vantagem deste tipo de menu é que poupa espaço no seu template permitindo colocar vários links que só aparecem ao clicar no menu, ou seja, praticamente a mesma coisa que colocar um submenu no blog.
No Blogger entre na pagina layout > Adicionar Gadget > html/javascript e cole o código:
Para modificar as cores das letras, cor de fundo, tamanho e tipo da fonte que usamos no menu precisamos alterar alguns estilos CSS, logo abaixo temos alguns links com ajuda sobre CSS para ajudá-lo a personalizar seu menu:
Como Formatar Texto do Blog: Mudar Cor, Tamanho e Tipo das Letras
Gerador de Código HTML das Cores
O que é CSS? Para que Serve e Como usar o CSS
Agora veja o que e como mudar a aparência do menu:
li.title
li.title a
Nestes dois estilos acima podemos alterar a aparência dos botões principais do menu (aparência do menu quando está totalmente fechado). Então modifique a cor de fundo ou das letras, tipo e tamanho das fontes. Lembrando que color:#... é a cor da fonte e background-color:#.... é a cor de fundo. Se precisar ajuda para formatar o texto veja os links que mencionamos anteriormente com dicas de CSS.
.downlistie li - cor de fundo dos botões do submenu (itens ocultos no menu accordion)
.downlistie li:hover - cor de fundo dos botões do submenu quando o mouse está sobre eles
.downlistie li a - estilo das letras dos itens ocultos do menu
.downlistie li a:hover - estilo das letras quando o mouse está sobre o item
Como você pode ver esses 4 estilos CSS que descrevemos acima controlam os botões que aparecem quando clicamos em algum item do menu sanfona, portanto faça seus testes para achar as cores e fontes que mais combinam com o layout do seu blog. Veja outras dicas para criar efeitos em links:
Efeitos em Links Usando Gifs Animados como Imagens de Fundo
Como Colocar Efeito Arco-Íris nos Links do Blog
Embora seja um código longo ele se repete varias vezes para criar cada item do menu e submenu (menu accordion), então para editar os links do menu recomendamos que faça por partes e salve as alterações a cada trecho que terminar de editar assim não correrá o risco de perder seu trabalho.
O trecho a seguir é repetido varias vezes apenas trocando os nomes dos links (texto que aparece no menu):
<li class="title"><a href="#" >Blogger</a></li>
<li class="downlistie">
<ul>
<li><ahref="#" >Templates</a></li>
<li><ahref="#">Widgets</a></li>
<li><a href="#">Guides</a></li>
</ul></li></ul></li>
Nesta linha:
<li class="title"><a href="#" >Blogger</a></li>. Altere somente o texto Blogger que será o texto visível no seu menu. Mas não apague o sinal # que está no lugar do link senão o menu não funciona.
Os itens do menu (links) que aparecem são as linhas:
<li><ahref="#" >Templates</a></li>
Que você pode ver que são repetidas varias vezes apenas com um texto diferente, portanto edite cada uma delas trocando a palavra templates pelo que deseja mostrar no seu menu.
E também altere o link apagando o sinal # e colocando no lugar dele o endereço da pagina que deseja abrir quando alguém clicar no menu. Veja abaixo um exemplo deste trecho de código alterado com links do nosso site:
<li class="title"><a href="#" >Dicas para Blogs</a></li>
<li class="downlistie">
<ul>
<li><ahref="http://www.dicasparablogs.com.br/p/novas-dicas-para-blog-atualizacoes.html" >Posts Recentes</a></li>
<li><ahref="http://www.dicasparablogs.com.br/p/dicas-para-blogs-no-facebook.html">Mais Curtidas no Facebook</a></li>
<li><a href="http://www.dicasparablogs.com.br/2010/03/mostrar-slides-com-as-postagens.html">Criar Slides</a></li>
</ul></li></ul></li>
Veja mais tutoriais sobre criar menu para blogs:
Menu Horizontal com Efeitos no Blogger usando CSS
Colocar Menu de Navegação no Blogger (Inicio > Marcador > Post)
Criar e Colocar um Menu com SubMenu com CSS no Blog
Esse código foi publicado pelo site Windroid Club (em inglês) e achamos bem interessante por isso fizemos esse post para compartilhar com você essa dica. Embora este tutorial para criar um menu com submenu estilo accordion seja longo não é tão difícil de fazer. Apenas não tenha pressa de terminar e como já falamos lembre-se de fazer testes e salvar cada trecho que alterar. Abraços e sucesso com seu blog.
Colocar Menu Accordion (Sanfona) Vertical no Blog
No Blogger entre na pagina layout > Adicionar Gadget > html/javascript e cole o código:
<style>
ul.container{width:275px;padding:5px;}
li.accoi-menu{list-style:none;padding:1px;width:100%;}
li.title{border-radius:5px;list-style:none;padding:5px;background-color: #069;}
li.title a{color:#ffffff;display:block; padding:5px;font:14px georgia, verdana;overflow:hidden;position:relative;width:100%; text-decoration:none;}
.downlistie{list-style:none;display:none;padding-top:5px;width:100%;}
.downlistie li{list-style:none;border-left:1px solid #dcdcdc;border-right:1px solid #dcdcdc;border-bottom:1px solid #dcdcdc;border-radius:5px;margin:5px;padding:4px 10px;background-color: #FF0;}
.downlistie li:hover {background-color: #F93;}
.downlistie li a{text-decoration:none;color:#00F;font-family: georgia, verdana;font-size: 14px;}
.downlistie li a:hover {text-decoration:none;color:#333333;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" >$(document).ready(function(){
$('li.title a').click(function(e){
var dropDown = $(this).parent().next();
$('.downlistie').not(dropDown).slideUp('slow');
dropDown.slideToggle('slow');
e.preventDefault();
})
});</script>
<ul class="container">
<li class="accoi-menu">
<ul>
<li class="title"><a href="#" >Blogger</a></li>
<li class="downlistie">
<ul>
<li><a href="#" >Templates</a></li>
<li><a href="#">Widgets</a></li>
<li><a href="#">Guides</a></li>
</ul></li></ul></li>
<li class="accoi-menu">
<ul>
<li class="title"><a href="#" >Wordpress</a></li>
<li class="downlistie">
<ul>
<li><a href="#" >Themes</a></li>
<li><a href="#">Plugins </a></li>
<li><a href="#">Guides</a></li>
</ul></li></ul></li>
<li class="accoi-menu">
<ul>
<li class="title"><a href="#" >About us</a></li>
<li class="downlistie">
<ul>
<li><a href="#" >About us</a></li>
<li><a href="#">Contact us</a></li>
<li><a href="#">Disclaimer</a></li>
<li><a href="#">Privacy policy</a></li>
</ul></li></ul></li>
</ul>
Como Personalizar Menu do Blog
Para modificar as cores das letras, cor de fundo, tamanho e tipo da fonte que usamos no menu precisamos alterar alguns estilos CSS, logo abaixo temos alguns links com ajuda sobre CSS para ajudá-lo a personalizar seu menu:
Como Formatar Texto do Blog: Mudar Cor, Tamanho e Tipo das Letras
Gerador de Código HTML das Cores
O que é CSS? Para que Serve e Como usar o CSS
Agora veja o que e como mudar a aparência do menu:
li.title
li.title a
Nestes dois estilos acima podemos alterar a aparência dos botões principais do menu (aparência do menu quando está totalmente fechado). Então modifique a cor de fundo ou das letras, tipo e tamanho das fontes. Lembrando que color:#... é a cor da fonte e background-color:#.... é a cor de fundo. Se precisar ajuda para formatar o texto veja os links que mencionamos anteriormente com dicas de CSS.
.downlistie li - cor de fundo dos botões do submenu (itens ocultos no menu accordion)
.downlistie li:hover - cor de fundo dos botões do submenu quando o mouse está sobre eles
.downlistie li a - estilo das letras dos itens ocultos do menu
.downlistie li a:hover - estilo das letras quando o mouse está sobre o item
Como você pode ver esses 4 estilos CSS que descrevemos acima controlam os botões que aparecem quando clicamos em algum item do menu sanfona, portanto faça seus testes para achar as cores e fontes que mais combinam com o layout do seu blog. Veja outras dicas para criar efeitos em links:
Efeitos em Links Usando Gifs Animados como Imagens de Fundo
Como Colocar Efeito Arco-Íris nos Links do Blog
Adicionar ou Remover Itens do Menu do Blog
Embora seja um código longo ele se repete varias vezes para criar cada item do menu e submenu (menu accordion), então para editar os links do menu recomendamos que faça por partes e salve as alterações a cada trecho que terminar de editar assim não correrá o risco de perder seu trabalho.
O trecho a seguir é repetido varias vezes apenas trocando os nomes dos links (texto que aparece no menu):
<li class="title"><a href="#" >Blogger</a></li>
<li class="downlistie">
<ul>
<li><ahref="#" >Templates</a></li>
<li><ahref="#">Widgets</a></li>
<li><a href="#">Guides</a></li>
</ul></li></ul></li>
Nesta linha:
<li class="title"><a href="#" >Blogger</a></li>. Altere somente o texto Blogger que será o texto visível no seu menu. Mas não apague o sinal # que está no lugar do link senão o menu não funciona.
Os itens do menu (links) que aparecem são as linhas:
<li><ahref="#" >Templates</a></li>
Que você pode ver que são repetidas varias vezes apenas com um texto diferente, portanto edite cada uma delas trocando a palavra templates pelo que deseja mostrar no seu menu.
E também altere o link apagando o sinal # e colocando no lugar dele o endereço da pagina que deseja abrir quando alguém clicar no menu. Veja abaixo um exemplo deste trecho de código alterado com links do nosso site:
<li class="title"><a href="#" >Dicas para Blogs</a></li>
<li class="downlistie">
<ul>
<li><ahref="http://www.dicasparablogs.com.br/p/novas-dicas-para-blog-atualizacoes.html" >Posts Recentes</a></li>
<li><ahref="http://www.dicasparablogs.com.br/p/dicas-para-blogs-no-facebook.html">Mais Curtidas no Facebook</a></li>
<li><a href="http://www.dicasparablogs.com.br/2010/03/mostrar-slides-com-as-postagens.html">Criar Slides</a></li>
</ul></li></ul></li>
Veja mais tutoriais sobre criar menu para blogs:
Menu Horizontal com Efeitos no Blogger usando CSS
Colocar Menu de Navegação no Blogger (Inicio > Marcador > Post)
Criar e Colocar um Menu com SubMenu com CSS no Blog
Esse código foi publicado pelo site Windroid Club (em inglês) e achamos bem interessante por isso fizemos esse post para compartilhar com você essa dica. Embora este tutorial para criar um menu com submenu estilo accordion seja longo não é tão difícil de fazer. Apenas não tenha pressa de terminar e como já falamos lembre-se de fazer testes e salvar cada trecho que alterar. Abraços e sucesso com seu blog.
Marcadores: Colocar Menu, Html