Menu DropDown horizontal para Blogger

menu dropdown

Olá a todos, nesse tutorial vou ensinar a como colocar menu DropDown, para quem não conhece, esse tipo de menu abre um sub-menu quando vai passando o mouse em cima de uma opção. É bem simples e fácil de colocar!

Para continuar, faça um backup do seu template, caso esse código estrague o layout!

Para ver como vai ficar acesse a nossa demonstração! DEMO.

Recomendo que leia:

Depois de feito o backup de seu template, vamos começar a modificar seu código fonte!

Temos que aplicar o estilo do menu, no qual vai aparecer o efeito!

Entre no editor de HTML no Blogger e depois marque a caixa “Expandir modelos de widgets”.

Pesquise pela tag ]]></b:skin>, copie o código abaixo e coloque em cima dela.

/* NavbarMenu
--------------------------- */
#NavbarMenu {background: #2092C0 url(http://2.bp.blogspot.com/-F7jDMm5j1hw/Ty03YgyAgAI/AAAAAAAACc0/LWIicPmuSIc/s1600/navbg.png);width: 100%;height: 35px;font-size: 12px;font-family: Arial, Tahoma, Verdana;color: #FFF;font-weight: bold;margin: 0;padding: 0;text-transform: capitalize;}
#NavbarMenuleft {width: 100%;float: left;margin: 0;padding: 0;}
#nav {margin: 0;padding: 0;}
#nav ul {float: left;list-style: none;margin: 0;padding: 0;}
#nav li {list-style: none;margin: 0;padding: 0;}
#nav li a, #nav li a:link, #nav li a:visited {color: #FFF;display: block;font: bold 13px Arial,Helvetica,Sans-serif;text-transform: capitalize;margin: 0;padding: 9px 15px 8px;border-right: 1px solid #fff}
#nav li a:hover, #nav li a:active {background: #2092C0 url(http://2.bp.blogspot.com/-F7jDMm5j1hw/Ty03YgyAgAI/AAAAAAAACc0/LWIicPmuSIc/s1600/navbg.png);color: #FFF;margin: 0;padding: 9px 15px 8px;text-decoration: none;}
#nav li li a, #nav li li a:link, #nav li li a:visited {background: #2092C0;width: 150px;color: #FFF;font-size: 13px;font-family: Arial,Helvetica,sans-serif;font-weight: bold;text-transform: capitalize;float: none;margin: 0;padding: 7px 10px;border-bottom: 1px solid #FFF;border-left: 1px solid #FFF;border-right: 1px solid #FFF;}
#nav li li a:hover, #nav li li a:active {background: #777;color: #FFF;padding: 7px 10px;}
#nav li {float: left;padding: 0;}
#nav li ul {z-index: 9999;position: absolute;left: -999em;height: auto;width: 170px;margin: 0;padding: 0;}
#nav li ul a {width: 140px;}
#nav li ul ul {margin: -32px 0 0 171px;}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {left: -999em;}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {left: auto;}
#nav li:hover, #nav li.sfhover {position: static;}

Salve o modelo e vamos para o próximo passo!

Colocar o corpo do menu no template

Entre novamente no editor de HTML do Blogger, e procure o trecho <div id=’content-wrapper’>.

E copie o código abaixo em cima da tag que você encontrou.

<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li>
<a href='ENDEREÇO DO SEU LINK AQUI'>Link 1</a>
<ul>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #1.1</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #1.2</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #1.3</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #1.4</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #1.5</a></li>
</ul>
</li>
<li><a href='ENDEREÇO DO SEU LINK AQUI'>Link 2</a>
<ul>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #2.1</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #2.2</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #2.3</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #2.4</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #2.5</a></li>
</ul>
</li>
<li><a href='ENDEREÇO DO SEU LINK AQUI'>Link 3</a>
<ul>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #3.1</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #3.2</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #3.3</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #3.4</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #3.5</a></li>
</ul>
</li>
<li><a href='ENDEREÇO DO SEU LINK AQUI'>Link 4</a>
<ul>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #4.1</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #4.2</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #4.3</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #4.4</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #4.5</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div style='clear:both;'/>

Depois é só clicar no botão “Visualizar” para ver se está tudo certo, se não deu nenhum erro, basta salvar o modelo. Qualquer problema é só comentar :)

  • Obrigado pela dica.

  • Pancho,
    Ok, qualquer erro só comentar! Abraço :)

  • Tá difícil aqui irmão, não consigo colocar um menu com sub-título nem a pau.

  • já tentei de tudo
    passei o dia lendo e testando tutorial

  • História da Educação,

    Você deve colocar o código diretamente no HTML de seu blog, se colocar como gadget HTML/Javascript terá problemas dependendo do modelo do templte…

  • Oi,
    Não consegui achar a div id=’content-wrapper’

    O que estou fazendo de errado, voc~e sabe?

  • Blogueira AAA,

    Caso esteja usando algum template padrão do Blogger, você poderá colocar em baixo da tag < /header>

    Na área “header” é aonde está localizado o logo ou o nome de seu blog!

    Abraço =D

  • Oi!
    No meu blog deu certinho!
    Mais eu vim perguntar como eu coloco o Twitter, como nesse blog aqui: http://winxclubepisodios.blogspot.com.br/
    O botão do twitter se localiza no topo desse blog!

  • Aline,

    Neste blog que você mencionou tem um botão do twitter e ele está dentro de uma div chamada “NavbarMenuright”, ou seja, ela faz parte da barra de navegação…

    O tutorial que fiz via bloco de notas segue neste link: http://dl.dropbox.com/u/46161244/botao_twitter_aline.txt

    Abraço!

  • Oi Fabiano!
    A onde eu ponho esse código?
    Obrigado!

  • Oi Fabiano!
    É que na verdade, eu queria chegar o menu um pouco mais para a esquerda, como está no blog: http://winxclubepisodios.blogspot.com.br/
    Tem jeito de fazer isso?
    Obrigado!

  • Oi de novo Fabiano! =D
    Desculpe-me pelo incomodo.
    Mais essa é a última pergunta!
    Eu fiz esse menu do tutorial, mais no meu blog de teste.
    E eu preciso da tag header-wrapper, que é uma div, mais o meu comentário aqui no blog não foi aceito por causa da div, então tive que mudar, espero que entenda. Esse div é referente ao cabeçalho do blog.
    A onde eu adiciono ela sem o template dar erro?
    Obrigado!

  • Olá Fabiano
    Coloquei o menu, alterei o tamanho, troquei a cor e ficou ótimo.
    Veja aqui: http://www.germanocwb.blogspot.com.br
    Mas veja só: não consigo fazer ele ficar centralizado. Ele só fica grudado na margem esquerda.
    Já troquei todos os ‘left’ que encontrei por ‘center’, mas nada acontece.
    Já alterei os valores de várias ‘margin’ para valores diferentes de zero, mas nada acontece.
    Você, ou alguém, pode me dar alguma dica?
    Parabéns pelo trabalho.
    Obrigado.
    Germano

  • Aline,

    A div “header-wrapper” deve ser unica, o erro que está causando é porque já existe!

    GermanoCWB,

    Ficou muito bom a sua personalização do menu!
    Como seu template está em layout fluido (ajuste automático de acordo com a tela do usuário) ficará um pouco difícil de centralizar… Neste caso, recomendo que troque de template!

    Qualquer coisa é só comentar!

  • Olá fabiano eu gostaria de pedir para vocÊ tentar fazer submenus só que na parte superior do blogger
    home-contatos-agenda.
    ficarei grato!

  • KeNnEdY,

    Vou tentar criar, caso consiga, crio um artigo falando sobre os submenus superior!

    Abraço!

  • Olá Fabiano.
    Segui teu conselho e peguei um template com o menu pronto. Foi quase um parto para eu conseguir personalizar, já que não entendo de programação, mas consegui graças a ajuda de bloggers como você.
    Coloquei sub-menu e sub-sub-menu, mas descartei esse último porque achei que ia ficar muito chato para o visitante.
    Quando puder dê uma olhada no resultado.

    Valeu muito.
    Obrigado e sucesso para você.
    Abs

  • GermanoCWB,

    Fico imensamente feliz por ter conseguido o template de seu interesse para o blog.

    O menu drop-down está funcionando perfeitamente, ótima para boa navegação do seu publico leitor!

    Sucesso e um forte abraço!

  • olha man funfo tudo só que não estou conseguindo centralizar

    http://gamesxelite.blogspot.com

    • Olá Juninho,

      Para centralizar o menu em seu template pesquise (Ctrl+F) pela linha divisória a seguir:
      < div id=”NavbarMenu” > — tire os espaços —

      Logo após, coloque acima a seguinte linha:
      < div align=”center” > — tire os espaços —

      Ficando deste jeito:

      < div align=”center” > — tire os espaços —

      — Código HTML da barra de navegação —

      < / div > — tire os espaços —

      Depois, pesquise por #NavbarMenu e troque o valor de width de 100% por 978px e depois é só salvar o template!

      LEMBRE, tire os espaços nas linhas, caso tenha alguma duvida é só chamar! Abraço.

    • Como faço pra mudar a cor?

    • Olá juninho,

      Para modificar a cor da barra, basta editar a imagem:

      http://2.bp.blogspot.com/-F7jDMm5j1hw/Ty03YgyAgAI/AAAAAAAACc0/LWIicPmuSIc/s1600/navbg.png

    • Tentei tudo para centralizar.. Primeiro já não acho o código como vocês escreveu < div id=”NavbarMenu” > — tire os espaços —

      E tentei inúmeras coisas, existe alguma maneira mais fácil atualizada para fazer??

      Obrigado

  • vlw ja arrumei fico massa

  • ola! meu HTML não tem esse código: < id=’content-wrapper’>
    Oq eu faço?? e se puder visita; magiadowinxclub.blogspot.com
    obg!!

    • Caso esteja usando algum template padrão do Blogger, você poderá colocar em baixo da tag < /header>

  • Eduardo

    tem como aplicar + dos mesmos codigos e deixar com mais categorias e sub abas????

  • Sim, é possivel…

  • Me ajuda, o meu blog nao ficou com o menu alinhado, e nao consigo centralizaar, olha ae http://nerdsnocomando.blogspot.com

    • Para centralizar, coloque a seguinte tag HTML no começo do código do seu menu:

      < center > –Retire os espaços–

      E coloque a tag de fechamento do comando centralizar no final do código do seu menu:

      < / center > –Retire os espaços–

      Espero ter ajudado.

    • Aff, to quase me dando um tiro aqui, kkkk, obrigado

  • Amigo como eu arrumo a descrição dos menus e sub links porque aundo descrevo as letras que eram para ser minusculas ficam tudo em maiúscula.
    O que era para ficar assim tipo: Avistamento real de óvnis
    Fica assim: Avistamento Real De Óvnis
    Mesmo eu colocando em letra minuscula.
    Como faço para concertar isso??

  • Consegui deixar o texto como se escreve basta encontrar a palavra text-transform e colocar uma das opções abaixo tipo
    para deixar seu texto escrito do jeito que vc escreveu coloque: none na frente do exemplo text-transform: none

    Como exemplo tomamos a palavra “cabeçalho” que pode ser apresentada ao usuário como “CABEÇALHO” ou “Cabeçalho”. São quatro os valores possíveis para text-transform:

    none:
    Sem trasformações – o texto é apresentado como foi escrito no código HTML.
    Para exemplificar vamos usar uma lista de nomes. Os nomes estão marcados com o elemento li (item de lista). Vamos supor que desejamos os nomes capitalizados e os cabeçalhos em letras maiúsculas.

    capitalize:
    Capitaliza a primeira letra de cada palavra. Por exemplo: “john doe” transforma-se para “John Doe”.

    uppercase:
    Converte todas as letras para maiúscula. Por exemplo: “john doe” transforma-se para”JOHN DOE”.

    lowercase:
    Converte todas as letras para minúscula. Por exemplo: “JOHN DOE” transforma-se para”john doe”.

    Ao consultar o exemplo sugerido para este código dê uma olhada no HTML da página e observe que os textos no código foram escritos com todas as letras em minúsculas.

  • Text-transform encontra-se no NavbarMenu

  • estou fazendo meu blog aproveitem e de uma olhada mas ainda estou editando o menu http://ufosanonimos.blogspot.com.br/

    • Anonymous

      Boa tarde Alex. Vi teu blog e cara tá de parabéns. Morri de inveja com o dropdown que você colocou, 8 situações, bem disposto no blog e funcionando. Obviamente com algusn itens ainda em preparação. Queria aprender a fazer um igual-rsrs..
      Marivaldo

  • Adorei o tutorial, super fácil ^-^

  • obrigada pela dica meu blog ficou lindo com essas dicas.

  • Olá, não estou conseguindo achar a tag < id=’content-wrapper’> e a está deixando uma lista de links acima do cabeçalho. O que faço? Obrigada

    • A divisão “content-wrapper” é aonde está todo o conteúdo do seu blog e os seus widgets… Tente encontrar o “div” parecido que faça a mesma função que é juntar todo esses elementos que citei ou pergunte para seu designer/programador que criou o template de sua página. Abraço.

  • Tem como mudar a cor? obrigado.

    • Sim, é possível mudar a cor, mas para isso deve-se ter conhecimento básico de HTML. Abraço!

  • Adorei!!!!!
    Estava tentando fazer isso a bastante tempo e não estava conseguindo, mas com seus códigos foi bem fácil. Muito obrigado!!!!!!!

  • Meu deu certo….

  • Giovano Bortolin

    Boa noite. Não acho nem a n id=’content-wrapper’> nem a < /header>
    o que faço?

    • Olá Giovano,

      Para que eu possa responder, preciso do link do seu blog para eu analisar!

      Abraço.

  • Não consegui achar o código < id=’content-wrapper’> e tentei pelo código que eu li nas suas respostas acima e deu super certo.Obrigada!!!!

    http://princesadopanico.blogspot.com.br/

  • Oi olha só, fiz tudo e deu, na hora que fui colocar os links e os nomes das páginas, como a dizer que tinha dado erro nos códigos lá nos gadgets sabe? Aonde tem um tal de ID dos gadgets. Não sei oque eu façoo! Por favor preciso de ajuda é http://sweetsecretfantasy.tk/

    • Olá, deve ser o problema nos ID do menu, ID no HTML serve para chamar o CSS e é único, caso tenha mais um menu ou uma ID com mesmo nome no seu template recomendo que renomeie. Abraço.

  • Ronaldo Nunes

    oi… bom dia…. voce poderia me ajudar… fiz esse menu mas queria que qdo eu cliclasse num item ele permanecesse marcado e nao fizesse transition com o mouse hover

    • Creio que não é possível, isso se deve ao fato de não ser possível programar uma página em PHP no Blogger.