Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1471345397
Vida do cache: 1472641396
Status: 1
Mensagem: Licença válida
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Menus

Menu Horizontal DropDown

Atendendo ao pedido do Wallac, que enviou uma sugestão de artigo, neste tutorial você vai aprender a instalar um Menu Drop Down no seu blog. Este menu é bem fácil de instalar.

Para quem não sabe, Menu Drop Down, é aquele que quando passamos o mouse em cima de um determinado botão do menu, logo abaixo dele, se abrem varios sub-menus.

DEMO
[becape]Lembre-se: Salve o seu template antes de começar.
Nunca deixe de fazer um backup do seu Template para evitar transtornos.[/becape]

1º passo: Aplicar estilos ao seu Menu Drop Down:

Vá em Editar HTML >> Expandir modelos de widgets.
Copie o código abaixo e coloque-o antes de ]]></b:skin>

/* NavbarMenu
--------------------------- */
#NavbarMenu {
background: #555 url(http://2.bp.blogspot.com/_kMUpUqMmduA/SVU82PLeYMI/AAAAAAAAA6c/R8Ip5ZMFIh8/s1600/navbar.png);
width: 100%;height: 35px;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
color: #FFF;/*--cor do link--*/
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; /*--edite cor do link--*/
display: block;
font-size: 16px;/*--tamanho da fonte do link--*/
font-family: Georgia, Times New Roman;font-weight: normal;text-transform: capitalize;
margin: 0;padding: 9px 15px 8px;border-right: 1px solid #fff;
}
#nav li a:hover, #nav li a:active {
background: #555 url(http://1.bp.blogspot.com/_kMUpUqMmduA/SVU-vl5H-bI/AAAAAAAAA68/U4rkLsg0HqE/s1600/navhov.png);
color: #FFF;  /*--edite cor do link hover--*/
margin: 0;padding: 9px 15px 8px;text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #555;/*--cor de fundo--*/
width: 150px;
color: #FFF; /*--cor do link--*/
font-size: 14px;font-family: Georgia, Times New Roman;font-weight: normal;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;/*--cor de fundo hover--*/
color: #FFF; /*--cor do link--*/
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 e sigamos para a 2ª parte da instalação.

2º passo: Instalar o Menu Drop Down:

Antes de prosseguir é importante que você saiba que:

  1. Você que deverá escolher o local mais adequado para instalar o seu menu no template.
  2. Não há como eu informar precisamente onde instalar o menu, a escolha do local deverá ficar por sua conta, até porque cada template é diferente um do outro.

Acesse o painel do Blogger, e vá até o menu “Modelo“, clique no botão “Editar HTML” , não precisa clicar em ‘Expandir modelos de widgets’, e procure pelo trecho referente ao código do cabeçalho.

Localizado o trecho referente a tag do cabeçalho no seu template, cole ABAIXO dela o código html do menu:

<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li>
<a href='SEU LINK AQUI'>Nome do Link 1</a>
<ul>
<li><a href='SEU LINK AQUI'>Nome do Link </a></li>
<li><a href='SEU LINK AQUI'>Nome do Link</a></li>
<li><a href='SEU LINK AQUI'>Nome do Link</a></li>
<li><a href='SEU LINK AQUI'>Nome do Link</a></li>
<li><a href='SEU LINK AQUI'>Nome do Link</a></li>
</ul>
</li>
<li><a href='SEU LINK AQUI'>Link 2</a>
<ul>
<li><a href='SEU LINK AQUI'>Nome do Link </a></li>
<li><a href='SEU LINK AQUI'>Nome do Link</a></li>
<li><a href='SEU LINK AQUI'>Nome do Link</a></li>
<li><a href='SEU LINK AQUI'>Nome do Link</a></li>
<li><a href='SEU LINK AQUI'>Nome do Link</a></li>
</ul>
</li>
<li><a href='SEU LINK AQUI'>Link 3</a>
<ul>
<li><a href='SEU LINK AQUI'>Nome do Link </a></li>
<li><a href='SEU LINK AQUI'>Nome do Link</a></li>
<li><a href='SEU LINK AQUI'>Nome do Link</a></li>
<li><a href='SEU LINK AQUI'>Nome do Link</a></li>
<li><a href='SEU LINK AQUI'>Nome do Link</a></li>
</ul>
</li>
<li><a href='SEU LINK AQUI'>Link 4</a>
<ul>
<li><a href='SEU LINK AQUI'>Nome do Link </a></li>
<li><a href='SEU LINK AQUI'>Nome do Link</a></li>
<li><a href='SEU LINK AQUI'>Nome do Link</a></li>
<li><a href='SEU LINK AQUI'>Nome do Link</a></li>
<li><a href='SEU LINK AQUI'>Nome do Link</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div style='clear:both;'/>

Salve as modificações.
Pronto! Agora é só editar os links e nome dos botões no menu, nos locais indicados.
O trecho destacado na cor azul correspondem aos sublinks.
O trecho em vermelho corresponde ao link principal.

Abaixo seguem algumas dicas para localizar o trecho referente ao código do cabeçalho.

Designer de Modelo:
Se você quiser colocar o menu abaixo do cabeçalho, procure o trecho referente ao código do cabeçalho e cole o código html do menu logo após o final do código referente ao cabeçalho.
Se quiser que o menu fique visível acima da barra de cabeçalho, cole o código do menu acima do código referente ao cabeçalho.
Se estiver usando algum modelo de template do “designer de modelo do blogger”,a tag referente ao cabeçalho é: <header>
Caso queira que o menu fique acima do cabeçalho, basta instalar o código acima da tag: <header>
Se quiser que o menu fique abaixo do cabeçalho, instale o código do 2º passo abaixo da tag: </header>

Templates mínima:
Se estiver usando algum modelo do template minima, a tag referente ao cabeçalho é: <div id=’header-wrapper’>
Caso queira que o menu fique acima do cabeçalho, basta instalar o código acima da tag <div id=’header-wrapper’>

Você pode editar as cores do seu menu, se quiser, para isto basta alterar os códigos referentes as cores no código da 1º parte deste tutorial.
Se quiser, verifique os códigos das cores nesta Tabela de Cores HTML.
(Dica: só edite cores se você for um usuário no nível intermediário ou avançado, pois requer conhecimento maior em css.)

Artigo atualizado em 26/05/2012.



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

148 Comentários

  1. Mari Souza disse:

    Adorei o menu, estou usando já, mas tenho uma dúvida… Eu tentei adicionar mais opções ao menu e não consegui, por que? Ele fica desconfigurado, por mais que eu copie o código direitinho… Queria colocar mais de 4 opções no meu menu :/
    Se puder ajudar, agradeço.

    • Vanessa disse:

      Lamento, mas eu não tenho como te ajudar, teria que ser feita uma análise mais minuciosa, e infelizmente eu não disponho de tempo para isso. De qualquer forma, agradeço pelo comentário.

  2. 7 disse:

    Ola

    tenho uma duvida, coloquei no meu blog e ficou mt bom, desde ja tb agradeço o seu site em ajuda, no mozila ficou bem, mas no explorer fica atras do layout de mensagens, o que tenho de fazer para colocar a descer na frente das mensagens, como fica no mozila, espero ter explicado o meu problema.

    obrigado
    agradeço resposta

    • Filipa disse:

      Tem que colocar certos trechos de código que há por ai em sites se procurar, para colocar no html do seu site referente ao erro do IE :)

      • 7 disse:

        pois eu ja procurei e ja experimentei varios mas continua o problema la, e n sei como revolver ou o qe colocar, qe resulte e coicida com este codigo da barra.

  3. Filipa disse:

    Como ponho o fundo do menu de outra cor, eu ja tentei eu todos os trechos referentes as cores e nao faz alteraçao nenhuma ao menu so ao sub menu dropdown 😕

  4. Batista disse:

    Vanessa este menu é bem legal e gostaria de subdividir os submenus, por favor pode me dar uma dica de como fazer? Fiz algumas tentativas mas foi sem sucesso.
    Mais uma vez muito obrigado.

  5. Carlos disse:

    “procure pelo trecho referente ao código do cabeçalho.”, nao entendi, ajudaaaaa

    • Carlos disse:

      Esquece, isso eu ja sei, mas agora to querendo centralizar o menu, ele esta a esquerda, por favor, heeelp

      • Filipa disse:

        Eu não percebi podes me explica o que quer dizer “procure pelo trecho referente ao código do cabeçalho” ?

  6. Dies Irae disse:

    eu lhe agradeço muito me ajudou pakas eu estava com problemas com o meu menu graças ao seu código eu consegui resolver

  7. Batista disse:

    Olá Vanessa, dá pra dizer como colocar mais um sub menu?
    Parabéns pelo Blog e obrigado.

  8. Isaias disse:

    Consigo fazer com que cada palavra NÃO comece com letra maiúscula?
    Obrigado

  9. Priscilla disse:

    Utilizei o seu tutorial para o menu do meu blog, mto bom.. deu certo.. tenho duas duvidas. 1- É possivel deixar a cor do item principal “acesa” quando estamos com o mouse no sub menu?? e 2- Como posso centralizar o menu?Agradeço mto se puder me responder.

    • Vanessa disse:

      Vc pode editar a cor do link -> color: #FFF; /*–cor do link–*/
      Quanto a centralização, vai depender muito do local que vc está incluindo o código html do menu. Note que no código CSS o width(largura) está definido em 100%, isto significa que o menu vai ocupar toda a largura, exatamente a mesma que está definida no local onde vc está instalando. Ex: se tiver instalando o menu na área abaixo do cabeçalho e ali nesse trecho a largura estiver estipúlada em 950px, o seu menu terá 950px .

      • Priscilla disse:

        Oi Vanessa, muito obrigada por me responder..A questão da cor do link é a seguinte, quando eu passo o mouse no menu ele muda de cor e abre os sub-menus, ai se desço com o mouse no sub menu, a cor do menu principal volta a ser a que era. Não tem como deixa a cor do menu como se estivesse com o mouse em cima estando com ele nos sub menus? Se tiver meio confuso tenta ver no meu blog, acho q fica mais facil..rss Obrigada.

  10. flavio disse:

    Olá,muito bom seu tutorial foi o único que funcionou no meu blog
    Sem querer abusar mas já abusando… percebi que voce esta usando o plugin LASY LOAD para JQUERY ,voce poderia fazer um tutorial
    para instalar no blogger???Já quebrei a cabeça e nao consegui :(

  11. walison disse:

    olá se vc puder me ajudar a centralizar eu agradeço pois ficou uma margem pra esquerda.

  12. nielson disse:

    muito bom!!

  13. Davi Farias disse:

    NA hora de determinar onde vai ficar o menu, uma outra forma, a que eu utilizei, foi criar um gadget de HTML/JavaScript e colocar o codigo do menu nele ^^ Aí só escolher onde vai ficar o menu e colocar o gadget ^^
    Funcionou lindamente aqui 😉

  14. pop disse:

    Olá. O “mastigado” que eu tinha pedido era simplesmente saber como colocar os links nos sub-menus. Felizmente já consegui resolver. Bastava explicar ou indicar um artigo sobre Marcadores, tão simples. Mas pra quem está começando o mais simples pode parecer complicado.

  15. ProcureAqui disse:

    Mais uma vez parabéns pelo excelente artigo, realmente está bem explicado, um grande abraço e até breve.

  16. REgina disse:

    Oi Wanessa eu consegui colocar tambem mudar a cor… mais só aparece um sublink embaixo dos meus links,não aparece mais de um, teria como voce me ajudar que, nesse site foi o melhor que encontrei e o unico que deu certo
    Ta Obrigada
    Att Regina

  17. Joao disse:

    OI! ce poderia me dizer com faço pra adicionar mais um submenu?
    tou tentando assim:
    Nome do Link
    Cartão
    NOVO SUBMENU
    NOVO SUBMENU
    Mas apesar de o codigo ser aceite nao fica visivel no blog depois. tem como vc me ajudar ?

  18. Gessica disse:

    Coloquei em um blog e deu certo, mas no outro não deu, por que?
    E como faz para mudar a cor de fundo? O resto eu consegui mudar, menos esta.

  19. Pop disse:

    Oi. Eu coloquei tudo direitinho, ficou no local que queria. Mas não consigo mudar os nomes. Tipo, mudo os nomes dos menus e submenus, mas quando clico não consigo postar. Só aparece página não encontrada.
    Ex: Sub Link #1.2

    Em endereço coloco o Título que quero. Em sub link, coloco o nome do texto? Depois de # o q devo fazer?
    Colocar os links não consigo.
    Daria pra “mastigar” mais um pouquinho essa parte da explicação?
    Obrigado.

    • Vanessa disse:

      Pop, me desculpe, mas..mais mastigado que isso, impossível.
      Em endereço vc vai colocar a url do seu link.

  20. samuel disse:

    o meu blog nao acha a tag nao sei pq eu uso template do blogger mesmo nao e templat da net nao pq nao acha ajude pf quero muito colocar e sub menus no meu blog ok de uma olhada no meu blog:

    • Vanessa disse:

      Samuel, eu inclui no post algumas dicas para auxiliar a localização do trecho referente ao cabeçalho, para os modelos de template designer de modelo e mínima. Verifique se consegue localizar. Se mesmo assim não conseguir, lamento,mas não terei como te ajudar.

  21. gustavo disse:

    por favor nao consigo fazer no meu blog o que eu faço

    • Vanessa disse:

      Gustavo,
      Tais recursos podem variar de template para template. Sendo assim, lamento, mas não tenho como te ajudar, de qualquer forma agradeço pelo comentário.

  22. Angelo disse:

    Oi de novo Nessa !, você já mudou a plataforma do seu blog !, mais para a pior plataforma, o WordPress, eu não gosto do WordPress, eu já tenteio usar ele é praticamente todo pago, mais isso não quer dizer que eu não posso mais lhe seguir, não é

  23. ~riineko~ disse:

    Tudo de bom seu blog, beijo!

  24. M@noP3 disse:

    Valeu 1° vez que eu consigo fazer..
    nos dois blogs q eu postei foi.. valeu..
    @POIBrasil

  25. Angelo disse:

    Obrigado pela ajuda Nessa !

  26. .:: Nessa ::. disse:

    Angelo:
    Sublink está na área "li ul" no código CSS…vc vai ter que acrescentar cor de background e vai testando/verificando para ver.

  27. Angelo disse:

    Oi nessa !, não preciso mais de ajuda nesse caso, já resolvi sozinho, mas agora a minha duvida é como deixar o fundo do sub-link branco quando o mouse estiver por cima, eu coloco cor de fundo mais não fuciona

  28. Marcos disse:

    não funciona,diz que há erro na linha e etc.

  29. .:: Nessa ::. disse:

    @Juliane:
    No código CSS eu destaquei os trechos referentes a cor dos link..é só vc substituir.

  30. Juliane disse:

    como deixar as letras pretas porque nao aparece porque o meu fundo é branco

  31. .:: Nessa ::. disse:

    Germano:
    Tenta verificar as configurações do #header para ver se não é isso. Se não for, então não sei como ajudar.

  32. Mayara Sousa disse:

    Gostei demais.. o meu ficou otimo q como eu queria. Já havia dias que tentava colocar em meu blogger e nao conseguia. valeu!

  33. GermanoCWB disse:

    Olá.
    Instalei o menu e ficou ótimo, mas não consigo fazê-lo ficar centralizado. Ele está sempre colado à esquerda da tela.
    Veja em http://www.germanocwb.blogspot.com.
    Já tentei trocar todos os 'left' que encontrei por 'center', e já alterei várias 'margin' para valores diferentes de zero, mas não acontece nada.
    Você pode me dar alguma dica?
    Parabéns pelo seu trabalho.
    Obrigado
    GermanoCWB

  34. Marcos Vinicius Mello disse:

    Olá , eu gostaria que explicasse como colocar mais um nível no menu. Tentei, mas não consegui. Desde já agraço, abraços.

  35. Verdedesing disse:

    Olá Clau sigo sempre suas dicas para blogger, consegui colocar o menu tudo certo, mas ao criar as postagens referente aos menus fica todos na mesma da pagina inicial. copiei a url da postagens e colei no link do menu de cada postagem, mas ao clicar no respectivo menu ele direciona na pagina inicial. Como resolvo isso….

  36. Waldemar Luz disse:

    No meu deu tudo certo, só que fica do lado esquerdo e não centralizado! Como faço para que fique no centro?

  37. One For All English School disse:

    Oi gostaria de saber como eu faço para os menus irem para baixo do logo.. Pois eles estão no topo da pagina. Obrigada

  38. Júnnyor Grigolo disse:

    Funcionou no meu, valeu!!!!

  39. Rogério Almeida Pereira disse:

    Eu conseguir colocar, porém os submenus não aparecem me ajuda!!!!!!!!!

  40. Ferreira_F10 disse:

    Eu consegui colocar o dropdown no meu blog, mais eu queria deixar ele no centro da página, porque ele fica no lado esquerdo, e isso atrapalha. Quais códigos eu tenho que mudar ?

  41. Profº Roberto Sabino disse:

    Curti demais esta post. Apliquei no meu blog e ficou fantástico, na minha opinião. Já recomendei aos amigos e vou colocar nos outros blogs que eu publico.
    No entanto, tenho uma dúvida: como faço para deixar a fonte em "Trebuchet" no tamanho px14? Acho que combina mais com meu blog
    Se não for pedir demais, dê uma olhadinha em como ficou http://www.umaredacao.com

    Desde já, Obrigado.

    Abraços

  42. .:: Nessa ::. disse:

    @Raphaela
    Tais recursos podem variar de template para template. Sendo assim, lamento, mas não tenho como te ajudar, de qualquer forma agradeço pelo comentário.

  43. Englas Viperino disse:

    Perfeito, coloquei no meu blog e tem multiplas possibilidades, obrigado

  44. Raphaela disse:

    Nessa,

    você poderia me tirar uma dúvida?

    Eu já tentei colocar esse menu no meu blog, mas fica sempre acima do menu que já tem no meu blog. Você sabe qual seria o erro? Ou se é por causa do meu layout?

    Brigada!

    @EqualizeLeitura

  45. .:: Clau ::. disse:

    Priscilla
    Alguns recursos podem variar de template para template, e não há como eu saber como é o seu, sendo assim, lamento, mas não terei como te ajudar.

    René
    Se tiver como não sei te dizer, vc vai ter que testar e ver se consegue aplicar isso que vc quer.

  46. René Gustavo disse:

    Clau, porfavor, me ajude numa edição do meu menu porfavor.
    Quando passo o mouse em cima de uma categoria [1], e desce o menu [2] expansivo, eu queria colocar mais uma expansão, que ao passar o mouse na expansão [2], abrisse outra, ao lado. Tem como? Brigadão =D

  47. Priscilla disse:

    Clau,
    No caso já está editado o background, quando eu passo o mouse no menu ele muda de cor (ficando azul), porem quando eu desço o mouse para o sub menu, a cor do menu volta a ser branco e somente o sub menu fica azul… Não tem como o menu continuar azul quando estiver passando o mouse no submenu?
    Em todo caso obrigada pela atenção..

  48. .:: Clau ::. disse:

    o Clérigo
    Obrigada pela dica 😉

    Priscilla
    Vc vai ter que editar background em "#nav li a:hover, #nav li a:active ".

  49. Priscilla disse:

    Deu super certo no meu blog… Muito Obrigada!!
    Só uma dúvida, como eu faço para que quando eu estiver passando o mouse nos submenus o menu permaneça com a cor de quando eu passo o mouse nele??
    Por favorrr se puder me responda =)

  50. o Clérigo disse:

    Ótima dica! Alguns comentários anteriores falaram a respeito dos submenus ficando abaixo de vídeos e posts. No meu template eu consegui corrigir isso fazendo a seguinte mudança no código CSS:

    Mude essa parte
    z-index: 9999;
    position: absolute;

    Para
    z-index: 9999;
    position: fixed;

  51. Gabi Gomes disse:

    Olá! Passando para deixar um feedback super positivo no tutorial! Deu tudo certo no meu blog – ainda está em fase de construção, mas com tudo instalado – e está ficando muito legal.

    Obrigada!

  52. Natália disse:

    Caracaaa, sofri muito com esse código, pra mudar as cores e tal… Mas ficou lindo! Amei <3 Obrigada!

  53. Jeizon Eustáquio de Paula disse:

    Não deu no meu. Não existia o primeiro código descrito no passo 2. Queria muito colocar mais 3 guias ao meu site.

    Eu uso o blospot. E o este meu blog foi recentemente criado.

    Se houver algum outro meio, gostaria de ficar sabendo. O meu blog está ficando muito bom.

    Abraços.

  54. Fabio disse:

    oi só para complementar o que eu sempre vejo nos seus post.

    Qualquer codico HTML pode ser adicionado pelo gatget, e fica mais facil para você trocar o link e posicionar porque quando voc~e for mudar vai aparecer no loyoud e vc não vai ter que ficar indo em edtar HTML toda hora.
    Isso serve para qualquer um slide, qulquer coisa, basta vc adcionar o css.
    Não sou proficional se não eu não estaria lendo seu topico e porque e o obvio ne pra isso que existe o gatget "HTML/javascript".
    Gostei dos post desse blog
    sucesso ai com seu blog..

  55. .:: Clau ::. disse:

    Ney
    Experimenta estipular um valor em "margin" no 1º código CSS.

    Daniele
    Nome
    Tais recursos podem variar de template para template. Sendo assim, lamento, mas não tenho como te ajudar, de qualquer forma agradeço pelo comentário.

  56. Daniele disse:

    Olá, adorei seu blog, só que tentei fazer o menu drop down e não deu certo, na segunda parte eu achei apenas a segunda linha do código a primeira não tem no meu html:

    inseri abaixo dele o código que você indica, só que o menu fica na vertical e os sub menus ficam visíveis sempre. Você pode me ajudar??? Obrigada…bjs

  57. Ney disse:

    Boa noite, o seu menu depois de instalado fica na posição imediatamente abaixo do cabeçalho….

    Tem como alterar a posição? colocá-lo em uma altura determinada a partir do cabeçalho ou do topo?

    Aguado

  58. Olívia Vargas disse:

    Olá,

    Primeiramente obrigada por este tutorial, tenho procurado um assim a muito tempo e não obtive sucesso até então. Valeu mesmo! :)

    Consegui instalar, mudar cores, etc. Tudo bacana, porém tenho uma dúvida.
    Como diminuir o espaço do menu e cabeçalho? E do menu e da postagem (restando do blog)?

    Se puder responder ótimo, se não beleza, já consegui instalar e está funcionando perfeitamente.
    Abraço!

  59. Xande disse:

    Obrigado pelo codigo, porém não consigo centralizar ele….. infelizmente, mas obrigado.

  60. Carol D. disse:

    Esse script funciona quando o site tem domínio próprio? Obrigada!

  61. ? yaa disse:

    Clau, socorro.

    Há meses eu tento instalar este menu drop-down num primeiro blog, porém nunca dava certo. Aí eu tentei colocar num segundo blog de testes e funcionou.
    Então, resolvi instalar o template que deu certo no blog onde não funcionava, formatando-o da mesma maneira, por preferir o template que já está em funcionamento no primeiro. Refiz todas as personalizações no segundo; tudo ia dando certo… mas quando eu fui em 'Editar HTML' para personalizar as fontes de título dos posts e dos gadgets, ele desabilitou todo o CSS do menu e eu não consegui mais fazê-lo voltar ao normal.

    O que eu queria saber é por que eu não consigo deixar o blog do jeito que eu quero, porque se eu mudo a fonte dos títulos o menu não funciona; e se o menu está funcionando é porque eu não mudei as fontes.

    Pode me ajudar? :3

  62. JeyDrummer disse:

    OI, eu fiz, mas não apareceu nada no blog, o que será que deu errado?

  63. ? yaa disse:

    Oi Clau!
    Estou com um pequeno problema.
    Quando tentei colocar o menu num blog de testes, que eu sempre uso para ver se os códigos, scripts e afins dão certo, ele funcionou; mas quando fui colocar no definitivo, o menu aparece mas as subopções não.
    O que pode ter acontecido? :~

  64. Eli'sVanity disse:

    Nossa que negocio mais complicado, nao consegui fazer.

  65. Raphael B. de Sousa disse:

    Olá Carla Blackhawk.
    Estou no início da montagem de um blog, porém com as dicas dadas nesta sessão consegui facilmente criar um menu horizontal com submenus e subsubmenus, entendendo a maioria da linguagem utilizada no seu CSS. Valeu pelas dicas e gostaria de saber se você tem para indicar algum material de CSS para nível médio a avançado?
    Abraço.

  66. Andson disse:

    valeu vc mi ajudou muito eu estava procurando este tutorial a muito tempo. os seus tutoriais me ajudaram a contruir um blog que estar fazendo muito sucesso. obrigado1

  67. Mariana Borges disse:

    Então clau, eu não encontrei o código HTML da 2ª parte.
    Fiz também o que vc solicitou à Néka,(colar abaixo de do tag div ) e mesmo asssim não funciona!
    O que eu faço?
    Há tanto tempo eu procuro este menu, e seria plenamente grata se ele funcionasse.Obrigada.

  68. .:: Clau ::. disse:

    Carla Blackhawk
    Ou vc fez algo de errado, ou provavelmente deve ser algum problema relacionado ao seu template. Lamento, mas não tenho como saber o que ocorreu e não tenho como te ajudar.

  69. Carla Blackhawk disse:

    Ola. Fiz tudo conforme o tuto, mas foi parar la no pé do blog e não no cabeçalho… em como mudar isso? Obrigada.

  70. .:: Clau ::. disse:

    Karine Ribeiro e
    Eu visualizei o menu no blog de testes com o IE8 e ele funcionou normalmente. Já verificou se pode ser a versão do IE q vc está usando? Quer uma dica? Larga o IE menina, usa o Chrome, ou firefox, são mais leves e bem melhores.

  71. Karine Ribeiro disse:

    Preciso de Ajuda!

    Esse menu não está funcionando no internet explorer…
    Estou precisando muito disso p/o meu trabalho.

    Parabéns pelo post demorei mas encontrei um bem bacana no seu blog..

  72. .:: Clau ::. disse:

    Bogos
    O IEca é sempre um problema! Lamento,mas não tenho como te ajudar,pq não faço ideia do que possa ter ocorrido no seu template.

  73. Bogos disse:

    olha eu aqui denovo sobre o comentario anterior eu resolvi ja mto obrigado. porem tenho uma duvida que outros ja tiveram .
    meu blog ta perfeito do jeito que eu queria entretanto no Internet explorer o sub menu aparece traz do widgets da pagina.
    Vc saberia tipo se isso tem haver com o template ou se tem a ver com oura coisa, que pelo menos eu possa correr atraz da irmação.
    Mto obrigado Vc esta de parabens

    Teh mais.

  74. .:: Clau ::. disse:

    Bogos
    Tente alterar os valores em "width".

  75. Bogos disse:

    olaa fikou perfito aki vc ta de parabens .

    tenho uma duvida eu coloquei mais uns links ai diminuiu a tamanho delas ki parte do codigo eu almento ela.

    Obrigado

  76. .:: Clau ::. disse:

    Maah
    Não sei te dizer,pq não há como eu saber sobre o seu template. Lamento mas não tenho como te ajudar.

  77. Maah disse:

    o Clau …boa tarde

    desculpa eu te pergunta…mais os trechos na segunda parte
    eu não to conseguindo encontrar no meu blog…meu template e diferente ? ou não tem nada haver ??

    Obrigado

  78. .:: Clau ::. disse:

    Robson
    como você pode observar, isso não aconteceu no blog que utilizei para testar e demonstrar o menu Tais recursos variam de template para template. Sendo assim, não tenho como te ajudar.

  79. fabio melo disse:

    muito bom estou usando no meu blog
    http://www.ebookseconcursos.blogspot.com

  80. Robson disse:

    Olá,
    Estou usando vários de seus ensinamentos no blog que estou desenvolvendo. Aos poucos estou chegando ao meu objetivo.

    Com relação a este menu, consegui colocar, personalizei um monte de coisas, mas tem um problema que por mais que eu quebre a cabeça, não consegui resolver. Quando o mouse passa pelo Submenu, ele começa sobre o menu e não abaixo dele. Você tem alguma sugestão para me ajudar?

    Abraço,

    http://filabrasileirooriginal.blogspot.com/

  81. home disse:

    tem como tirar os menus antogos q tem sempre da pagina ?

  82. .:: Clau ::. disse:

    Zaraki
    Eu estou criando um template exclusivo que vai ter exatamente esse menu que vc citou…então aguarde, que assim que eu tiver uma folguinha vou publicar o tutorial dele. Não sei se dará para publicar ainda este mês..pq semana que vem entrarei de férias e consequentemente, o blog tb..

  83. Zaraki disse:

    Oi Tudo bem ,queria saber se da para colocar os submenus ao inves de espandirem para baixo eles deslocarem para a direita estilo desse site , http://www.passarela.com.br .
    Parabens pelo seu blog e muito lindo , continue sempre assim bj

  84. .:: Clau ::. disse:

    Bauru
    Deve ser algum problema de configuração no local que vc instalou o menu dropdown. Olha pra ser bem sincera com vc, para os usuários que pretendem personalizar mais os templates é muito melhor usar um dos templates minima e ir personalizando ele da maneira que quer, pq esses novos designer de modelo, dificulta bastante uma personalização q não seja as pre-formatadas q o próprio modelo oferece. Sem falar no fato de q para cada modelo os códigos se diferem um do outro. Por exemplo: o código dos modelos simple são diferentes dos outros modelos, mesmo sendo designer de modelo.Sendo assim, pra nós metabloguers fica um pouco difícil de explicar recursos para estes modelos,pq não tem como a gente saber qual é o modelo q o leitor está usando, e não tem como ficar publicando um monte de códigos para cada tipo de modelo.
    Eu aconselho q vc inverta, deixe o gadget de páginas abaixo do cabeçalho e coloque o menu dropdown no topo.

  85. Bauru disse:

    Clau, tentei instalar esse seu menu junto com as páginas do próprio Blogger. Desloquei para cima do header as páginas e o seu colocaria abaixo do cabeçalho. No entanto, apesar de aparecer no lugar certo, em vez do meu aparecer recolhido, ele aparece em forma de lista, um link abaixo do outro? Será que não cabe um post ensinando a instal dois menis horizontais nos novos modelos do Blogger? Abraço.

  86. .:: Clau ::. disse:

    Frederico
    Eu lamento, mas os códigos devem ser inseridos por partes, exatamente como está no tutorial. Se vc está com dificuldades, eu recomendo que vc use um outro tipo de menu, pois para a instalação deste menu requer um conhecimento mais avançado, ou no minimo intermediário, em html e css.

  87. Frederico disse:

    Bom dia Clau, poderia postar o código todo já num arquivo só? Estou com dificuldade para juntar tudo. Mais uma dúvida, como faço para aparecer o fundo do menu com transparência, ou seja, qdo passo o mouse em cima de um menu, conseguir ver o fundo?
    E parabéns pelo site.

    frederico.brigatte@itelefonica.com.br

  88. Avelino disse:

    Olá Clau!

    Mais um de seus menus que uso,muito bom já fiz algumas alterações no menu.
    Mais uma vez obrigado!

  89. Sacerdote I.R.Cí disse:

    Oi Clau,
    no meu blog só apareceram os links.
    * Detalhe: um link em cima do outro

    O que pode ser?!

  90. Leonardo disse:

    Olá, Clau quero que você me ajude, estou com um problema em relação ao menu horizontal drop down, você poderia me ajudar a solucionar isso. Acesse meu blog de testes e veja: http://testesecretodeblog.blogspot.com/

    Obrigado, contato: varinet@hotmail.com

  91. abner disse:

    Parabéns pelo site bem organizado

  92. .:: Clau ::. disse:

    Bruno Arita
    Tenta incluir valores em margin e padding no trecho dos códigos da 1º parte do tutorial e vai visualizando pra ver como fica. Outra opção tb é tentar substituir "float:left", por "center".
    Mas tem um detalhe: pode ser que tenha relação com seu header, ou com o outer-wrapper, pq esse menu é pra ser instalado logo abaixo do header e dependendo dos valores q estiverem estipulado para alinhamentos no header, influencia muito na hora de instalar alguma coisa.
    Não tenho como te ajudar individualmente e especificamente, salvo com essa sugestões q dei pra ver se dá certo ai.

  93. Bruno Arita disse:

    Oii Clau, seu blog é sensacional. Eu gostaria de saber como centralizar o menu. Se voce usa notebook é mais visível o que eu quero dizer. O menu do meu blog fica alinhado na esquerda. Gostaria que ele ficasse centralizado. Tem como fazer isso?

    Grande beijo e parabéns novamente.

    Bruno Arita
    http://www.brunoarita.blogspot.com

  94. .:: Clau ::. disse:

    fabio
    Se vc usa o designer de modelo, aconselho que vc dê uma lida no tutorial:
    "Instalar Menu Horizontal no Designer de Modelo".

  95. fabio vilson couto disse:

    no meu blog nao tem este codigo q vc falo
    vc pode me uma ajuda desde ja meu agradecimentos
    fvc.vilson@gmail.com

  96. M!riam disse:

    De qualquer forma, muito obrigada, Clau!

    bjs

  97. .:: Clau ::. disse:

    andraD
    Teste colocar o endereço da sua imagem em "background", no campo
    #nav li li a, #nav li li a:link, #nav li li a:visited

    M!riam
    Se vc já substituiu "left" por "center" e nem assim deu certo, então não faço ideia do q deve ter ocorrido.

  98. M!riam disse:

    Oi, Clau!

    Apesar da minha experiência quase nula em html e css, consegui alterar as cores e bordas do menu.

    Agora quero fazer com que os títulos do menu fiquem a partir do centro em vez começarem da esquerda para direita.

    Já troquei os left por center, em li e ul, fica centralizado mas dai fica aparecendo só o primeiro link, que é 'Home', os outros somem.

    Tem como fazer que fiquem todos no menu a partir do centro?

    Se puderes me ajudar!

    Um beijoo!

  99. andraD disse:

    Como eu troco os links do sub-menu por imagens

  100. M!riam disse:

    Valeu, Clau!

    Menu instalado!

    beijooo

  101. .:: Clau ::. disse:

    Lia
    No código da 1º parte, no trecho
    #NavbarMenu {

    Onde está "width: 100%;" troque o 100% pelo valor referente a largura q vc quer q seu menu tenha.
    Por exemplo:
    Largura máxima de 900px, coloque: width:900px;
    é em width que vc deve estabelecer a largura do menu.

  102. Lia disse:

    Oi! eu consegui instalar, mas acontece que o menu fica esticado de ponta a ponta da pagina, tirei um print:http://i52.tinypic.com/j97fw5.jpg

    Alguém poderia me ajudar por favor?

  103. .:: Clau ::. disse:

    ?lëx S.M.
    Para mudar as cores é no código CSS do 1º passo. Vc vai ter q ir alterando, testando e visualizando até ver se está mudando conforme vc quer.

  104. ?lëx S.M. disse:

    hihialex.blogspot.com
    (Não repare no site bobo plz)
    O Menu deu certinho aqui* eu usava barra vertical ai colocei essa horizontal mais n sei onde de exato muda as cores quando tiver cabeça eu tento denovo…
    (VLW mto cool o menu >_> so falta eu saber fazer o site opkdkopads)

  105. Schalke 04 disse:

    galera, estou com este problema, poderiam me ajudar?
    http://lh6.ggpht.com/_qjWvDsluR7M/THqOzYFaaSI/AAAAAAAAAuc/lF0BuiBMTF8/s640/image.jpg
    a cor do menu deveria ser a daquele degrade azule preto que aparece em cima do blog e não preto como ele está na imagem.

  106. Marcos Danilo disse:

    me ajuda aew o menu fica pequeno e ele dece fica um linque em bai do outro depois que eu coloko certq quantidade de links

  107. ? Lucy Sem Fronteiras ? disse:

    Olá Clau, faz um tempinho que te acompanho e já aplico algumas dicas maravilhosas tuas (outras não compreendo muito bem), mas apenas hj venho fazer meu primeiro comentário :))

    Na verdade, eu fiz este menu em meu blog de testes e deu tudo certo, ficou perfeito com 'uma exceção':
    – eu queria muito mudar a cor do menu, pois acho que essa não combina muito com o meu blog (perfil este, do qual te escrevo).

    Meu blog foi todo personalizado por mim, e consegui mudar todas as cores que desejava, menos a deste menu, que eu queria tanto, pois em meu blog, já estou com duas 'barras' de menu, e acho q nao fica legal e ocupa muito espaço.

    Poxa, falta só isso mesmo para ficar do jeito que queria.
    Será que vc poderia me dar uma luz, para que eu pudesse alterar a cor, para uma que combinasse com meu blog?

    Desde já, muito grata e parabéns pelo teu espaço lindo!

    Paz e sucesso a ti :)

    Beijinhos

  108. WolfMoon disse:

    OK Muito obrigado!!! Seu blog é 10 e estou fazendo muitas alterações através de suas dicas. Divulguei seu blog no meu forum e vou promover no twitter ok.
    Valeu pela força!!!!

  109. ::Clau:: disse:

    @godofdarkness.forumeiros.com:
    Deve ser algo relacionado ao seu template. Pois eu testei no IE8 aqui e o menu está normal. Não há como eu saber especificamente o aconteceu no seu.

  110. WolfMoon disse:

    Por favor, se puder me ajudar, no internet explorer 8.0 o menu se esconde através das postagens.. No firefox e chrome estão normais, vove sabe me dizer o que pode ser ?
    Obrigado

    http://godofdarknessforum.blogspot.com

  111. WolfMoon disse:

    Parabéns pelo Blog!!!
    Consegui fazer meu menu DropDown!!! Apanhei um pouco mas deu certo, agora só aprender a configurar….
    Obrigado
    http://godofdarknessforum.blogspot.com

  112. DiogoDantas disse:

    Obrigado por este magnifico código

  113. C45510 disse:

    Tudo bem consegui instalar perfeitamente o menu so que no internet explorer os sub menu aparecem como que por baixo da postagem parecido com a questaõ do video que alguem te perguntou (no firefox ficou perfeito) se puder olhar guiabel.blogspot.com não repara que esta em construção vou continuar tentando resolver aqui mas se puder me dar uma luz agradeço.

  114. Marcos Danilo disse:

    Aew troquei o templete e voltei e consigui istalar o menu perfeitamente olha aew

    http://turboperfeito.blogspot.com/

  115. ::Clau:: disse:

    @Admin:
    É só alterar no CSS. Edita o código referentes as cores e bordas no código da 1º parte.

  116. admin disse:

    muito chique, só deixa eu fazer uma pergunta, tem como eu tirar a lista branca que separa os principais menus?

    VLW !

  117. ::Clau:: disse:

    @Néka:
    Procure apenas pela 1ª linha e cole o código do menu logo abaixo de </div>

  118. Néka disse:

    Oi ! Não consigo encontrar o trecho que voce cita na segunda parte da instalação! Heeelp! D: AUHUEEHU brigada!

  119. Arthur disse:

    de todos os q eu ja testei esse foi o único q deu certo

  120. ::Clau:: disse:

    @Dudu.win7:
    Não tem como dar uma solução, pois para cada caso é um caso.

  121. Dudu.win7 disse:

    Por que quando passo o mouse no sub menu ele desaparece?
    Isto acontece somente nos dois primeiros…que ficam justamente acima da sidebar….
    Poderia me indicar uma solução?

  122. Dudu.win7 disse:

    Parabéns..seu site é muito bom..
    O único que encontro dicas que realmente funcionam e sem complicação!
    Sucesso!

  123. fabio melo disse:

    poderai me mandar esse codigo por email fabyomelo@gmail.com

  124. ::Clau:: disse:

    @Bruno:
    Na caixa onde ficam os códigos, na parte superior do lado direito, tem um ícone. Neste ícone, se vc clicar no desenho que tem este símbolo: < > (que fica ao lado do desenho da impressora)abrirá uma janela para cópias dos códigos.

  125. Bruno disse:

    como eu copio e colo os codigos que vc põe?

  126. ::Clau:: disse:

    @Allex:
    Fico feliz que tenha dado certo…eu quem agradeço pela simpatia…obrigada e volte sempre!

  127. allex disse:

    muito obrigado vc é d+ a dica pra acrescentar um valor no margen-top funcionou bem obrigado + uma vez ser vc quizer se torna parti do meu circulo de amizades no msn e assim poderemos trocar experiencias. meu msn djallexmixhd@hotmail.com um forte abrço e ate +

  128. ::Clau:: disse:

    @Marcos Danilo:
    Para um bom funcionamento depende muito do modelo do template tb.

  129. Marcos Danilo disse:

    não consigui istalar o menu aparece apenas os nomes dos botoes espado pelo blog

    http://blogsacra.blogspot.com/

  130. ? PSYCHO CRAZY ? disse:

    Com o meu teve um probleminha a barra Navbar esta ficando no topo da pagina inves de estar por de baixo do menu fora isso esta funfando tudo bem mais como eu poderia arrumar isso??? Por favor deem uma olhada no meu blog
    http://vampiric-lives.blogspot.com/

  131. Rafael disse:

    Parabéns para vcs era o que eu procurava consegui perfeitamente colocar o menu com submenu se quiserem conferir o resultado ai esta a url do meu blog http://www.semlimitedownload.com.br/

  132. Kakashi disse:

    Como eu coloco um sub link em um menu ja pronto?

  133. ::Clau:: disse:

    @dj allex mix da t.f:
    Em #main-wraper, tenta estabelecer um valor em margin-top para que o campo de postagens desça.

  134. dj allex mix da t.f disse:

    oi td bem gotei muito dessa dica eu coloquei o menu em meu blog mais to com um proplema é que o sub menu fica por baixo do video eu queria saber si vc poderia solucionar esse proplema. meu blog é esse http://djallexmixdatf.blogspot.com

Desculpe, os comentários deste artigo estão desativados.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.