Fazer Menu Accordion no Blog - Criar Sub Categorias no Blogger

Criar um Menu Accordion ou menu sanfona no blog pode ser uma forma bem interessante de criar um sub menu no seu blog e com isso aproveitar o espaço para colocar diversos links ocupando pouco espaço no seu template. Ele também pode servir para fazer uma adaptação e criar um menu com subcategorias dos seus marcadores como se fosse um marcador dentro de outro marcador no blogger. Veja também como fazer um menu horizontal.

Fazer Menu Accordion no Blog

Fazer Menu Accordion no Blogger

Vamos mostrar como colocar esse menu no seu blog e depois como fazer a personalização dele. Entre na pagina Layout > Adicionar Gadget > HTML/javascript e cole o código abaixo:

<style type="text/css">
dl { width: 300px; }
dl,dd { margin: 0; }
dt { background: #CCC; font-size: 18px; padding: 5px; margin: 2px; }
dt a { color: #000; }
dd a { color: #000; }
ul { list-style: none; padding: 5px; }
</style>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3");
google.setOnLoadCallback(function() {
});
</script>
<script>
$(document).ready(function(){
$("dd").hide();
$("dt a").click(function(){
$("dd:visible").slideUp("slow");
$(this).parent().next().slideDown("slow");
return false;
});
});
</script>
<dl>
<dt><a href="#">Menu 1</li></a></dt>
<dd>
<ul>
<li><a href="#">Menu 1 - Item 1</a></li>
<li><a href="#">Menu 1 - Item 2</a></li>
<li><a href="#">Menu 1 - Item 3</a></li>
</ul>
</dd>
<dt><a href="#">Menu 2</li></a></dt>
<dd>
<ul>
<li><a href="#">Menu 2 - Item 1</a></li>
<li><a href="#">Menu 2 - Item 2</a></li>
<li><a href="#">Menu 2 - Item 3</a></li>
</ul>
</dd>
<dt><a href="#">Menu 3</li></a></dt>
<dd>
<ul>
<li><a href="#">Menu 3 - Item 1</a></li>
<li><a href="#">Menu 3 - Item 2</a></li>
<li><a href="#">Menu 3 - Item 3</a></li>
</ul>
</dd>
</dl>

Colocar os links no Menu Accordion

Inserir os links neste submenu é simples, mas precisa de cuidado com os detalhes como em qualquer código por isso veja o trecho abaixo ele é apenas um item do menu com seus respectivos subitens, ou seja, você deve repetir esse código quantas vezes precisar para criar seu menu completo.

<dt><a href="#">Menu 1</li></a></dt>
<dd>
<ul>
<li><a href="#">Menu 1 - Item 1</a></li>
<li><a href="#">Menu 1 - Item 2</a></li>
<li><a href="#">Menu 1 - Item 3</a></li>
</ul>
</dd>

Agora vamos mostrar o que você deve alterar em cada linha:
<a href="#">Menu 1</li></a></dt> este é o titulo do menu, ou seja, é o botão que parece no seu blog por isso altere somente o texto Menu 1 e o restante fica exatamente como está.

<li><a href="#">Menu 1 - Item 1</a></li> esta linha se repete porque é o link do sub menu que aparece ao clicar no titulo, então troque o texto: Menu 1 - Item 1 pelo que desejar e coloque o link da imagem no lugar do sinal #. Repita isso com todas as linhas e claro você pode adicionar quantas linhas precisar para colocar todos os seus links dentro deste menu.

Personalizar / Fazer a Formatação do Menu

Nesta parte vamos trocar as cores de fundo, formatação do texto e cores dos links do menu Accordion, veja o que faz cada uma das linhas do código CSS:

dl {width: 300px;} - Largura do menu.

dt {background: #CCC;  padding: 5px; margin: 2px; } - Cor de fundo dos títulos do menu.

Aparência do Link dos títulos do menu e efeito ao passar o mouse sobre eles.
dt a {color: #000;font-size: 18px;}
dt a:hover{font-style: italic;}

Formatação e efeitos nos links dos sub itens do menu
dd a {color: #00F;}
dd a:hover{font-weight: bold;}

Para alterar as cores de fundo, tipos ou tamanho das letras só precisa alterar os códigos CSS, se tiver duvidas sobre isso veja tutoriais detalhados sobre isso nos links abaixo:
Alterar cores dos links - CSS
Como Formatar o Texto do Blog
Código HTML das Cores

Criar Sub Categorias nos Marcadores do Blogger

O blogger permite criar quantos marcadores você desejar, mas ainda não temos a opção de colocar um marcador dentro de outro marcador, por exemplo, um blog sobre filmes e series gostaria de fazer um marcador filmes e dentro dele subdividir em: comédia, suspense, ficção e romance. Mas podemos usar o menu que acabamos de mostrar para resolver esse problema e fazer as sub categorias no blogspot.

Usando o exemplo que falamos acima crie e utilize esses marcadores normalmente nas suas postagens. Agora veja o exemplo desses marcadores no código do sub menu que mostramos:

<dt><a href="#">Filmes</li></a></dt>
<dd>
<ul>
<li><a href="url do marcador Comédia">Comédia</a></li>
<li><a href="url do marcador Suspense">Suspense</a></li>
<li><a href="url do marcador Ficção">Ficção</a></li>
<li><a href="url do marcador Romance">Romance</a></li>
</ul>
</dd>

Apenas tenha cuidado na hora de copiar a url de cada marcador porque tem que ser exatamente igual é o endereço da pagina do seu marcador, por exemplo, nosso marcador com dicas sobre o Facebook é:
http://www.dicasparablogs.com.br/search/label/Facebook

Mas colocar com letra minúscula na palavra facebook não vai funcionar, tente copiar e colar no seu navegador o link abaixo:
http://www.dicasparablogs.com.br/search/label/facebook
Ele mostrará uma pagina sem nenhuma postagem como se o marcador não existisse.

Veja abaixo a demonstração deste código em funcionamento:
Dicas para Blogs
Frases Curtas

Veja mais dicas sobre blogs:
Ocultar Marcador e Personalizar o Menu dos Marcadores do Blog
Colocar Menu de Navegação no Blogger (Inicio > Marcador > Post)
Personalizar gadgets do Blog

Usamos aqui neste tutorial o menu colocando marcadores nele, mas você pode utilizar com qualquer link que desejar. Esperamos que gostem e bom trabalho no blog de vocês.

80 comentários :

  1. Excelente artigo, muito bem explicado.

    Parabéns!

    ResponderExcluir
  2. Estou seguindo seu blog há um mês e tem me ajudado muito. Ocorreu um problema no meu blog ontem, não sei onde posto o comentário, desculpe-me se estiver no local errado. Sumiu o contador de visitas. Oque faço tem jeito de recuperar? Ou terei que colocar outro? Não queria perder meu número de visitas.
    http://biscuiteoutrascoisinhas.blogspot.com.br/
    Abs
    Flávia

    ResponderExcluir
  3. você não encontra o gadget do contador? será que você excluiu por engano? tente adicionar novamente.

    qual contador está falando o padrão do blogger? se for é só entrar na pagina layout > adicionar gadget > Estatísticas do blog

    ResponderExcluir
  4. Fabiano eu gostei deste tutorial,super diferente nunca tinha visto.
    Estou levando.
    Obrigada,bjs

    ResponderExcluir
  5. teria como colocar o link por trás do título pois ocupa muito espaço dentro do gadget

    ResponderExcluir
  6. Edir gimenes da silva link por trás do titulo?

    usando como exemplo nosso menu de demostração você quer que ao clicar no Dicas para Blogs ou Frases Curtas abrisse uma pagina?

    se for isso é um menu comum, esses itens não tem links para poder abrir o submenu

    ResponderExcluir
  7. valeu vc me ajudou muito! muito bom saber que tem pessoas como vc que se preucupa com o conhecimento compartilhado!^^

    ResponderExcluir
  8. outra coisa que eu queria saber é como faço quando não quero que a barrinha do menu exiba sub-menus?

    ResponderExcluir
  9. se quiser que a barra seja um link coloque por exemplo

    <dt><a href="endereço do site">Filmes</li></a></dt>

    ResponderExcluir
  10. fabiano eu tentei, mais ele não redireciona para o link que eu botei! fiquei tentando fazer algumas modificações mais nenhuma deu certo. o estranho é que se eu clicar com o mouse e pedir pra abrir o link numa nova guia ele abre normal. :/

    ResponderExcluir
  11. você colocou o http:// nos links do menu?

    se colocar no código do menu dicasparablogs.com.br ou www.dicasparablogs.com.br vai dar erro.

    o correto é http://www.dicasparablogs.com.br

    ResponderExcluir
  12. eu coloquei! mais mesmo assim não deu certo! vc pode me mandar um codigo do menu só pra me editar os links!? igual a desse tutorial, só que sem os submenus, só os botãozinhos laranja!
    alex.lima1095@gmail.com
    Agradeço a sua paciencia! '-.-

    ResponderExcluir
  13. mas o código já está pronto para editar os links

    ResponderExcluir
  14. da só uma olhadinha pra vc ver como eu quero que fique o menu:
    http://trainerpkm.blogspot.com.br/
    no menu principal eu queria do jeito que ta la só que o menu não redireciona os links
    ja no menu scans ja ta tudo direitinho.
    é o menu principal que não ta dando certo no blog! :/

    ResponderExcluir
  15. O erro é causado pelas tags < dt > no link.

    tem um código javascript que impede de funcionar.

    o jeito é retirar o "dt" e acertar a formatação de outro jeito.

    ResponderExcluir
  16. tem como botar esse código sem ser adicionando um gadget?
    tipo eu queria por ele mais não pra ser um menu e sim pra esconder videos, pra página não ficar muito grande. como nesse exemplo: http://teste-1095.blogspot.com.br/

    mais quando ponho ele numa página ele não fica assim! como nessa pagina ai: http://teste-1095.blogspot.com.br/p/teste.html

    porquê isso acontece? você poderia me ajudar?

    ResponderExcluir
  17. Gostei muito do site. Estou a trabalhar no meu template, parabéns por contribuir com tantos códigos super interessantes! :)

    ResponderExcluir
  18. Olá fabiano, adorei seu tutorial, funcionou direitinho do jeito que estou querendo, fiz algumas modificações, mas meu conhecimento em scripts eh meio baixo, e queria uma certa ajudinha.

    Meu site eh sobre downloads de animes. Quero fazer um tipo de Menu Sanfona como vc ensinou aqui, mas com uma pequena diferença. Se voce clicar no menu que criei ( [+] Yu-Gi-Oh! Duel Monsters ) ele abre e mostra todos os episodios ja postados. Eu queria que, ao clicar neste link [+] Yu-Gi-Oh! Duel Monsters) novamente, o menu fechasse, mas agora quando clico ele fecha e abre de novo. Espero que tenha me entendido rsrs

    Desde ja agradeço mto a voce! Abraços amigao :)

    ResponderExcluir
  19. esse menu que postamos neste tutorial serve para fazer isso que falou, mas precisa colocar os links manualmente no código.

    não conheço código para fazer isso de forma automática.

    ResponderExcluir
  20. Nao há como por exemplo se clicar pra abrir ele abre, e depois, clicando de novo, ele fecha?
    Por que sao muitos episodios, o que dificultaria a visualização de outros conteudos abaixo do menu...

    Obrigado!

    ResponderExcluir
  21. não tenho o código para deixar todos fechados novamente mas acho que isso não prejudica o menu, alias incentiva a ver outros itens do menu

    ResponderExcluir
  22. Olá meu amigo. Espero que tenha tido boas festas, aqui foi bom. Vamos lá.
    EncontreGil o menu que queria. Sanfona. Eu copio o código e colo na caixa html. Daí ele faz tudo sozinho, menos os sub menu. Eu escrevo um, daí copio a linha onde está menu 1 item 1 copio e colo na caixa antes ou depois de postar? E se tiver mais de 20 menus, eu acrescento? Como? Publico outro sub, mesma coisa copio a linha e troco o item por item 4 por ex. Se publicar um sub por email do celular posso posso colocar a linha depois para ele ir ao seu lugar? Item 5 por ex. O menu eu entendi, complicou os sub. Colo o código antes ou depois de postar? Assinei seu blog e recebo sempre material novo. Além das pastas comuns tem as personalizadas. Como usar? Deixaria uma sua outra de um curso que estou fazendo mas não tem opções. Abraços e até a próxima. César. Olha vai ser a quarta vez que comento. Comecei e publiquei, sumiu. Comecei de novo e coloquei meu nome sumiu. De novo coloquei o nome e url primeiro depois escrevi, cliquei em publicar e sumiu dizendo que tinha que escrever para comentar. Tentei como anônimo. Sumiu. Antes tinha uma mensagem dizendo que ia ser avaliada a pergunta antes de publicar. E agora escrevi em mensagem no CEL ai eu copio e colo e vou tentando. Não tem um email?

    ResponderExcluir
  23. Cesar tem meu email na sidebar do blog.

    sobre o menu é isso mesmo você precisa atualizar manualmente e pode acrescentar quantas linhas quiser.

    ResponderExcluir
  24. De qualquer forma, muito obrigado, otimo codigo!

    Feliz natal atrasado e tenha boas festas neste inicio de ano, abraços!

    ResponderExcluir
  25. obrigado e feliz natal para você também e que no ano novo tenha muita paz e felicidade

    ResponderExcluir
  26. Oi. Sua dica ajudou bastante, mas faltou uma resposta: eu coloco a linha do sub-menu antes ou depois de postar?
    E queria saber qual melhor lugar para registrar um domínio que não seja mto caro. A hospedagem vou fazer no HOSTGATOR recomendação do Otimizar Blog. Sai de 15,00 a 19,00 e posso registrar vários domínios, tem construtor de sites e emails. Mas não consegui descobrir se eles fazem registro de domínio. Tem a REDEHOST que me disseram que é mto boa mas clico na tabela de preços e volta na mesma página. Deixei meu telefone para entrarem em contato.
    E mais uma, tentei inserir o bloco de notas que está nos gadets do google(outros gadets) mas ele vai para o topo bem no meio da página e não num canto. o pior é que é em francês a explicação e não dá para saber como mudar de lugar. Você tem alguma dica sua para um bloco de notas? Já está quase pronto para postar. começo esta semana. Depois te dou o end para você ver e avaliar. Um grande abraço e UM FELIZ 2013. Nos falamos semana que vem pois tem mais para fazer. César Augusto

    ResponderExcluir
  27. não sei responder sobre qual hospedagem é melhor porque nunca usei nenhuma das duas...

    mas uma coisa que gosto de fazer é pesquisar no google com o nome da empresa junto com palavra problema, falhas, ou algo deste tipo.

    sobre o gadget que a explicação é em francês você pode usar o tradutor do google ou tentar pesquisar por outro gadget

    ResponderExcluir
  28. Olá, estou amando o blog, mas não deu certo pra pôr o menu no meu blog :( Quando vou colar o código na opção "Adicionar seu próprio gadget", aparece que há caracteres inválidos... Tem como resolver isso? Beijos, Máah.

    ResponderExcluir
  29. não é adicionar seu proprio gadget.

    existe um gadget de html/javascript na lista de gadgets do blog é nele que você deve usar o código

    ResponderExcluir
  30. Fabiano. Tudo bem? Aconteceu o seguinte. Copiei o código do menu e colei na caixa, em cima dela pediu um título e eu escrevi menu. Bom, fui ver na página e o que estava lá. Menu 1, 2 e 3. Aí eu tirei porque fiz postagem programada até segunda feira. Quer dizer que em cada publicação eu tenho que ir na caixa e substituir a palavra menu pelo título da postagem? É isso? Outra coisa nos comentários na sua pag eu clico no meu nome é vou parar no meu painel do bogger, clico no seu e fui parar no meu google plus para adicionar você aos círculos. Bom, adicionei. Meu celular tá louco. Não consigo mais ver as respostas dos meus comentários na sua página. Tem outro blog que pude assinar para receber as minhas respostas por email. Vou procurar no seu se tem e assinar. Se não tiver, por favor manda para: dependenciaquimica.cesar@gmail.com

    ResponderExcluir
  31. sim, esse menu não atualiza sozinho.

    você tem que colocar e editar os links

    ResponderExcluir
  32. Este é o mais limpo e melhor código para menus. É super fácil de editar. Parabéns pelo blog, ajuda muito!

    ResponderExcluir
  33. Olá Fabiano, estou usando o cógio para meus Menus, mas só uma coisa, no exemplo que você fez acima, quando eu clico uma vez, ele desçe normal, mas no meu não, fica descendo e subindo umas 3 vezes, já tentei ver isso no código, mas não consegui resolver o problema.

    Agradeço desde de já abraços

    ResponderExcluir
  34. é estranho nos testes que fiz funciona normalmente

    talvez tenha algum outro código no seu blog gerando conflito e por isso dá erro.

    ResponderExcluir
  35. olá amigo gostei muito do seu artigo.
    gostaria de saber se você pode mi ajudar a colocar sub menu nesse tipo de template http://ver542.blogspot.com.br/ já tentei de todas as formas mais não conseguir.

    ResponderExcluir
  36. Pois é amigo, eu também nisso. Já mexi demais e nada!

    Mas mesmo assim obrigado pela sua atenção! Abraço

    ResponderExcluir
  37. como fazer ele ficar fechado depois que foi aberto

    ResponderExcluir
  38. parece que não tem como fechar totalmente o menu depois que ele é aberto

    ResponderExcluir
  39. ola, gostaria de saber como faço para colocar uma postagem dentro da pagina do menu sem que ele apareça na pagina principal, quero separar por assunto e dentro de cada assunto ter as postagens.
    Obrigado,
    su site e otimo sempre me ajuda

    ResponderExcluir
  40. Milena para separar postagens por assuntos use os marcadores do blog

    ResponderExcluir
  41. Olá , eu adicionei o link do menu e o meus slide do topo parou de funcionar . Vc poderia me ajudar com isso?

    ResponderExcluir
  42. talvez tenha alterado alguma letra ou sinal por engano

    ResponderExcluir
  43. Boa tarde. curti muito este menu coloquei ele no meu blog e fiz algumas alterações ficou show, mas está ocorrendo um erro que já tentei de tudo quanto é jeito tirar e não consigo se puder me ajudar agradeço muito pois como não consegui resolver deixei meu blog sem comentário. O erro é o seguinte: quando posto comentário os comentários pega as configurações do botão e assim vira um botão accordion e não quero que isso aconteça quero que fica o nome da pessoa e o comentário logo abaixo sem ter que clicar para expandir.
    Desde já agradeço

    ResponderExcluir
  44. Rafael você tem razão, vou fazer uns testes para tentar resolver isso, mas o problema é com o nome das tags em CSS

    dt {...
    dd {....

    ResponderExcluir
  45. Muito obrigado pela atenção Fabiano! Eu não manjo nada de css e html, tudo que fiz no meu blog foi através de muitas pesquisas, se puder me ajudar com esse problema agradeço muito. Se tiver alguma idéia de menu parecido que de para ficar igual, estou aberto a sugestões. segue meu blog www.pedalariopreto.com.br.

    ResponderExcluir
  46. Olá Fabiano, este menu é muito bonito e eu quero usá-lo, mas o mesmo está causando um alteração no template do meu site, poderia me auxiliar?
    O site em questão é www.baixetd.com
    Quando eu coloco o código HTML em Layout > HTML/Java Script, a barra de músicas que fica abaixo do Slider some e o Slider perde o botão (seta para a direita) que serve para visualizar os outros posts que incluo no mesmo.
    Você poderia me ajudar?
    Agradeço a atenção.

    ResponderExcluir
  47. infelizmente alguns códigos geram conflitos com outros e não tem como resolver só retirando um deles ou se souber editar precisa refazer o código trocando nomes de variáveis parecidas... mas é bem complicado e nem sempre funciona

    ResponderExcluir
  48. Ok, obrigado pela resposta, como não entendo muito a linguaguem de HTML e CSS terei de ficar sem o menu, mas obrigado por compartilhar este código conosco.

    ResponderExcluir
  49. Olá, estou tentando fazer um menu, de forma que ele fique com conteúdo dentro e nao notícias. Estive vendo menus, mas só menus que "linkam" notícias já postas. Poderia me ajudar?? Obrigada.

    ResponderExcluir
  50. é normal o menu link para uma postagem....

    você quer fazer o que? colocar a noticia dentro do menu?

    Acho que não entendi o que você está tentando fazer

    ResponderExcluir
  51. Olá, estou começando a construir meu blog e gostaria de saber se é possível criar no menu horizontal (que aprendi a fazer aqui) categorias, ou seja dividir minhas postagens de tal forma que quando eu clicasse no menu escrito"origami" aparecesse somente as postagens relacionadas a origami. Mas nao queria fazer o menu Acordion, pois achei o outro mais bonito.

    ResponderExcluir
  52. é possivel fazer mas usando códigos como se fosse qualquer outro menu

    não tem como adaptar o código no gadget de marcadores

    ResponderExcluir
  53. Fabiano,
    Como eu faço para ficar igual ao menu que voce colocou na demonstração.
    O meu está acontecendo o seguinte: quando eu passo o cursor encima do submenu eu não consigo enxergar o nome do link. Veja na pratica no meu blog:www.calopsitar.com.br
    Dese já agradeço,
    Mauricio

    ResponderExcluir
  54. Mauricio
    tem que usar a tag title, assim:

    < a href="url do marcador Comédia" title="Filmes de Cómedia" >

    ResponderExcluir
  55. primeiro quero dizer que fiz esse menu e deu suuuper certo!
    só estou com uma duvida: depois que criei os links dos marcadores no menu posso deletar o gadget marcadores do blog???? ou o menu vai dar problema se eu fizer isso???? obggggg

    ResponderExcluir
  56. você pode apagar o gadget marcadores sem problemas.

    o gadget é só um menu feito com os marcadores do seu blog mas ele não altera em nada os marcadores que adicionou em cada post e nem nas paginas dos marcadores....

    aquele gadget é somente um menu com links das paginas dos marcadores

    ResponderExcluir
  57. como faço para mudar a cor de fundo desse menu?

    ResponderExcluir
  58. a cor de fundo é neste trecho
    background: #CCC;

    se quiser pode colocar pode colocar cores nos outros itens como no estilo dt a:hover que é quando o mouse está sobre o menu

    ResponderExcluir
  59. Como definir o numero de post que vai aparecer por página?
    Abraço!

    ResponderExcluir
  60. Como faço para mudar o número de post por pagina no menu?
    Abrss!!

    ResponderExcluir
  61. na parte onde coloca os links você pode colocar quantos links quiser, então desta forma vão aparecer quantas linhas precisar

    ResponderExcluir
  62. Fabiano, boa noite!
    Estou usando o menu com submenu, mas o mesmo deixou de abrir quando estou usando os navegadores google crome e mozila. Você sabe o que pode está acontencendo
    O meu blog é: www.calopsitapetropolis.com
    Desde já agradeço.

    ResponderExcluir
  63. deve ter algum erro no código..

    olhei seu html e duas imagens hospedadas no imageshack aparece como removidas

    http://img6.imageshack.us/img6/9470/sprymenubardownhover.gif

    quando ao restante do código verifique os arquivos externos e se necessário terá que trocar o código completo

    ResponderExcluir
  64. Fabiano,
    No navegador INTERNET EXPLORER ele funciona normalmente. Vc. tem uma luz para eu começar a explorar?

    ResponderExcluir
  65. infelizmente existem alguns códigos que funcionam melhor em alguns navegadores e com as atualizações que acontecem podem parar de funcionar.

    tente trocar o endereço das duas imagens que não abrem no seu código e se não funcionar acho que terá que trocar o código completo

    ResponderExcluir
  66. Bom dia, Fabiano.
    Estas imagens tem que ter um tamanho padrão?
    Abs,
    Mauricio

    ResponderExcluir
  67. eu já vi códigos deste tipo que usavam essas imagens como setinhas para submenu, mas sem elas o código trava.

    sugiro que faça um teste com qualquer imagem pequena pode até ser uma imagem no tamanho de icon (menos de 20px)

    veja no seu html que perto daquele endereço que imagem que falei tem outro que também não funciona então troque também.

    ResponderExcluir
  68. Eu tenho um menu já criado mas queria fazer submenus. Sigo estes mesmos passos ou tenho que fazer algo diferente?

    ResponderExcluir
  69. o código do menu comum é diferente do submenu. A melhor forma é trocar o código e depois colocar os links que você deseja manter no código do submenu.

    ResponderExcluir
  70. Fabiano... Ainda não entendo como mudar a cor com somente 3 caracteres.
    Até então... Só havia mudado com 6 caracteres
    Como fazer por exemplo azul piscina com 3 caracteres?

    ResponderExcluir
    Respostas
    1. pode usar o código com 6 caracteres neste código que funciona da mesma forma que usar com 3

      Excluir
  71. Olá! Parece simples. Porém no meu caso ja uso o blog e temo q adicionar esse gadget iria alterar ou mesmo bagunçar o layout atual (nao sou programador, faço na base do facão mesmo hehe). Tem risco disso acontecer ou posso adicionar o gadget e direcionar os respectivos menus e subcategorias sem risco de zoar o meu blog? Como fazer entao para substituir o menu que uso para este sem muitos transtornos? Obrigado e abrasss

    ResponderExcluir
    Respostas
    1. colocando os códigos dentro de um gadget de html/javascript não tem problemas com o seu template.

      na pior das hipóteses você excluiu o gadget e volta tudo ao normal

      Excluir
  72. oi, estou montando o blog da creche onde trabalho, e usei este menu. Nem todos os itens tem submenu, sendo que estes que não tem, o link só abre clicando com o botão direito em nova pagina. Gostaria que abrisse direto com o botão esquerdo e na mesma guia do navegador, como ocorre com os itens com submenu. Além disso gostaria que revisasse o porque de a formação de texto do submenu não ser igual a dos botões principais.
    Obrigada! gosto muito do seu blog, parabéns pelo trabalho e pela paciência :D
    http://cmeianeliaenkekarsten.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. <dl>
      <dt><a href="#">Menu 1</li></a></dt>
      <dd>
      <ul>
      <li><a href="#">Menu 1 - Item 1</a></li>
      <li><a href="#">Menu 1 - Item 2</a></li>
      <li><a href="#">Menu 1 - Item 3</a></li>
      </ul>
      </dd>
      <dt><a href="link aqui">Menu 2</li></a></dt>
      <dt><a href="#">Menu 3</li></a></dt>
      <dd>
      <ul>
      <li><a href="#">Menu 3 - Item 1</a></li>
      <li><a href="#">Menu 3 - Item 2</a></li>
      <li><a href="#">Menu 3 - Item 3</a></li>
      </ul>
      </dd>
      </dl>

      Excluir
    2. veja no código acima o item menu 2

      se colocar daquela forma o item fica com link e sem submenu

      onde escrevi "link aqui" coloque o link da pagina que desejar.

      Excluir
    3. Oi, fiz a alteração, mas continua abrindo somente com o uso do botão direito do mouse :(
      Obrigada por responder tão rápido!

      Excluir
    4. vou fazer alguns testes... mas por enquanto não achei o problema.

      Excluir