Colocar menu Drop Down Blogger

Se o seu Blog possui muitas páginas, categorias e sub-categorias, talvez seja necessário economizar espaço e uma maneira que pode lhe ajudar é um menu Drop Down, que irá armazenar vários links em seu menu que aparecerão somente quando alguém passar o mouse sobre ele. Vamos adicionar esta ferramenta agora.

Veja o Menu funcionando em um Blog: Clique Aqui

Adicionado menu Drop Down CSS no Blogger:

1. Primeiramente vá até "Design", "Editar HTML" e procure por: ]]></b:skin> e imediatamente acima cole o código abaixo:
/*----- MBT Drop Down Menu ----*/
#mbtnavbar {
    background: #060505;
    width: 960px;
    color: #FFF;
        margin: 0px;
        padding: 0;
        position: relative;
        border-top:0px solid #960100;
        height:35px;
}
#mbtnav {
    margin: 0;
    padding: 0;
}
#mbtnav ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#mbtnav li {
    list-style: none;
    margin: 0;
    padding: 0;
        border-left:1px solid #333;
        border-right:1px solid #333;
        height:35px;
}
#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {
    color: #FFF;
    display: block;
   font:normal 12px Helvetica, sans-serif;
   margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
     
}
#mbtnav li a:hover, #mbtnav li a:active {
    background: #BF0100;
    color: #FFF;
    display: block;
    text-decoration: none;
        margin: 0;
    padding: 9px 12px 10px 12px;
     
}
#mbtnav li {
    float: left;
    padding: 0;
}
#mbtnav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 160px;
    margin: 0;
    padding: 0;
}
#mbtnav li ul a {
    width: 140px;
}
#mbtnav li ul ul {
    margin: -25px 0 0 161px;
}
#mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {
    left: -999em;
}
#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {
    left: auto;
}
#mbtnav li:hover, #mbtnav li.sfhover {
    position: static;
}
#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {
    background: #BF0100;
    width: 120px;
    color: #FFF;
    display: block;
    font:normal 12px Helvetica, sans-serif;
    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
z-index:9999;
border-bottom:1px dotted #333;
 
}
#mbtnav li li a:hover, #mbtnavli li a:active {
    background: #060505;
    color: #FFF;
    display: block;
    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}
Se você quiser mudar as cores do menu:

  • Alterar #060505 para mudar a cor de fundo do menu principal
  • Alterar #BF0100 para mudar o fundo de um guia sobre foco do mouse
  • Alterar #BF0100 para mudar a cor de fundo do menu drop-down
  • Alterar #060505 para mudar a cor de fundo de menu drop-down no mouse hover
  • Veja aqui a Tabela de Cores
2. Agora vá até "Design", "Elementos da página", "Adcionar um gadget", "HTML/JavaScript" e cole código abaixo:
<div id='mbtnavbar'> 
      <ul id='mbtnav'> 
        <li> 
          <a href='LINK_DA_HOME'>Home</a> 
        </li> 
        <li> 
           <a href='LINK_1'>TITULO</a>
            <ul> 
                <li><a href='SUBLINK_1'>SUBTITULO</a></li> 
                <li><a href='SUBLINK_2'>SUBTITULO</a></li> 
                <li><a href='SUBLINK_3'>SUBTITULO</a></li> 
              </ul> 
        </li>
       <li> 
           <a href='LINK_2'>TITULO_2</a>
            <ul> 
                <li><a href='SUBLINK_1'>SUBTITULO</a></li> 
                <li><a href='SUBLINK_2'>SUBTITULO</a></li> 
                <li><a href='SUBLINK_3'>SUBTITULO</a></li> 
              </ul> 
        </li>
  <li> 
           <a href='LINK_3'>TITULO_3</a>
            <ul> 
                <li><a href='SUBLINK_1'>SUBTITULO</a></li> 
                <li><a href='SUBLINK_2'>SUBTITULO</a></li> 
                <li><a href='SUBLINK_3'>SUBTITULO</a></li> 
              </ul> 
        </li>
      </ul> 
    </div>

3. Preencha os campos indicados em vermelho e salve. Para adicionar mais títulos ou subtítulos é só seguir a ordem lógica do código.

Espero ter ajudado e que o post tenha sido esclarecedor, qualquer dúvida deixe um comentário.

25 comentários:

  1. Bela dica, vai ajudar muitos blogueiros.. Abraço

    ResponderExcluir
  2. Po cara, acho muito legal esse lance de ajudar o proximo!
    pode ter ctza que tem muita gente precisando ;D

    ResponderExcluir
  3. Cara! Muito bom! Funcionou no meu blog. Como mudo a cor e a fonte do texto do menu e do submenu?

    Obrigado!

    ResponderExcluir
  4. Já descobri como mudar a cor da fonte e o seu tamanho. Só que estou com problemas quando o leitor não passa o mouse com agilidade em cima do menu para aparecer o submenu. Se ele passar devagar, a não haverá drop down. Se ele passar rápido sim. Mas está funcionando. Só que quero resolver esta última pendência. Tem como me ajudar nisto? Obrigado, mano! Meu blog eternacruz.blogspot.com

    ResponderExcluir
  5. Jeizon, o código do menu, esta perfeito, o que pode estar acontecendo é algum conflito entre o menu e seu Template, uma alternativa é mudar seu template e testar o menu novamente, ou encontrar outro menu drop down pela internet, infelizmente esta é a solução que posso lhe passar.

    ResponderExcluir
  6. Eu acho que é porque o espaço entre o link do cursor na guia principal está muito distante do link do primeiro link que está descendo abaixo. Aí tem um espaço vago e eu perco a vinculação entre a descida do menu e o caminhamento do mouse para os links abaixo. Acredita que poderia ser isto? Sabe como resolver isto?

    Me desculpe, mas eu nem cogito retirar ou trocar este menu seus por qualquer outro na internet. Foi super simples de colocar.

    ResponderExcluir
  7. nao consigo achar onde devo colar o primeiro código. pro favor alguem pode me ajudar?

    ResponderExcluir
  8. Se eu colocar o menu entre imagens na plataforma blogger, perco grande espaço em branco entre o menu e a segunda imagem.

    Como poderia eu reduzir este espaço existente para dar a impressão de que o menu ficou por cima da imagem? Assim, bem junto 0px, à semelhança do que ocorre com o blogcaminho.blogspot.com

    Abraços...

    ResponderExcluir
  9. Olá! Gostei mto e consegui colocar, porém só o primeiro link dos submenus são visualizados. os de baixo não. pode me ajudar?

    ResponderExcluir
  10. Parceiro gostei muito de seu blog, parabéns mesmo
    Que pena que eu não estou conseguindo, copiei os códigos acredito que está tudo correto, mais quando clico no menu que quero abrir abre o painel do blog dizendo, esta página não existe, que faço por favor?

    ResponderExcluir
  11. como faço para adicionar mais de 4 icones?

    ResponderExcluir
  12. Coloquei no meu blog, porém os sublinks não aparecem, me ajuda aí!!!!!!!!!

    ResponderExcluir
    Respostas
    1. deve se algum conflito com tema que você esta utilizando, o que pode ser por diversos motivos, por isso não posso lhe dizer o que afzer exatamente.

      Excluir
  13. Cara consegui!
    que vontade de te dar um abraço! procurava isso a muito tempo!

    sou novo nesse ramo visita ai meu site!
    http://nipponnoticias.com

    ResponderExcluir
  14. Eu fiz tudinho da forma como estava descrito aqui, mas o meu menu ficou abrindo horizontalmente...
    www.jesusnumero1.com

    Pode me ajudar?
    Desde já agradeço!

    ResponderExcluir
  15. Como altera o tamanho da fonte e como muda a fonte?

    ABs.

    ResponderExcluir
  16. Olá! Gostei mto e consegui colocar, porém só o primeiro link dos submenus são visualizados. os de baixo não. pode me ajudar?
    Isso pq coloquei sub-menus nos sub-menus!
    Olha meu blog ai: http://eremsalweb.blogspot.com.br/#

    ResponderExcluir
  17. Neu problema é como o de alguns aqui. Não sei o que coloar no lugar de link e sub link. Até troquei os nomes, mas deveria ser o endereço na web? Mas como se ainda vou escrever os tópicos? Quando cliconos sublinks dá página não encontrada. E como colocar os de tópicos já existentes?
    Obrigado.

    ResponderExcluir
  18. Olá! Consegui colocar o menu, mas quando eu coloco a seta em cima não aparece o sub menu. Pode me ajudar por favor.
    Valeu.

    ResponderExcluir
  19. Você poderia me dizer como faz pra diminuir o tamanho e centralizar?

    ResponderExcluir
  20. Olá, tutorial muito bom, de fácil entendimento.
    Usei em meu Blog e ficou muito bom, obrigado pela dica.

    ResponderExcluir
  21. OLÁ.
    Eu consegui fazer o menu só que não consigo postar nele
    end: suelenesoares.blogpost.com.br

    ResponderExcluir
  22. AMEI!!! Foi a único que realmente funcionou depois de dias tentando! Muito obrigada!

    http://www.guiamundoafora.com

    ResponderExcluir
  23. preciso de ajuda, como vou colocar o link dos menus se eles ainda não existem?

    ResponderExcluir
  24. Olá poderia me falar como tirar os traços que divide as palavras ? Tem como ?!

    ResponderExcluir

Todos os direitos reservados © Soluções Blog - Desenvolvido por Gustavo Solbas. Tecnologia do Blogger.