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 :)

51 comentários

  1. 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

  2. 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!

  3. 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

  4. 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!

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

  6. 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

  7. 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!

    1. 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.

    2. 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

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

    1. 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.

  8. 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??

  9. 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.

    1. 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

    1. 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.

  10. 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/

  11. 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

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *