Menu horizontal com sub-abas

em 4 de abril de 2012


Um dos pedidos mais comuns aqui na sessão dicas para blogs diz respeito à menus horizontais.Eu uso este aí abaixo do cabeçalho há bastante tempo, e tenho instalado o mesmo modelo em alguns blogs que personalizei. Mas o funcionamento dele depende do template que o blog usar, então fui procurar um outro menu com sub-abas que fosse mais fácil de usar. E achei. E agora reparto com você.

Para começar vá ao seu painel do blog e acesse o código fonte de seu blog. Dentro da caixa de código tecle Ctrl+F.
Na barra de busca que aparecer digite ]]></b:skin> e tecle Enter para localizar.

Acima dela cole o Código CSS:


Copiar os códigos


Salve seu template.
Para modificar as cores e fontes observe que já deixei sinalizado no código.

Mas atenção! Só altere onde está marcado, ou seja, somente cores e fontes. E muito cuidado para não apagar nenhum sinalzinho senão o menu não funciona.


Agora a parte mais fácil: Vá ao seu painel e clique na aba Design. Clique em Adicionar um gadget e escolha a opção HTML/JAVASCRIPT.
Na janela que abrir cole o Código HTML.


Faça as devidas modificações, inserindo seus links e os nomes que deseja que apareçam em seu menu. Salve.
Tá pronto.

Parece muito difícil, e realmente é preciso atenção.
Mas quando a gente quer aprender uma coisa a gente sempre consegue.
E assim, com tudo sinalizado, fica bem mais simples, né? Uma dica é você testar tudo antes em um blog de testes.
Daí, quando sentir segurança insere a novidade em seu blog.
É assim que eu faço, até aprender.
E se não der certo em um template, tente outro pois nem todos aceitam o menu com abas.
Vá testando até conseguir.
Demora, mas vale a pena aprender algo novo.
E lembre-se que nem sempre o Internet Explorer aceita mostrar esse tipo de menu. Aliás, o Explorer é complicadinho...


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.

65 comentários , comente também!

  1. Aprendi o nome "horizontal com abas" rsrs é isso que quero também. Um dia vou combinar com você.Tenho o maior medão de mexer com HTML rsrs
    Beijos.

    ResponderExcluir
  2. Dicas ótimas, Elaine, como sempre. Fazia tempos que eu queria aprender sobre os menus horizontais, como instalar. E agora assim com tudo "mastigadinho" por você, não tenho mais desculpas para não colocar em prática.

    Ótima dica também do blog para teste, importantíssima !

    Beijo grande, que Deus te ilumine sempre, e transforme em felicidade toda a generosidade que você tem conosco. Obrigada por compartilhar.

    ResponderExcluir
  3. Eliane passei pra dar um oi e xeretar as novidades passa lá quando puder bju carinhoso!

    ResponderExcluir
  4. ahaha Elaine agora que você me cativou não quero outra vida! Vou sempre lhe precisar, porque se eu sobrevivesse de informática já era! kkkkkk

    bjsssss

    ResponderExcluir
  5. Flor adorei seu blog as dicas são otimas estou seguindo beijos me visite se gosta do meu cantinho me segue

    http://rosanadicasfemininas.blogspot.com/

    ResponderExcluir
  6. Olá, tava olhando uns posts na lista de uns
    amigos e encontrei o seu blog.
    Mt legal por sinal, layout bacana e bons textos.

    Realmente uma página boa pra leitura.

    Já virei seu seguidor.

    convido você pra dá uma passadinha lá no:

    http://umguiadecomoviverbem.blogspot.com/

    Luz nos seus caminhos.

    (...)

    ResponderExcluir
  7. Olá Elaine adorei seu Blog ele é tudo de bom, obrigada pelas dicas .
    Estou te seguindo com muito prazer.
    Bjim, fica com Deus!!

    ResponderExcluir
  8. Oi querida ! sempre passo no seu blog, mas quase nunca comento pq vivo na correria, achei muito bacana de sua parte compartilhar isso com a gente...Pq uma pessoa me cobrou um absurdo para fazer uma personalização pequena em meu blog, e o que eu queria era exatamente isso que vc fez , vou tentar lá pra ver se consigo, por um acaso vc já fez algum post sobre aquele negócio rsrs de "Vc poderá gostar de": queria adicionar no meu também, desculpas se é pedir demais...Bjus Parabéns pelo trabalho...

    ResponderExcluir
  9. Sabe eu tava sumida daquineh? aff dodoi com coisas chatas nao gosto de incomodar as amigas, mas tenho aparecido escondida, ate agora pendo pq nao coloco ganache no bolo sabia? Mas menina aprender a mexer no blog ta dificil, tu ainda me ama? me adora e me cuida? precisooooo do meu blog loja se nao alguem la de sinop me processa kkkk...

    beijokas e otimo find

    Fer

    ResponderExcluir
  10. Breve chamarei, sim, Elaine. Quero colocar esta barra para separar meus livros, os livros de amigos e aquela eternidade de selos. rsrs.

    Elaine, a minha crônica de ontem foi inspirada em um texto seu. Depois , se quiser ler...
    Obrigado sempre, minha querida.

    Um ótimo dia. Paz e bem.

    ResponderExcluir
  11. @Cláudia, bom dia
    Sim, tem um tutorial explicando mas agora não lembro qual.
    De todo modo, acesse esse endereço: http://www.linkwithin.com/learn?ref=widget
    Lá vai abrir direto na página do site. Lá, preencha os dados que pede e instale em seu blog como gadget normalmente.
    Certo?
    Beijossss

    ResponderExcluir
  12. Oi Elaine, amei o seu blog!
    Muito legal o tempo que você separa para ajudar as iniciantes, como eu. :)
    Bjs,
    Vivian.

    ResponderExcluir
  13. Elaine
    Sabe do que realmente estou com medo? Do meu blog desaparecer como aconteceu com a sanzinha.
    E nem sei como protege-lo
    com carinho Monica

    ResponderExcluir
  14. Oi Elaine,conheci seu blog hoje,passei a tarde toda olhando as dicas,inclusive,add um código ao meu blog. Gostei demais daqui,com certeza está em meus favoritos.

    Bjs

    ResponderExcluir
  15. Amiga to meio sumida né,estou com o pé machucado,quase quebrei,então repouso absoluto,vou te mandar um email pois tirei as fotos mais ainda ñ acostumei com as sub-abas,mais quero elas assim e vou aprender,rsrs
    Cheiro!!

    ResponderExcluir
  16. Amiga fico meia perdida com tudo que ensinas e como tenho guardadinho os seus posts que recebo quando quero fazer os testes vou lá com calma.

    Beijos

    ResponderExcluir
  17. obrigada pelas dicas, leio todas. muito gentil da sua parte nos ensinar a pescar,,,rsrs
    eu coloquei o menu, mas agora tô em duvida sobre o endereço dos links. de onde pego? de outro site?
    sei que é uma pergunta bobinha, rs, mas se puder responder, agradeço.
    um abraço

    ResponderExcluir
  18. @m.noitenegradaalma`·.¸¸.·´´¯`··._.·, boa noite
    Nos endereços dos links você cola o endereço http da página para onde você deseja direcionar o leitor. Por exemplo, se você tem marcadores em seu blog e quer direcionar o leitor para esses marcadores, insira o endereço do marcador. Se for direcionar para uma página externa, cole o endereço desta página.
    O endereço que você colocar será o destino do leitor ao clicar.
    Certo?
    Boa noite, boa semana.

    ResponderExcluir
  19. que maravilhosa você é. muito obrigada.
    e boa semana pra você também.

    ResponderExcluir
  20. Oiii ! Adoreeei o blog e estou seguindo , segue de volta por favor ?
    Eu estava a procura de como fazer esse menu lá no meu blog a muito tempo ! E finalmente vc me mostrou a luz !! owieowieoi''
    Obrigada mesmo !
    Bjks . Leen

    www.tudoaverlen.blogspot.com

    ResponderExcluir
  21. Oi Elaine, tudo bem?
    Estou fazendo um blog e já peguei várias dicas aqui para colocar nele. Você ensina tudo de uma maneira muito simples. A toda hora revejo os seus posts para verificar o que mais posso colocar no blog..rsrs
    Eu peguei essa idéia do menu horizontal e alterei um pouco, como o meu blog tem poucos posts, foi viável de fazer.
    É o seguinte, ao invés de colocar o link dos marcadores, e quando a pessoa clicasse, apareceria um post abaixo do outro (como o seu), eu peguei o endereço de cada post e fiz um menu de links com o assunto de cada post. Acho que fica mais fácil para a pessoa localizar o post que quer ler.
    Bjs e obrigada pela ajuda.

    ResponderExcluir
  22. Elaine, adorei suas dicas para blogs,me ajudou muito.Com certeza serei sua seguidora e irei divulgar seu site em meu blog www.canaleducar.com
    Depois faça uma visitinha no meu cantinho! Abraços
    Jandar Luz

    ResponderExcluir
  23. Elaine, foi isto que eu te perguntei esta semana, achando que se chamavam páginas, eu não tinha visto que vc já tinha uma postagem ensinando. Muito obrigada, vou tentar lá no meu blog. Bjs.

    ResponderExcluir
  24. Elaine!!Consegui colocar Menu.
    Obrigada valeu,bjs

    ResponderExcluir
  25. Não consegui personalizar o menu , como se faz????
    AAAA amei o blog,parabéns.
    Sucesso!
    Hari Om .

    ResponderExcluir
  26. Ei, Elaine! Tô tentando usar esses códigos pra fazer abas num blog q to fazendo pra uma ONG, só q as sub abas ficam sobrepostas ao resto do blog! Além disso, qndo tiro os códigos de alguma aba (pq só vou precisar de uma aba com sub abas), daí as outras sub abas somem... tô me matando pra tentar descobrir, mas tá difícil demais! Tô desde ontem... pode me dar um help? rs
    Bjs

    ResponderExcluir
  27. Olá Elaine!
    Obrigada por mais este ensinamento. Pode ser que eu me aventure a fazer daqui a um tempo.
    Lembra-se de eu dizer que os meus botões de edição rápida tinham desaparecido? Eu conforme lhe disse optei por não retirar nem mexer em nada do que tinha posto. Portanto deve ter sido alguma coisa com o Bloger pois hoje, qual não é o meu espanto, eles voltaram. Coitaditos deviam estar com saudades de mim...eheheheheh. Aproveito para lhe desejar a si e à sua família uma óptima Páscoa!
    Beijo

    ResponderExcluir
  28. olá amiga querida! Vim desejar FELIZ PASCOA e oferecer um miminho! Encontra-o no meu blog!
    bjinhos com saudades, Joana Neves
    http://joana-neves.blogspot.com

    ResponderExcluir
  29. Páscoa Feliz e um beijinho.

    Ana Martins

    ResponderExcluir
  30. Uma Páscoa abençoada pra vc e toda família.

    ResponderExcluir
  31. Elaine!
    Como sempre gentil e nos cedendo boas dicas para aprimoramento do blog, obrigada.

    Desejo uma páscoa com muito amor no coração e que não esqueçamos qual seu real sentido, para que possamos vivê-la durante todos os dias! E claro com chocolate porque é bom em qualquer época.
    Luz e paz!
    Cheirinhos
    Rudy

    ResponderExcluir
  32. Boa noite querida amiga Elaine!!!

    Você realmente é fera no computador. Dô conta disso nem pensar.kkkkk

    Tirei um tempinho para vir visitar e deixar uma mensagem de FELIZ PÁSCOA:

    Há dois mil anos atrás, um homem veio ao mundo disposto a ser o maior exemplo de amor e verdade que a humanidade conheceria.

    Sua proposta de vida não foi entendida por muitos e, então, condenaram este homem e crucificaram-no, ignorando todos os seus propósitos de um mundo melhor.

    Houve dor, angústia e escuridão.

    Por três dias, o sol se recusou a brilhar, a lua se negou a iluminar a Terra, até que no terceiro dia algo aconteceu...

    Houve a ressurreição!

    A Páscoa existe para nos lembrar deste espetáculo inigualável chamado ressurreição!

    Páscoa...

    Ressurreição do sorriso...

    Ressurreição da alegria de viver...

    Ressurreição do amor...

    Ressurreição da amizade...

    Ressurreição da vontade de ser feliz!

    Ressurreição dos sonhos, das lembranças e de uma verdade que está acima dos ovos de chocolate:

    Cristo morreu, mas ressuscitou, e fez isso somente para nos ensinar a matar os nossos piores defeitos e ressuscitar as maiores virtudes sepultadas no íntimo de nossos corações.

    Que esta seja a verdade da nossa Páscoa.
    Que Deus abençoe você e sua família hoje e sempre.
    Bjokas...da Bia!!!

    ResponderExcluir
  33. sempre otimas dicas aqui no seu blog!!

    obrigada

    ResponderExcluir
  34. Perdemos amiga a nossa Glorinha Lion.
    Que fazer para lhe prestar uma
    grande homenagem aqui na Net?
    Uma homenagem colectiva?
    Beijinho
    Irene Alves

    ResponderExcluir
  35. OLA.. BOA TARDE!!
    PARABÉNS PELO SEU BLOG, E FICO FELIZ EM SABER QUE VC DA TANTAS DICAS LEGAIS PARA NÓS BLOGUEIRAS.
    SEGUINDO E ADORANDO
    UM BEIJO E UMA PÁSCOA ABENÇOADA!

    http://crisavolio.blogspot.com.br/2012/03/sorteio-especial-dia-das-maes.html

    ResponderExcluir
  36. Elaine, vi meu comentário lá em cima (o 1º) não tinha reparado que você repetiu a postagem.
    Mas ainda continua sem coragem de mexer em HTML, esse então é "amedrontador" rsrsr
    às vezes peço a meu filho da Austrália, mas ele é ocupado demais com os trabalhos dele e só pode de vez em quando.
    Você ainda está fazendo aquele esquema: de 1 vez por semana por um precinho?
    Se estiver, quando a Interface mudar vou precisar dos seus maravilhosos serviços, aí combinamos.
    Beijos querida.

    ResponderExcluir
  37. Elaine Feliz Páscoa eu estive ausente , mas na próxima terça feira entro em contato com você. Que Deus te ilumine sempre. Beijos

    ResponderExcluir
  38. muito bom eu estava procurando isso a muito muito muito tempo.

    ResponderExcluir
  39. Elaine minha querida estou ansiosa pelas minhas reformas bloguisticas que encomendei, tá quase ????

    Bjs e Feliz Pascoa
    Leila

    ResponderExcluir
  40. Feliz Páscoa para vc e sua família. Amei suas dicas. Faz dois dias que estou grudada em suas informações. Estou tentando fazer essas alterações de "abas horizontais"...ainda não deu certo...mas vou conseguir...como vc disse...quando a gente quer a gente consegue...grata.

    ResponderExcluir
  41. Olá Elaine, passando para desejar uma Feliz Páscoa a vc e seus familiares com muita paz e harmonia. Beijinhos

    ResponderExcluir
  42. Oi Elaine, vim te desejar uma feliz Páscoa! ;)
    Bjbj
    She

    ResponderExcluir
  43. Faz tempo que eu queria um menu assim! Quando for tocar meu lay, com certeza vou tentar fazer um menu desses *o*

    Obrigada por essa dica incrivel!

    Bjs

    www.daimaginacaoaescrita.com

    ResponderExcluir
  44. Elaine, acompanho o seu blog a algum tempo e te admiro muito. =) Amei essa dica do menu, em breve colocarei em prática no meu blog. Um grande abraço!

    ResponderExcluir
  45. Eu fiz tudo direirinho mas eu queria centrar isso e não consigo, como faço?

    ResponderExcluir
  46. Olá, adorei o poster mas estou com um pequeno problema. Só abre uma sub-aba para cada aba existente. Vc até colocou mais sub-abas em algumas abas, mas apenas mostra uma de cada, como faço? Obrigado

    ResponderExcluir
  47. Olá Elaine!!!
    Amei seu blog! Muito instrutivo e muito bem feito! Parabéns!
    Gostaria de tirar uma dúvida: consegui colocar o menu horizontal quase que perfeitamente o único detalhe: a cor do fundo do menu em estado normal não muda. Saberia me dizer o que ocorreu???
    Muito obrigada e Parabéns novamente pelo blog!

    ResponderExcluir
  48. muito bom mesmo um dos mais fáceis que já fiz!!!!(e olhe que já fiz bastantes)
    muito obrigada por postar isto!!!

    ResponderExcluir
  49. blog 10, mas to com um probleminha. as sub-abas ficam ocultas. faço o que?

    ResponderExcluir
  50. seu blog é Lindoooo,vc pode me ajudar a personalizar o Meu pfpf @gabriellamoura3

    ResponderExcluir
  51. FIZ DIREITINHO, MAS PODE ME ENSINAR A PUBLICAR NAS ABAS, POIS AS MINHAS PUBLICAÇÕES NÃO SÃO DIRECIONADAS NAS ABAS: BLOG; DESIGNMODAUNITRI.BLOGSPOT.COM

    ResponderExcluir
  52. eu uso um menu normal , que eu achei em um site , mas não consigo publicar no luga certo , exemplo : tem lá o menu , Home Faq Contatos Parceria ...
    como eu faço pra publicaar em um lugaar desses aiew ?

    ResponderExcluir
  53. Bom Elaine,eu quero muito fazer pra menu de abas,porem tenho I.E.!Como faço?Desinstalo?Ajude-me por favor

    ResponderExcluir
  54. Oi, eu fiz tudo direitinho só que à uma coisa que nunca dá certo pq eu n sei o que coloco onde voce tem dizendo: endereço do seu link (da pagina) n consigo fzr nao.

    ResponderExcluir
  55. Oi Elaine quero primeiramente parabenizá-la pelo ótimo trabalho que tem feito em passar seu conhecimento aos demais, eu fiz certo, porém queria sua ajuda para dois detalhes no menu.

    1° Detalhe: Como aumentar a largura do menu para que se ajuste ao tamanho da página, tentei pela tag "Width" mas não surtiu nenhum efeito.

    2° Detalhe: tem como disponibilizar o código para que minhas sub-abas tenham outras sub-abas.

    Agradeço desde já.

    ResponderExcluir
  56. Morgan, a largura total do menu é alterada em width. Experimente usar px ao invés de porcentagem, talvez ajude. Por exemplo: se seu template medir 1000px de largura total experimente isso ao invés de 100%.
    Outra dica é: caso seu template seja algum nativo do Blogger é preciso apagar antes as variáveis contidas na tag /* Tabs
    ----------------------------------------------- */
    Outra coisa: a largura total do menu pode mudar dependendo da quantidade de abas você colocar. Se estiver muito grande tire alguma, se estiver pequeno acrescente outra.

    No caso de sub abas com outras sub abas como eu uso aqui no blog o menu é outro.
    Assim que der eu monto um tutorial sobre ele.
    Muito obrigada pela visita e pelo elogio.

    ResponderExcluir
  57. Oi!! Tem um tempinho que não te visito, mas ando indicando muito seu blog pras amigas que querem dar uma melhorada no visual do blog! Vou instalar esse menu no meu, depois conto se consegui!! Mas preciso fazer um grande elogio: admiro muito a sua didática ao ensinar! Sou professora e acho isso fundamental no processo de ensino-aprendizagem. E você o pratica muito bem aqui!!

    Parabéns!
    Beijão e sucesso sempre!

    ResponderExcluir
  58. Fiz num blog de testes, deu quase tudo certo! Exceto o plano de fundo do MENU que não consigo mudar, é nesse código que devo alterar a cor => background: #99ccee url(); /COR DE FUNDO DO MENU EM ESTADO NORMAL <= certo??

    ResponderExcluir
  59. Deu tudo certo, mas assim como o seu agora não consegui, tipo q abre abas da aba, me entende?
    Beijo...

    ResponderExcluir
  60. Elaine, acho q o código background: #99ccee url(); /COR DE FUNDO DO MENU EM ESTADO NORMAL
    ta com algum problema, pq eu já coloquei todas as cores da tabela e não altera :S

    ResponderExcluir
    Respostas
    1. Não está com problema não, é que você instalou o menu no mesmo lugar onde já havia o menu de páginas nativo do Blogger.
      Nesse caso é preciso apagar o conteúdo que define a aparência do menu antigo, ou seja, tudo que estiver contido em
      /* Tabs
      ----------------------------------------------- */

      bjssss

      Excluir
  61. Oi Elaine!

    Este eu não consigo mesmo copiar o código.... Falta aquele botãozinho que abre uma página com código! =(

    Beijinhos!

    ResponderExcluir
  62. Olá Elaine, obrigado por essa dica de menu Horizontal, goste muito e implementei no meu blog, porem não sei como fazer ele fica lado a lado do cabeçalho, tipo fechando os dois lado sem deixar espaço, mesmo assim amei. beijos !

    ResponderExcluir
  63. Elaine, não dá pra copiar os códigos :/

    ResponderExcluir

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…