Menu horizontal para blog com abas e sub abas fácil e simples de instalar

em 1 de julho de 2014

Um dos pedidos mais comuns aqui no blog se refere à menus de navegação.
Em especial ao menu com abas, ou menu Dropdown. Esse menu que quando passamos o mouse as "casinhas" aparecem.

Já ensinei 1 tipo de menu em abas aqui no blog, como você pode conferir no link abaixo:
http://www.elainegaspareto.com/2013/08/menu-dropdown-com-abas-e-sub-abas.html

Ele funciona muito bem, mas como é preciso acessar o código-fonte do blog e muitas pessoas ficam inseguras quando precisam fazer isso.
Então vou compartilhar este outro menu, que será colocado de modo bem simples em seu blog, sem precisar mexer no código-fonte.
Veja como fica (é o segundo menu, ok?):

Demonstração do tutorial


Para começar acesse a aba Layout de seu blog.
Agora clique em Adicionar um gadget.
Dentre as opções escolha HTML/JAVASCRIPT e na janela que abrir cole o seguinte código:

Copiar o código



Agora preste atenção!
Deixei marcado no código tudo que se refere às alterações de cor, fonte e estilo.
Altere para combinar com seu blog.
Por exemplo, onde você lê:
background: #F20767; /*--cor do menu--*/
Significa que o código hexadecimal #F20767 dá a cor rosa escuro do menu. Para trocar essa cor troque o código hexadecimal que a define.
Aqui tem uma tabela de cores para você escolher as cores que deseja.

Faça isso em todas as partes sinalizadas no código.
Depois de concluir essa parte coloque o nome em cada aba e o endereço de cada uma delas. Deixei sinalizado em  pink onde coloca o endereço e em azul onde coloca o nome de cada aba e sub aba.

Veja um exemplo:
<li><a href=http://www.elainegaspareto.com'>Home</a></li>
Onde em pink é o endereço para onde o link direciona e em azul é o nome que aparece na aba.
Faça isso com todas as abas e sub abas.

Depois da edição completa salve as alterações, arraste para onde deseja que fique e salve as alterações do layout.

Dica extra:
Faça antes em um blog de testes, tá?
Assim você ganha confiança para fazer no blog oficial.

Aqui no blog tem uma categoria só de menus para blog.
Veja:
Menus para blogs

Gostou e deseja ter em seu blog mas não tem tempo ou jeito para fazer?
Entre em contato comigo, combinamos o pagamento e eu faço para você.

Alguém que escreve. Especialista em si mesma. Leitora que lê muito menos do que gostaria. Blogueira por paixão e profissão. Propriedade da Princesa e da Menininha, e de um cachorrinho muito levado chamado Bloguinho. Tentando viver. Sempre.

62 comentários , comente também!

  1. Ôpa, só vc mesmo amiga com esse coração enorme para dar dicas excelentes para nós blogueiros, obrigadaaaaaaaaaaaaaaaa.

    beijooo.

    ResponderExcluir
  2. Dicas sempre legais,Elaine!um beijo,obrigado,boa noite!chica

    ResponderExcluir
  3. Elaine,

    Quanta dica jóia. Quando tiver um tempo vou mudar tudo!!!
    Depois, se eu fizer algo errado, mando um email implorando por sua ajuda, ok?!
    Beijos

    ResponderExcluir
  4. Olá!!!!
    Como vc é "fuçona" kkkkkk!!
    Elaine, me ensina a colocar resposta bem embaixo do comentário que nem vc tá fazendo agora???

    Postei o meme dos 7 pecados... pirei... sou pecadora demais!
    Bjks
    Alê

    ResponderExcluir
  5. Eu queria aprender a como mexer em todo HTML pra ficar mudando o layout do meu blog de vez em quando... rs... Mas sou uma anta nisso.

    Eu tenho um menu horizontal no meu blog, mas não tenho noção de como ele foi parar lá, uma amiga que fez pra mim... rs

    Beijocas

    ResponderExcluir
  6. Elaine o tutorial tá bem explicadinho!Muito obrigada pela generosidade.
    Bjos

    ResponderExcluir
  7. Elaine agora é que meu msn abriu ,está frescando há vários dias, vi o seu recado lá e respondi, pelo e-mail, hoje 16/06 o prazo termina amanhã não é? graças a Deus não perdi o livro que tanto queria, estou muito feliz mesmoooooooooooo!
    Beijão.
    Deixei no contato de Seu Blog hj pela manhã o que você me pediu, também. Haja desespero! rsrsrsrsrs

    ResponderExcluir
  8. ELAINE DE DEUS...
    socorro..
    quanta coisa legal mas sabe é sempre tão complicado pra mim..
    sou meio topeira em assunto de computador..
    mas tentarei fazer alguns sim..
    já aprendi tanto com vc...
    e sempre volto pra verificar suas dicas quando tenho dúvidas..hehehe
    obrigada linda.
    bjuivos no coração.

    ResponderExcluir
  9. I would like to exchange links with your site elainegaspareto.blogspot.com
    Is this possible?

    ResponderExcluir
  10. Oi, Elaine!

    No meu blog de teste já tenho o linkbar instalado, mas não sei como fazer para ele ter esse 'efeito' que tem o teu. Exemplo, na opção SOBRE quando clicamos ele abre outras opções: sobre mim, sobre o blog...

    como faço isso? tô pirando!

    beijooo

    ResponderExcluir
  11. Esse menu suspenso é uma excelente opção para quem tem muitos parceiros na barra lateral. Estou organizando meu layout e certamente um desses estará por lá.

    abraços

    ResponderExcluir
  12. Oi Elaine... por favor, me ajude!!!! Eu não estou conseguindo fazer o menu e não encontro onde estou errando...Não sei nem por onde começar solicitando ajuda. Pela sua experiência... me ajuda! bjs Isis

    ResponderExcluir
  13. eu fiz o outro menu ficou muito legal, mais algumas coisas eu não consigo fazer não sei por que.

    ResponderExcluir
    Respostas
    1. VC CONSEGUIU MUDAR A COR DA FONTE?

      Excluir
    2. eu mudei, mas quando salvei nao deu certo :( continuou rosa. tenho certeza q fiz td certo. Já revisei mil vezes

      Excluir
  14. Não sei se já tinha visto esta postagem, é antiga, né?
    Achei muito boa, vou fazer no Blogteste e se der certo faço no Mundial.
    Valeu.
    Beijos querida.

    ResponderExcluir
  15. Essa postagem mim ajudou muito no inicio do meu blog e continua ajudando de vez em quando quando quero mudar venho aqui e procuro algumas dicas,..........

    BJS...

    http://loucasporphotoscape.blogspot.com.br/

    ResponderExcluir
  16. Obrigada por compartilhar, não tinha conseguido com os outros menus, este deu certinho.

    ResponderExcluir
  17. Quando reformular meu blog quero criar esse menu dropdown.
    Beijinhos
    Deus abençõe

    ResponderExcluir
  18. Oi! Coloquei e ficou lindo. Mas não sei como colocar conteúdo nessas pastas e sub pastas. Como faço? Tem algum post aqui que ensina? Grata!

    ResponderExcluir
    Respostas
    1. Gisele, no próprio tutorial tem essa explicação.
      bjssss

      Excluir
  19. Olá

    Elaine, boa tarde

    tenho sempre acompanhado seu blog. Coloquei o menu horizontal só que não abre as abas. Veja blog teste http://acessaconcursoseeempregos.blogspot.com.br/ - Aparece só os links.

    Copiei o código e colei direto no HTML/JavaScript

    Agradeço sua atenção!

    ResponderExcluir
    Respostas
    1. Experimente excluir os códigos do menu nativo do Blogger, e só depois insira este.
      Mas teste antes em um blog de testes, tá?

      Excluir
  20. O MENU É LINDO E PERFEITO MAS NÃO CONSIGO MUDAR A COR DA FONTE DO MENU, USEI A TABELA DE CORES Q VC INDICOU E NÃO MUDA O BRANCO :(

    ResponderExcluir
    Respostas
    1. Rachel, para mudar a cor da fonte releia o tutorial. E localize no código a parte que se refere à fonte.
      Se fizer certinho conseguirá, tenho certeza.
      bjsss

      Excluir
  21. Consegui!!!! Obrigada!!
    Como posso centralizar o menu?
    Meu site de teste http://ideiadelasites.blogspot.com.br/

    Este é o meu blog onde quero instalar o menu: http://ideiadela.blogspot.com.br/
    Como posso colocar a borda encima e embaixo, só consegui colocar borda na direita e na esquerda....

    ResponderExcluir
  22. Olá, Elaine! Seu blog é extremamente profissional. Estamos alterando novamente nosso layout e muitos dos códigos que precisávamos, encontramos aqui, funcionando perfeitamente bem. Gostaríamos de retribuir toda a ajuda de alguma forma. Parabéns pelo trabalho excepcional!! Abraços!

    ResponderExcluir
  23. Oi, gostaria de saber como acrescentar mais abas ao menu, pois tentei alguns metodos várias vezes mas sem sucesso. Desde já agradeço . Um beijo ! <3

    ResponderExcluir
  24. Ah, e também como faço para ele subir mais um pouco pois coloquei acima do cabeçaho, coloquei margin-top e não deu certo. bj

    ResponderExcluir
  25. kkkkkkk... Elaine... cérebro fazendo muita sinapse!!!! Tô quebrando a cabeça... mas este meu no meu blog... vai sair!!! Owww... se vai!!!!

    ResponderExcluir
  26. Parece que deu certo!!!!! Adoro tudo isto!!!
    Obrigada minha querida!!! Não precisa nem escrever né... que eu te admiro de montão e sou sua fã!!! Você já sabe é? :)

    ResponderExcluir
  27. Olá Elaine,o problema de Menu, é que ele não funciona na internet Explorer 11, só no Mozilla e Chrome. Pelo menos no meu blog, não funciona, mais o Menu é Maravilhoso, temo como adaptar ele no meu blog? Design de modelo!

    ResponderExcluir
  28. Elaineeeee! Não está dando certo... quando coloco o código no blog não aparece em formato de menu.... snif!

    ResponderExcluir
  29. Olá coloquei as abas no meu blog, porém só consigo visualizar uma sub-aba as outras não aparecem. Não consegui identificar se tenho que aumentar a caixa da sub-aba no código ou é o próprio blogger que não deixa eu fazer a alteração. http://entrelinhasdamagia.blogspot.com.br/. Colei sem alterar o código do blog de teste e houve o mesmo problema.

    ResponderExcluir
    Respostas
    1. Kallena, pode ser o lugar onde colocou o menu, pode ser seu template, pode ser algo em seu blog, etc...
      Experimente outro template, colocar em outro lugar, etc...
      Eu testei no modelo Travel e Simples, e sempre deu certo...

      Excluir
  30. Olá Elaine adoro suas dicas, e queria muito o menu horizontal com abas no meu blog, fiz e deu certo, porém quando coloco o link das páginas, dá que elas não existem no blog?! O que estou fazendo de errado, se puder me ajudar, serei muito grato!! BjoO grande e sucesso sempre!!

    Att; Wesley Felício

    ResponderExcluir
  31. Que bom! Finalmente encontrei um código que é exatamente como quero!!
    Sabe-me dizer como faço para alinhar o menu ao centro da página?

    Beijinhos

    ResponderExcluir
  32. Elaine, eu fiz isso, só que não consigo postar nada nas páginas, já pesquisei muito e não conseguir encontrar nada assim. Você poderia me dá dicas de como faz essas postagens?

    Obrigada e parabéns pelo seu blog, já me ajudou bastante.

    ResponderExcluir
    Respostas
    1. Letícia, um menu como esse funciona a partir de links. De marcadores.
      Insira marcadores em seus posts e coloque no menu os links desses marcadores.
      Aqui no blog tem post que ensina a inserir marcadores, e tem outros que ensinam como inserir os links no menu :)
      bjsssss

      Excluir
  33. Elaine, só venho aqui pra deixar meu muitooooooo obrigada! Teu blog tá me ajudando muito!!

    ResponderExcluir
  34. Eliane, como faço pra colocar um link nas abas sem que seja uma página de um post do blog, pois naquela opção sem ser o do html- "páginas"- n precisa de nada é só colocar o texto na aba, muito obrigada, bjs

    ResponderExcluir
  35. Olá, tudo bem?
    Primeiro, obrigada! Fiz tudo que você ensinou e deu certinho. Mas estou com problema pois não consigo alterar a cor do fundo do menu de jeito nenhum. Ele continua vermelho mesmo eu colocando código de outras cores. O que posso fazer?
    Obrigada

    ResponderExcluir
  36. Ola , o meu blog é este http://luaaa07.blogspot.pt/ eu criei separadores e queria criar subpaginas dentro deles, por exemplo carregar no Cantinho da Leitura e dentro dele estar em lista o nome das histórias que estou escrevendoe carregar nela e aparecer os capítulos, como se faz isso ?muito obrigada :)

    ResponderExcluir
  37. Oi, Elaine! Deixa eu te agradecer pelas suas dicas, menina! Parabéns pelo blog.. Valeu por compartilhar essas coisas que você sabe aqui com a gente! :)

    ResponderExcluir
  38. Bom dia. Estou voltando a mexer com blog e procurando como mudar algumas coisas no meu achei este seu blog com dicas. Este menu lá no meu blog ficou todo em branco, só aparece algo passando o mouse. Sabe me dizer o que aconteceu? Era para ficar igual a este do seu, né?


    http://artesamaosartesanato.blogspot.com.br/

    ResponderExcluir
  39. Muito grato pela generosidade em compartilhar conhecimento. Grande abraço da tripulação do Canoa Encantada Teatro de Animação!!

    ResponderExcluir
  40. Ola Elaine. Como faço para que o menu/submenu do blog funcione nos tablets. No tablet o submenu não está aparecendo porem no smartphone funciona perfeirtamente

    ResponderExcluir
  41. VLW PELA dica : ai vai uma dica tmb acelerador de internet online
    so funciona com a pag aberta (programa online) http://okspace.blogspot.com.br/ esse é da hraaaa vle a pena dar uma olhada.

    ResponderExcluir
  42. Eu queria o código do seu menu, pode passar?

    ResponderExcluir
  43. Elaine, sempre que tenho duvidas eu corro aqui!! obrigada amoooooo suas dicas, se puder dê uma olhada no meu blog minhapalavrachave.blogspot.com

    ResponderExcluir
  44. olá bom dia,
    sou iniciante nesse negocio consegui colocar o menu e sub menus mas como faço para colocar as postagens dentro dos menus???

    ResponderExcluir
  45. Alguém me diz onde eu mudo a cor das abas?

    ResponderExcluir
  46. Muuuito obrigada, Elaine!
    Não sei o que seria do meu blog sem você, sua linda!

    ResponderExcluir
  47. Muito bom Elaine, já instalei o menu, mas a minha duvida é toda vez que quiser encaixar um post na categoria terei que colocar o link do assunto acessando o gadget e lincando no mesmo marcador sempre? desde já te agradeço...abraço

    ResponderExcluir
  48. ola Elaine.
    Muito obrigado pelas dicas que tens nos oferecido!!
    Tenho um pedido a fazer!
    Eu tou desde procurando um Menu com os efeitos do Menu deste blog que ao rolar a pagina ele vai se encaixar no topo e quando desenrolas ele volta a posicao inicial, so que nunca encontro! seria possivel fazer um tutorial do mesmo!!
    Obrigado, espero pelo FeedBack.
    abracos!!

    ResponderExcluir
  49. Boa tarde Elaine, primeiramente quero ti agradecer por me responder sobre a hospedagem que fiz na sua seção pergunta-ê, já consegui resolver meu problema. A minha dúvida é que consegui instalar esse menu, porém gostaria de saber se tem como diminuir uma borda que fica sobrando do lado esquerdo, para que o menu fique exatamente da largura do meu cabeçalho? Desde já muito obrigada, bjsss

    ResponderExcluir
    Respostas
    1. Ana Paula, o menu vai assumir a área destinada à ele, e nesse caso seu template define essa sobra. É do seu template, infelizmente não há como alterar...

      Excluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…