Menu dropdown (com abas e sub abas)

em 14 de agosto de 2013

Não é de hoje que uma das coisas que mais me pedem seja um tutorial sobre como instalar e configurar um menu dropdown, ou como eu acho mais fácil dizer, com abas e sub abas.

Ensinei alguns ao longo do tempo, mas queria um que fosse bem simples de instalar e que não usasse javascript, apenas CSS e HTML.
Então compartilho com você este abaixo, que é um dos que mais uso em meus trabalhos de personalização de blogs.
Clique no botão e veja esse menu instalado em meu blog para testar tutoriais:

http://blogdetestesdaelaine.blogspot.com.br/

Para começar você precisa testar em um blog de testes.
Jamais faça experiências direto em seu blog "oficial".
E mesmo depois de testar, antes de instalar em seu blog real, faça backup dele.
Aprenda aqui:

Como fazer backup completo do blog

Precauções tomadas,é hora de por mãos à obra.

Para começar leia este tutorial até o fim antes de começar.
Depois volte aqui, eu espero.
tic tac
          tic tac

Leu tudo? Entendeu certinho?
Agora vamos fazer!


Instalando o menu com abas


Para começar entre no painel de seu blog, clique na aba Modelo e a seguir clique em Editar HTML.
Dentro da caixa de código tecle Ctrl-F e na barra de busca que abrir digite isso:

 /* Tabs

Dê Enter e assim que localizar selecione tudo que estiver dentro dessa tag, ou seja, de /* Tabs
----------------------------------------------- */ até encontrar /* Headings (no modelo Viagem) ou /* Columns (no modelo Simples).

No lugar do código que selecionou cole o primeiro código


Copiar os códigos


Caso seu blog não tenha esse trecho cole o código que forneci acima disso:
]]></b:skin>

Visualize e se não apresentar nenhum erro, salve as alterações. Obviamente você não verá nada ainda.
Acesse a aba Design e clique em Adicionar um gadget.
Escolha a opção HTML/JAVASCRIPT e na janela que abrir cole o segundo código.


Salve as alterações e veja que o menu está prontinho para ser configurado.
Vamos a isso, agora?

Configurando o menu


Onde deixei marcado em capslock no primeiro código são as áreas editáveis do menu. Você pode alterar cores, fontes, tipos de borda, etc.
Leia com atenção, é bem simples e fácil.

Agora aprenda como inserir os links nas abas:
Este menu funciona à base de links, sejam eles internos, externos, de marcadores ou de páginas estáticas.
Vamos supor que você queira colocar em uma das abas as principais categorias de seu blog.
Então você vai ao seu blog, e define quais categorias quer no menu.
Se fosse no meu eu colocaria assim:

<li><a href="#">Categorias do blog</a>
<ul>
<li><a href="http://www.elainegaspareto.com/search/label/Dicas%20para%20blogs">Dicas para blogs </a></li>
<li><a href="http://www.elainegaspareto.com/search/label/Trabalhos%20realizados">Trabalhos realizados</a></li>
<li><a href="http://www.elainegaspareto.com/p/todas-as-cronicas.html">Crônicas</a></li>
<li><a href="http://www.elainegaspareto.com/search/label/receitas%20daqui%20de%20casa">Receitas </a>
</li> <li><a href="http://www.elainegaspareto.com/search/label/Dicas%20da%20Elaine">Dicas da Elaine </a></li>
</ul>
</li>

 Entendeu como preencher as abas?
Caso queira acrescentar mais abas em cada casa basta incluir esse trecho

<li><a href="SEU LINK AQUI">NOME DA CASA 5 </a></li>

antes do fechamento da div, ou seja, antes de
</ul>
</li>
Se quiser menos casas basta apagar as que não quer.
Se quiser mais uma aba simples basta repetir a última aba:
 <li><a href="SEU LINK AQUI">NOME DA CASA 5 </a></li>
Antes do fechamento da div </ul>

Leia com atenção e faça antes em um blog de testes, tá?
Para copiar todos os códigos pare o mouse sobre eles e clique no primeiro ícone que aparecer. Abrirá uma janela com o código livre para ser copiado. 

Conheça a web-série Como personalizar o blog

  1. Como criar um blog: criação da conta Google e criação do blog
  2. Trocar o plano de fundo do blog e alterar largura e disposição das colunas
  3. Centralizar o nome do blog, os títulos dos posts e dos elementos de página (gadgets);
  4. Alterar cores e fontes dos títulos e do texto (fontes especiais, manuscritas, etc);
  5. Criar um menu com abas abaixo do cabeçalho e inserir links nele;
  6. Inserir assinatura personalizada;
  7. Colocar Voltar ao topo com efeito deslizante;
  8. Personalizar os comentários do blog (numerar, separar, incluir opção Responder, etc)
  9. Data dos posts em formato calendário
  10. Número de comentários dentro de um balão 

Importante!
Leia e releia tudo com calma e atenção, em especial os códigos, para entender o que cada parte faz!

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.

131 comentários , comente também!

  1. Aqui está uma coisa que eu gosto de ver nos blogues mas que nunca arriscaria a tentar pôr no meu.
    Eu nem sei como fazer uma cópia do blogue para o caso de algum dia ele desaparecer.
    Um abraço e uma boa semana

    ResponderExcluir
    Respostas
    1. Elvira,
      Como a Elaine já explicou, estando no Blogger, clique no nome do seu Blog, em seguida é só clicar em "Modelo" que fica do lado esquerdo, na próxima página que se abrir, ao lado direito acima, clique em Fazer Backup/Restaurar, se abrirá uma janelinha. Clique em Fazer download completo e está feito!

      Abraços

      Excluir
  2. Com certeza é um tutorial muito desejado por vários blogueiros (quando a gente consegue colocar marcadores em todos os posts, facilita muito a busca pelos assuntos no blog, e até pra gente ter uma noção do que já postou relacionado a determinados assuntos), e esse tipo de menu, é bem legal porque dá pra dividir um marcador em sub grupos...como colocar 'alimentação' e dividir as abas em , sei lá...'comida saudável', 'doces' :)

    E realmente tem que ser muito generosa pra disponibilizar esse tipo de tutorial, que não é nada fácil encontrar, ainda mais quando se trabalha com isso, com construção de blogs/sites.

    Eu só posso dizer muito obrigada Elaine por compartilhar.

    ResponderExcluir
  3. Oi, Elaine! Tutorial mais uma vez completo, com certeza, que pede disponibilidade de tempo e paciência para fazer a formatação certinha. Adorei a dica...o meu faço no flashvortex, mas o procedimento é bem parecido. Um abraço!

    ResponderExcluir
  4. E como fazer um menu igualzinho ao seu? Com abas, sub-abas e abas mas sub-abas? Ou seja, três níveis de abas! Obrigado!

    ResponderExcluir
  5. Menina, agora você falou "grego" rsrsrsr
    Difícil demais, só porque tem quie mexer no HTML, o que eu ainda não me atrevi.
    Quem sabe um dia você faz para mim?
    Beijos querida.

    ResponderExcluir
  6. Olá Elaine muito legal seu blog com ótimo conteúdo gostaria de lhe dar os parabéns e desejar sucesso aqui no seu espaço e que DEUS ilumine ricamente e abundantemente sua vida e de seus familiares
    Um grande abraço

    ResponderExcluir
  7. Elaine...
    muito bem explicadinho, mas te confesso eu sem você jamais teria um desses em meu blog, rs...
    Tico e teco num acompanha não menina...
    Beijos e Beijocas...

    ResponderExcluir
  8. Essa de primeiro testa em outro blog eu já aprendi! eu juro! rsrsrsrs
    Parabéns pelo Tutu Elaine!
    Como sempre trazendo informação na medida certinha!
    bjos no coração querida!
    Que Deus lhe abençoe cada dia mais e mais!

    ResponderExcluir
  9. Eliane que belo tutorial. Dia desses, pesquisei sobre isso, mas não encontrei assim, tão bem explicado. Obrigada. E a propósito, agradeço também sua solidariedade expressa lá no blog quanto aos plágios que andam por aí. Na verdade, pessoas como você, que dividem com carinho e desprendimento seu saber, não dão em árvore... Por isso, faço questão de parabenizá-la pelo trabalho mais uma vez e agradecê-la por tudo.

    ResponderExcluir
  10. Eliane que belo tutorial. Dia desses, pesquisei sobre isso, mas não encontrei assim, tão bem explicado. Obrigada. E a propósito, agradeço também sua solidariedade expressa lá no blog quanto aos plágios que andam por aí. Na verdade, pessoas como você, que dividem com carinho e desprendimento seu saber, não dão em árvore... Por isso, faço questão de parabenizá-la pelo trabalho mais uma vez e agradecê-la por tudo.

    ResponderExcluir
  11. Oi querida!
    Eu adoro esse menu. Acho lindo e chique!
    E você, mais uma vez, deu uma aula perfeita! Obrigada!
    Espero que esteja tudo bem por aí! Vocês continuam em minhas preces e no meu pensamento!
    Beijinhos,
    Cris

    ResponderExcluir
  12. Essa indireta do menu foi pra mim... hehehe
    Serio Elaine, agora aprendi...
    Bj e parabens pelo tutu!

    ResponderExcluir
  13. Obrigada Elaine. Graças ao vídeo que me mandou, criei cópias de todos os meus blogues.
    Também fiz um blogue de testes para ver se conseguia esta história das abas, mas não fui capaz. Sempre diz que há um erro na linha 2 que não permite ver a pré visualização e por consequência também não guarda o modelo. De qualquer modo o que aprendi já foi de grande ajuda.
    Um abraço e Deus a abençoe

    ResponderExcluir
  14. Oi Elaine td bem?
    Preciso muito da sua ajuda rsrsr
    td que fiz no meu blog até hj eu aprendi com vc, mas como sou muito inexperiente
    não sei como fazer quase nada, por exemplo como colocar borda... tipo separando as postagem dos gadget. por favor me ajuda!!!
    Sou muito sua fan bjsss desde ja agradeço

    ResponderExcluir
    Respostas
    1. Roberta, assim que possível vou postar sobre isso.
      Obrigada pela dica.
      beijossss

      Excluir
  15. Oi Elaine,
    Agora fiquei assustada. Sempre faço download do meu blog (template e postagens) mas nunca precisei usar. Hoje, pra tentar inserir o dropdown que você está ensinando aqui, criei um blog para testes como você aconselha, e fiz upload do backup pra brincar nele. Mas fica tudo diferente, achei que eu teria o template igualzinho ao blog ativo (com exceção das configurações ligadas ao endereço do blog). Terei que ajustar tudo manualmente de novo? Se acontecer uma tragédia e eu perder o meu blog (bato na madeira três vezes), é assim que acontece?
    Estou ansiosa pra inserir a dica deste post no meu blog e vai demorar tanto pra acertar tudo no blog de testes... Adoro suas dicas, já instalei e uso várias.

    Beijos

    ResponderExcluir
    Respostas
    1. Patrícia, quando fazemos o backup do blog ele salva o modelo apenas, e isso não inclui os gadgets.
      Se fizer o backup do conteúdo ele salva os posts e os comentários. Mas os gadgets não.
      Então eu sempre recomendo que gadgets mais importantes sejam salvos em blog de testes.
      E sim, quando reinserimos os template fica tudo bagunçado mesmo, tem que ajeitar manualmente.
      Sim, dá trabalho mas vale a pena.
      beijossss

      Excluir
    2. Obrigada pela dica Elaine, vou fazer também o backup dos gadgets também. Ainda bem que vi isso agora.
      Estou com mais uma dúvida aqui. No blog de testes, já consegui inserir direitinho o menu dropdown, mas se eu quiser inserir mais um submenu (adicionando mais um "ul" dentro da "li" "sub aba") teria que alterar outra parte também? Experimentei assim e não funcionou.

      Ah, aproveitando o comentário testamento kkkkk, eu gostaria de saber se tem como responder a comentários sem que essa resposta seja contabilizada como mais um comentário. Sabe? A pessoa faz um coment no blog, eu respondo, e o contador indica 2 comentários. Existe como somar só o comentário externo?

      Beijos

      Excluir
  16. Olá Elaine,
    obrigada por compartilhar seu conhecimentos. Criei um blog há poucos dias e já utilizei muitos de seus tutoriais.
    Apliquei esse menu e ficou muito lindinho. Mas esse tutorial funciona para menus com 3 níveis como o seu? Nome da casa, sub aba e outra aba depois da sub aba?

    Abraços,
    Obrigada!

    ResponderExcluir
  17. oi querida tudo bem?
    todos os tutoriais q vc coloca o cod pra localizar... eles nao existem no meu blog... aff
    será q o problema sou eu? sniff

    ResponderExcluir
  18. Com muito, muito custo, e muita, muita paciência, estou conseguindo deixar do jeitinho que eu quero <3 http://apenasoutrocaminho.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Sim, esse é o segredo: paciência.
      Parabéns!!!

      Excluir
    2. Elaine, estou deixando meu menu do jeitinho que eu gostaria, mas tem uma linha tracejada sobre os itens que está me incomodando e não descobri como tirar... Você me ajuda a tirar?
      Olha lá no blog como está: www.patriciaaprendendo.com

      Beijos

      Excluir
    3. Patrícia, o pontilhado é característico de seu template. Para retirar procure em seu código fonte por algo como

      border-top: dashed

      e apague. Isso vai tirar o pontilhado de todos os widgets, tá? Inclusive da sidebar.
      beijossss

      Excluir
  19. Oi Elaine, tudo bem? Quando aperto ctrl + F pra procurar não acha nem /*tabs e nem ]]> o que faço? Obrigada

    ResponderExcluir
    Respostas
    1. Nicole, caso seu template seja modificado os códigos podem estar diferentes.
      Nesse caso pode colar o que precisa dentro da folha de estilos.
      Mas no caso de seu template eu achei de primeira, bem facinho.
      Procure de novo, está lá, tenho certeza.
      Lembre que Ctrl+F tem que ser teclado dentro da caixa de código, na barra de pesquisa que abrir, tá?
      bjssss

      Excluir
  20. Olá Elaine ! Tb não sou capaz de fazer isso tudo kkkk mas vou me esforçar pra aprender algo aqui com seus ensinamentos pra tentar melhorar meu blog.... mas já te mandei um e-mail hj... preciso dos seus serviços !!!!! kkkkkk bjao
    Laura

    ResponderExcluir
  21. Eliane, me ajuda por favor. Eu queria subir um pouco o menu, porém já alterei vários numeros e não sobe de jeito nenhum :/

    ResponderExcluir
    Respostas
    1. Natalia, depende de qual template está usando. Em geral esse menu vai ocupar a área que era do menu de links, caso esteja usando um dos templates do Blogger.
      Acho que não dá pra subir...

      Excluir
  22. Como faço para fazer uma sub-aba dentro de outra sub-aba? Como tem aqui no seu blog na aba "Saiba Mais" e "no Blog Tem"?

    ResponderExcluir
  23. boa noite eliane, consegui colocar seu selo na minha pagina, hoje, pode visitar o blog. rosebockminhavidaapos50
    não consegui ainda colocar as saudações e nem o menu horizontal. gratidão pela ajuda. muita luz divina!

    ResponderExcluir
  24. Eu praticamente fiz um novo blog com tanta dica boa que tem aqui. Mas essa das abinhas é sensacional, deixou meu blog muuuuuito mais prático. Segui passo à passo suas orientações, nunca tinha mexido no HTML (na verdade, nem sabia o que era isso), mas, depois de vários testes em outro blog, eu consegui. MUUUUUUUUUUITO OBRIGADAAA!

    ResponderExcluir
  25. Não consigo procurar o termo :  /* Tabs.
    Sempre que procuro por ele a barra de escrita torna para a caixa do HTML. :(
    Logo quando dou ENTER, oque faz é mover os códigos do HTML.
    HELP!!!

    ResponderExcluir
    Respostas
    1. Olá Sofia, também tive o mesmo problema! Retire o espaço antes do /. Então vc encontrará. Continuo não conseguindo finalizar, pois está aparecendo tudo misturado no menu... e não bonitinho, no post da Elaine.

      Excluir
    2. Sofia, se seu template for externo ao Blogger ele não terá esse trecho.
      Nesse caso cole o código dentro da folha de estilos, conforme explico no texto.
      beijos

      Excluir
  26. Elaine, percebi que o erro está no momento de copiar o HTML para o blogno GADGET, ele acaba alterando, por que acontece isso?

    ResponderExcluir
    Respostas
    1. Não sei, realmente não faço ideia, desculpe...

      Excluir
  27. Oi, como eu mudo a cor dos menus pq a cor que tinha não ficou boa no meu blog o que eu faço?

    ResponderExcluir
  28. Não tinha prestado atenção direito e nem entendido muito mas agora eu entendi muito obrigada!

    ResponderExcluir
  29. não consegui quanto faço fica com omenu mas mais desorganizado do q tudo acesse para ver melhor
    blogdetestedeeduardopereira.blogspot.com.br

    ResponderExcluir
  30. Não consegui =( As subabas ocupam o local de Abas

    ResponderExcluir
  31. Elaine, super Guru dos Blogs, eu até consegui fazer as abas/subabas
    Minha dúvida é importar os posts para as devidas abas.... não consegui achar tutorial aqui...

    ResponderExcluir
    Respostas
    1. Eliane, desculpe, olhei com mais atenção e achei....Obrigada!
      Tenho estudado nas horas vagas, em meio a carrinhos, fraldas e peito...rs
      Se quiser conhecer meu mundinho http://www.namorarsempre.com
      Mas as inovações estão no blog test... progredindo!!

      Bj e mais uma vez obrigada!!

      Excluir
  32. Oii, muito obrigada por essas dicas tão preciosas... mas deixa eu tirar uma duvida, depois que coloco o menu, como coloco as postagens num menu, ou submenu determinado? obrigada :D

    ResponderExcluir
  33. Muito Bom mesmo seu Tutorial, mas aconteceu um probleminha e queria saber se vc consegue me ajudar, as SUB-ABAS não ficaram escondidas...o que será que está acontecendo...?

    ResponderExcluir
    Respostas
    1. Eu revisei o código, o segundo.
      ente de ovo, acredito que dará certo.
      bjssss

      Excluir
  34. Alguém me ajuda não to conseguindo colocar no meu blog não, alguém me ajuda

    ResponderExcluir
  35. Segui seu tutorial: Show de bola. Funcionou tudo direitinho! Obrigado por compartilhar seu conhecimento. Gostaria de saber como faço para mudar a cor do menu dropdown.
    Abraço!

    ResponderExcluir
  36. Nossa amei!! O melhor post para menu! Só não segui mudar HOME para Inicio.. mudei o nome no código e salvei mas continua como HOME, poderia me ajudar?
    Obrigada!

    ResponderExcluir
  37. Boa tarde Elaine!
    Consegui colocar o menu dropdown direitinho como você explicou, mas eu queria criar mais uma aba da sub aba. Por exemplo, no seu blog tem o menu 1 "Dicas para blogs" - 2 "dicas específicas sobre:"2.1 "comentários" 2.2 "recursos e truques"....
    Eu não estou conseguindo criar um submenu do submenu. Tem como você men mandar o código?
    Abraços

    ResponderExcluir
  38. O meu não fica no topo do blogger, ele fica na coluna da direita, meu blog tem 2 colunas, como que faço pra ajeitar ? Abraços seus tutorias são excelentes !

    ResponderExcluir
    Respostas
    1. Breno, para que fique abaixo do cabeçalho precisa arrastar o menu para lá, onde deseja que fique,
      E não esqueça de salvar depois de arrastar.
      bjssss

      Excluir
  39. Parabéns! Seu blog é ótimo. Conseguimos, finalmente, colocar o nosso menu dropdonw com suas excelentes dicas.
    É possível no menu dropdown colocar um link que mostre todos os posts de um marcador? Pois não queremos colocar muitas sub-abas numa mesma casa do menu. Se possível nos ajude.
    Desde já agradecemos.

    ResponderExcluir
    Respostas
    1. Para colocar os posts de um mesmo marcador basta copiar o link do marcador em questão e no campo Link do menu colar esse link.
      Certinho?
      bjssss

      Excluir
  40. Consegui fazer o menu dropdown e o fixo, mas como posso fazer o meu menu ficar como dropdown e fixo no topo?
    Agradeço desde já!
    Parabéns pelo blog!

    ResponderExcluir
    Respostas
    1. Maxwel, esse menu não tem essa função.
      Seria preciso outro código, que no momento ainda não postei.
      Mas fica a dica, assim que possível eu farei.
      Muito obrigada pelo elogio!

      Excluir
  41. eu consegui fazer tudo, mas a aba fica transparente e só as sub abas com a cor rosa no fundo, como faço pra alterar?

    ResponderExcluir
    Respostas
    1. Experimente mudar a posição do menu, pode ser isso...

      Excluir
  42. Adorei esse tutorial, fica muito bom e deixa o blog mais fácil de acessar para os leitores :D
    Eu consegui fazer com que esse menu ficasse fixo no topo do blog mas eu gostaria de colocar uma caixa de pesquisa junto. Você sabe como posso fazer isso?

    :D

    ResponderExcluir
    Respostas
    1. Mayara, experimente usar este tutorial:
      http://ciudadblogger.com/2012/04/menu-horizontal-con-subpestanas-y.html

      No final do primeiro código tem esse trecho que começa com #search

      E para o html tem o trecho que começa com <form action
      São eles que fazem o menu ter a caixa de busca.

      Espero que ajude...

      bjssss

      Excluir
    2. Consegui \o/.
      Muito obrigada pela ajuda, seu blog tem me ajudado muito :D
      bjo

      Excluir
  43. Depois de criar uma aba ''Entrevistas'' por exemplo, todas as postagens sobre entrevistas eu tenho que posta nessa aba?

    ResponderExcluir
  44. eu estou criando um blog de games queria saber como colocar uma aba dentro de uma sub aba exp:games para download>luta>mortal kombat, steet fight para não ter que adicionar muitas abas no menu?

    ResponderExcluir
  45. Não to conseguindo editar as cores, texto, etc. Pode me ajudar? A cor do plano de fundo não altera, a fonte de texto, entre outras coisas.

    ResponderExcluir
  46. Elaine com é que eu coloco varios links em uma sub aba?

    ResponderExcluir
  47. Elaine, bom dia!

    Primeiramente parabéns pelo excelente trabalho!
    Meu menu está pronto, porém eu não estou conseguindo posicioná-lo, no meu caso preciso dele á esquerda.
    Qual a linha de códigos para essa configuração?

    Grato desde já!



    ResponderExcluir
  48. Oi, seu blog foi o único que explicou tudo completinho e consegui entender tudo. Mas no final o meu menu ficou ao lado e nao em cima como ficou no seu blog teste. O que eu fiz de errado ?

    ResponderExcluir
  49. Boa tarde Elaine, quero agradecer imensamente por compartilhar seus conhecimentos. Há algum tempo planejava criar meu blogue, e esperei minhas ferias para começa-lo, quando encontrei seu blog e suas explicações não parei mais. OBRIGADO, você me ajudou e me inspirou muito. bjs no seu coração....

    ResponderExcluir
  50. Este comentário foi removido pelo autor.

    ResponderExcluir
  51. Este comentário foi removido pelo autor.

    ResponderExcluir
  52. Oi Elaine! Adorei seu tutorial, super explicadinho! Quebrei a cabeça e consegui. O único problema é que ele fica transparente. Eu já tentei de tudo, inclusive mudar de local como você falou para alguém em um outro comentário, mas não funcionou... Será que você teria alguma luz para o meu 'problema'?
    Desde já, obrigada!

    ResponderExcluir
  53. Oi Elaine! Não é mais necessário. Fui fuçando e descobri que tem que colar o primeiro código devidamente alterado em "Personalizar", "Avançado" e depois "Adicionar CSS". Obrigada! :)

    ResponderExcluir
  54. Olá Elaine,
    deu o maior trabalhão, foram muitos links para adicionar =D
    Creio que com o tempo terei que tirar, pois as sub abas ficarão enormes.
    Deixo meu muito obrigado e um beijo,
    A Casa da Mãe Jana

    ResponderExcluir
  55. Ola querida mais uma vez estou aqui, te enchendo de comentários, mas o que foi....é que alem de te seguir eu virei sua fã....rs
    E como eu amo este mundo de blogueira, eu estou de estudando muito para fazer com que meu blog fique lindo e fofo.
    E as suas dicas são de suma relevância para mim.
    Tem dias que fica até as 2 da madruga lendo, estudando e aprendendo com você!
    E POR ISSO... venho lhe agradecer por mais uma vez...obrigada!

    ResponderExcluir
    Respostas
    1. Ah, que fofa você!
      Pode comentar, amo comentários!!!
      E saiba que eu também passo madrugadas estudando, blog é algo que quanto mais a gente aprende mais percebe que tem pra aprender...
      beijossss

      Excluir
  56. Elaine, adoooooooooorei! Vou tentar colocar hoje no meu blog. Mas te falar, esse é aquele menu que fica fixo no topo? Se não for, como faz pra deixar ele fixo no topo igual aquele outro que você mostrou aqui ?
    Beijoo

    ResponderExcluir
  57. Elaine , eu consegui... levei mais de 4 horas pra fazer ficar bonitinho como eu queria no blog de teste....
    Veja: ♥♥♥ Teste♥♥♥
    e Dai mudei para meu blog de Literatura: ♥♥♥ Amantes de Jane Austen ♥♥♥
    e depois para meus blog de arteanato: ♥♥♥ Ateliê Arte e Carinho ♥♥♥
    Veja o que voce acha.... Muito obrigada pelos tutoriais... Seu blog já está no meu Hall de Blogs de dicas de Personalização.

    ResponderExcluir
  58. Por favor,me responde. Eu quero um desse jeito só que eu quero que role com a pagina,tipo o seu. Pf

    ResponderExcluir
    Respostas
    1. Letícya, esse menu que eu uso ão tem tutorial no blog mas está à venda em minha loja vurtual.
      Aqui:
      http://loja.elainegaspareto.com/2015/02/menu-dropdown-multinivel.html
      beijos

      Excluir
  59. Oi.
    Eu gostava de saber como centralizar este menu.
    Fiz e ficou como eu queria, só falta estar centrado.
    Obrigada

    ResponderExcluir
    Respostas
    1. Ângela, ele precisa de mais abas para centralizar, experimente inserir mais abas e ele fica melhor.
      bjsss

      Excluir
  60. Olá! Seu blog é maravilhoso! Tem me ajudado bastante. Consegui por o menu dropdown no meu blog. O meu problema são os links. Como é que faço para quando clicar numa casa esta seja redireccionada para uma pagina sobre algo especifico? Por exemplo, quando clicar na casa chamada "Beleza" esta ser redireccionada para todos os meus posts sobre beleza. Tenho que inventar um link onde diz "cole aqui o seu link" ?

    ResponderExcluir
    Respostas
    1. Joana, releia o tutorial, tem uma parte onde explico como inserir links nas abas.
      beijosss

      Excluir
  61. Ficou legal, mas tem como mudar a cor de quando passa o mouse? Pq ele fica rosa e eu queria outra cor pra combinar com o blog

    ResponderExcluir
  62. Bom dia!
    Gostaria que me ajuda-se, como faço par criar uma aba dentro da sub aba?
    Desde já agradeço.

    ResponderExcluir
    Respostas
    1. Ademacen, nesse menu não há como inserir multiniveis.
      Teria que ser outro código, outro menu.
      Att.

      Excluir
  63. Oi, Elaine!Desculpe incomodar, mas não acho esse tutorial em nenhum lugar!Como é que eu consigo deixar esse menu fixo?Obrigada ♥

    ResponderExcluir
  64. Oii, Elaine, tudo bem?
    Gostaria de colocar esse menu no meu blog. Mas gostaria que as sub abas dessem para um conjunto de postagens. Por exemplo: A aba principal eu colocaria como MIX e sub abas nela como TAGS, DECORAÇÃO e RECEITAS. Mas gostaria que quando alguém clicasse na sub aba TAG fosse direcionado para uma página com todas as TAGs respondidas. Como fazer isso?

    Obrigada.

    ResponderExcluir
  65. Olá Eliane, obrigado pelas dicas, elas tem sido muito úteis!
    como eu faço pra alterara a cor desse menu?
    abraço!

    ResponderExcluir
  66. OI como eu faço para tirar uma parte dele que fico sem nada

    ResponderExcluir
  67. Ola, boa noite...
    Achei fenomenal seu blog e seus tutoriais. Parabens!
    Esse menu é fenomenal, porém gostei mais ainda desse menu deslizante do seu blog...
    andei pesquisando na internet e achei outros modelos parecidos em outros tutoriais, porem nenhum tao bem explicado como os seus tutoriais, alias, sem nenhuma explicaçao de como inserir no blog...
    http://www.1stwebdesigner.com/create-stay-on-top-menu-css3-jquery/ e http://tympanus.net/codrops/2009/12/11/fixed-fade-out-menu-a-css-and-jquery-tutorial/

    São dois modelos parecidos com o modelo que voce usa.... como faço pra inserir o primeiro no blog?
    Que tal um tutorial? Acho que todos vão gostar....
    Mil beijos e obrigado por tantos tutoriais maravilhosos.

    ResponderExcluir
  68. Elaine, primeiro que tudo muito obrigada pelos seus tuturiais, tem me ajudado muuuuiiittooo!
    Queria perguntar se já tem tuturial de como colocar esse menu Dropdown fixo no topo, ja tentei um monte deles mas nenhum fica bom.

    Beijos e mais uma vez, muito obrigada pelos tuturiais!

    ResponderExcluir
  69. como faço pras sub abas rem pra direita e na pra baixo??

    ResponderExcluir
  70. Oi Elaine, tudo bem?
    Gostaria de saber como deixar a fonte na cor preta, porque já tentei mexer em tudo e só fica branca...
    Obrigada :)

    ResponderExcluir
    Respostas
    1. Troque onde está marcado no código, troque #fff pelo código da cor que deseja, no caso #000

      bjssss

      Excluir
  71. Bom dia Elaine, queria que me tirasse uma duvida?

    eu usei o menu, mas não sei mudar a posição dele, está muito a direita ->, queria trazer mais para a esquerda <-

    o que devo alterar no codigo?

    ResponderExcluir
    Respostas
    1. Você já experimentou mudar a posição dele no layout?
      Dependendo do template o local para colocar pode mudar...

      Excluir
  72. Boa noite,ficou bom mas é diferente desse que vc esta usando acima,vc poderia me passar esse aí em cima,desde já no aguardo.

    ResponderExcluir
    Respostas
    1. Lobo, esse que eu uso não está disponível nos meus tutoriais.
      Atenciosamente

      Excluir
  73. Muito interessante, era exatamente o que eu procurava, mas sou um pouco leigo no assunto por isso não estou me dando bem em configurar a aparência do menu Queria o fundo preto com as letras brancas e ao ser selecionado, que ficasse em azul, logo em seguida abrir o sub menu em fundo preto e letra branca.

    Mas a sua ajuda foi dada, basta agora eu me esforçar pra tentar entender.
    Muitíssimo obrigado, seu blog é genial. Abraços, Elaine.

    ResponderExcluir
  74. ELaine me ajuda por favor eu fiz tudo o que me disse aí mas não deu certo, eu preciso que fiquem 7 Guias e 4 subguias em cada guia no meu blog mas deu errado, as guias não aparecem todas e quando aparecem tem menos subguias do que preciso, geralmente apenas 2 porquÊ?

    Segue meu log code de como está a estrutura do código.
    http://www105.zippyshare.com/v/jBXB6c1S/file.html

    [ Coloquei em download o arquivo TXT para não floodar seu blog]
    e meu blog > http://xbox360classics.blogspot.com.br/

    ResponderExcluir
  75. Oi Elaine! Obrigada pelo tutorial. Muito bom!!!
    Eu consegui fazer o menu seguindo seu tutorial, mas diferente de como ficou no seu demonstrativo, o menu no meu desce junto com o página... por que? Como faço pra ele ficar quietinho lá em cima?

    ResponderExcluir
    Respostas
    1. Bruh, você confundiu os menus.
      Esse é o que aparece abaixo do nome do blog.
      O que fica fixo no topo é outro, procure aqui no blog por menu fixo no topo do blog.

      bjssss

      Excluir
    2. Eu vi esse outro menu..mas ele não tem as sub abas ou sub menus. estou a procura de um que seja fixo,mas com sub menus,igual à esse que fica no topo do seu blog..

      Excluir
  76. Oi Elaine, tudo bom?
    Tem como retirar as linhasinhas que separa cada nome?
    Obrigada (-:

    ResponderExcluir
    Respostas
    1. Ingrid, procure no código o trecho que define as bordas e apague-o.
      bjsss

      Excluir
  77. Uma delicia Eliane, estou a conseguir sem qualquer dificuldade, apenas tem um senão, não é deslizante :(
    Ou seja

    Se a meio de uma visita o visitante quiser mudar de aba, tem que regressar ao topo o que é incómodo. Tem cura para isso?

    Grata desde já

    ResponderExcluir
    Respostas
    1. Esse menu não é fixo no topo...
      Mas tem um que é, procure por Menu fixo no topo :)
      beijosss

      Excluir
  78. Olá Elaine. Tudo bom? Tenho uma dúvida. E como coloco o menu do blog para funcionar no modo mobile também? Tenho um modelo responsivo, porem no celular não aparece o menu. Tem como me ajudar? Grato dede já! Beijoos!!!

    ResponderExcluir
  79. Muito obrigado pelas dicas.
    Funcionou direitinho.
    Beijão.

    ResponderExcluir
  80. Nossa, eu nem sei como agradecer a esse post tão maravilhoso que deixou meu blog lindo demais e do jeitinho que eu queria!

    michellemourablog.blogspot.com

    ResponderExcluir
  81. Boa tarde. Este tutorial ajudou-me imenso mas gostaria de saber como posso centrar o menu, tenho apenas 5 "casas" e gostaria que ficassem centradas e não à direita. Será que dava para explicar? Obrigada

    http://batomebotasdatropa.blogspot.pt/

    ResponderExcluir
    Respostas
    1. Catarina, esse menu, para centralizar, precisa mudar os valores em widht.
      Para acrescentar casas basta repetir o trecho que define as abas, colocando-o antes de fechar a div do final do menu.

      bjssss

      Excluir
  82. Continua dizendo que a página não existe, como resolver o problema?

    ResponderExcluir
    Respostas
    1. Releia o tutorial, a informação que você precisa está nele.

      Excluir
  83. Ola,

    Gostei muito da dica mas estou tendo dificuldades em centralizar o menu de acordo com o cabeçalho, ele fica um pouquinho a direita e nao na margem a esquerda, poderia me ajudar? tbm gostaria de saber como mudar o tamanho e o tipo da fonte para Open Sans.. eu mudo no codigo mas nao muda no menu. Segue se puder dar uma olhada.

    http://assistirgameofthronesonlinehd.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Eu olhei e pra mim a fonte aparece correta, open sans.
      Sobre o posicionamento experimente ir alterando os valores em padding.
      Aí não tem jeito, é mexer até achar onde mudar, tentativa e erro até conseguir.
      Sim, dá trabalho mas com paciência vai dar certo...

      Excluir
  84. Elaine por favor me da uma ajudinha?!
    É possível colocar mais de uma postagem dentro de uma sub-aba?
    ex:
    *CABELOS*
    -CORTES
    -TENDÊNCIAS
    -PENTEADOS

    consigo colocar mais de um link de postagem dentro de "TENDENCIAS" por exemplo?!
    Desde já gradeço!!!
    beijo grande Querida!!!

    ResponderExcluir
    Respostas
    1. Thaisa você não deve lincar a postagem e sim o link do marcador. Ex: Clica no marcador TENDENCIAS e copia o link dele para o menu. Assim, toda vez que você postar com esse marcador ele puxa direto.

      Excluir
  85. Oi Elaine. Parabéns de verdade pelo trabalho que realiza aqui ;)
    Adorei o tutorial e até agora está indo tudo bem. Fiquei com uma pequena dúvida: Como faço para deixar os nomes do menu e submenu em negrito?
    Beijos e obrigado

    ResponderExcluir
    Respostas
    1. Dafne, onde está font-weight: none substitua none por bold.
      bjssss

      Excluir
  86. Oi Elaine, muito obrigado pelo tutorial, me ajudou e muito. Mas eu gostaria de saber, caso eu queira colocar no topo do blog como um menu fixo o que eu devo fazer?

    ResponderExcluir
    Respostas
    1. Oi!
      Faz assim: coloque positin: fixed;
      abaixo de #NavbarMenu {
      E o segundo código, ao invés de colocar como gadget HTML cole direto no código fonte acima de ou abaixo de < body >

      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…