Como personalizar o menu de páginas do Blogger?

em 24 de fevereiro de 2015

personalizar o menu nativo do blogger

Todos os templates do Designer de Modelo do Blogger possuem em sua configuração um menu simples, de links ou de páginas.
Esse menu é assim, veja no print de um dos modelos Travel:


O menu funciona mas é bem simples.
Então hoje vou ensinar 2 personalizações diferentes, que funcionam em todos os modelos do Design de Modelo, menos os de Visualização dinâmica.
Vamos aprender?

Antes de mais nada edite a navbar do blog escolhendo a opção Desativado.
Vá em Layout/Navbar e faça a alteração.

Depois você precisa ter o menu instalado em seu blog.
Para isso clique em Layout, e a seguir clique em Adicionar um gadget.
Escolha a opção Páginas.
Caso você tenha páginas já criadas em seu blog elas aparecerão ao escolher essa opção de gadget.

E recentemente o Blogger adicionou uma nova funcionalidade ao gadget Páginas, que é a possibilidade de incluir nele links externos, não somente as páginas estáticas.
Veja o print:



Então dá pra ter um menu legal apenas personalizando o que já existe no blog, não é incrível?

Personalizar o menu de páginas do Blogger - Modelo acima do cabeçalho


Depois de personalizado o menu original ficará assim, no topo acima do cabeçalho, com o texto centralizado:


Vá ao seu painel do blog e clique em Modelo.
A seguir clique em Editar HTML e dentro da caixa de código tecle Ctrl+F.
Na barra de busca que expandir digite /* Tabs e tecle Enter para localizar.
Substitua tudo o que estiver contido nessa classe, entre /* Tabs e  /* Headings por este código:

Copiar o código do 1º modelo


Veja o print:

Depois de substituir salve as alterações.
Se tudo deu certo o seu menu estará agora acima do cabeçalho, no topo, ocupando 100% da largura do blog e com o texto centralizado.
Para alterar cores e fontes vá ao seu painel, clique em Modelo/Personalizar e a seguir na opção Avançado selecione trabalhar a opção Plano de fundo das guias e Texto das guias.

Importante:
Como você vê ele ficará no topo, acima do cabeçalho, mas não ficará fixo, ok? Ele rolará com a página.
Se desejar um menu fixo no topo do blog leia este tutorial:
Menu horizontal fixo no topo do blog com ícones de redes sociais

Personalizar o menu de páginas do Blogger - Modelo com abas separadas e com efeito


A segunda personalização que quero ensinar deixa o menu com as abas separadas, e tem efeito ao passar o mouse.
Assim:

Para ter essa versão proceda exatamente como expliquei em relação ao outro modelo.
Mas na hora de substituir o código no template use este:

Copiar o código do 2º modelo

Pode visualizar se desejar, e se estiver ok salve as alterações.
Cores e fontes você muda como expliquei em relação ao modelo anterior.

Dicas extras:
  • Faça sempre essas experiências em um blog de testes e só faça em seu blog depois de dominar completamente;
  • Caso seu blog use um template modificado esse tutorial não se aplica;
  • Caso você já tenha feito alterações no código original do menu do Blogger precisará substituir as alterações antigas pelas novas;
  • Esse tutorial só funciona para o menu nativo do Blogger;
  • Aqui tem um monte de menus que já ensinei caso prefira um mais elaborado.


Caso você queira ter em seu blog mas não consiga sozinho ou não tenha tempo e paciência para fazer entre em contato comigo e combinamos o valor, eu deixo prontinho em seu blog por um preço super acessível!


Gostou?
Que tal compartilhar o tutorial, ou curtir... ou recomendar no G+...

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.

47 comentários , comente também!

  1. Óooooootima explicacao! Adorei demais! Vou tentar fazer no meu, mas acho que não vai funcionar, porque meu blog é de template diferente dos do blogger. Enfim.. Tentarei.
    www.penseicerto.blogspot.com

    ResponderExcluir
  2. ÊEEBAAAAAAAA era tudo que eu tava precisando!!!!!! Muito muito obrigada Elaine que Deus abençoe você com muita saúde e disposição para alegrar nossas vidas com esses tutoriais maravilhosos!!!
    MUITO FELIZZZZZZZZZ!!

    ResponderExcluir
  3. Elaine!!! Você é muito TOP!! Eu olho seus post há um tempo, e na verdade antes, quando eu preciso de ajuda para personalizar meu template e pesuisava no Google, seu site sempre aparecia lá. =)

    Agora nem pesquiso mais no Google, aqui eu encontro tuuudoo! Você é ninja, kkkkk.

    ResponderExcluir
  4. Oi Elaine!Gosto muito das suas dicas, mas como eu não entendo nada destes termos,fico com medo de mexer e perder o blog.Beijo

    ResponderExcluir
  5. Olá Elaine!! Blogueira iniciante vem aqui, viu!! Adorando suas dicas, suas ideias, bem bacana mesmo!!
    Para mim deu certo, apenas fiquei com uma dúvida, como relaciono as minhas páginas (links) fixas com o conteúdo que já tenho no blog ?!

    ResponderExcluir
  6. Oi elaine, queria fazer um menu igual a esse atual do blog. Abaixo do cabeçalho mas que rola com a barra. Poderia explicar? Obrigada

    ResponderExcluir
  7. Elaine o meu ficou fixo!!! como faz para ele não ficar fixo...estou confusa...quero que suma quando eu rolo a pagina para baixo...não quero que o menu venha junto!!

    ResponderExcluir
    Respostas
    1. Acredito que seja porque seu template já é modificado e já possui o código de um outro menu, este sim, fixo.
      Teria que retirar o código antigo para que o novo possa funcionar.
      beijos

      Excluir
  8. Olá !!
    Eu ameii coloquei no meu blog e deu super certo, só ajustei as larguras para ficar mais fininho hahaha :D
    eu simplesmente amei Obrigada !!

    Blog Mulher de Salto Fino

    ResponderExcluir
  9. Absolutamente tudo o que eu estava precisando e procurando códigos à séculos. Obrigada Elaine, e parabéns pelo trabalho!

    ResponderExcluir
  10. Elaine, estou procurando pelo Ctrl+F o Tabs e o Heading, mas nunca encontro. Já conferi se fui no lugar certo ou se errei alguma coisa, mas não vai D:

    ResponderExcluir
  11. Oi Elayne! Elayne, como que faz se eu tiver dois gadgets de página e quiser que apenas um fique lá em cima centralizado?

    ResponderExcluir
  12. Elaine, eu não consigo encontrar o /* Tabs e o Heading, me ajuda linda !!

    ResponderExcluir
  13. Eu gostei do primeiro menu mas fico um quadrado muito grande como eu diminuo?

    ResponderExcluir
  14. ensina como colocar categorias personalizada no blog?

    ResponderExcluir
  15. Valeu , me ajudou muito Grande abraço :D vou deixar aqui meu blog http://goodfakeoficial.blogspot.com.br/

    ResponderExcluir
  16. Opa, foi de grande ajuda para meu novo blog
    injecaocerebral.blogspot.com

    ResponderExcluir
  17. Adorei as dicas..consegui aplica-las de um modo bem bacana no meu blog. parabens. ja adicionei sua pagina aos meus favoritos

    ResponderExcluir
  18. Como posso alterar a cor do meu modelo 1 ?

    ResponderExcluir
  19. Olá Elaine adorei seus tutoriais, mas estou com um probleminha.
    Criei a minha barra de menu com paginas de links mas quando coloco uma pagina estática (Contato) os outros links do menu se repetem e desorganizam todo o menu.
    Procurei pra ver se achava a solução do problema mas infelizmente não consegui.
    Se puder me ajudar, ficarei muito grata :)
    Desde já muito Obrigada !!

    ResponderExcluir
  20. Elaine, como sempre, seus tutoriais "matadores". Ficou excelente!
    Muito obrigado. Seu trabalho é 10!
    www.mais40bemcuidado.com.br

    ResponderExcluir
  21. Oi bom dia Elaine,eu amei suas dicas,mais ainda estou com muita dificuldade em colocar no topo por exemplo;SOBRE,CONTATOS DICAS... E nao consigo ver as respostas a estas perguntas que faço.Agradeço.

    ResponderExcluir
    Respostas
    1. Nilza, nem sempre eu consigo responder tudo, falta tempo, conforme explico no campo acima da área dos comentários.
      Quando houver resposta ela estará imediatamente abaixo do comentário feito.
      Mas repito: faço o possível, mas nem sempre dou conta... desculpe...

      Excluir
  22. Olá, Elaine!
    Adoro as suas dicas e no meu blog coloquei o menu de páginas no top e a deslizar por toda a página só que agora queria que o menu de páginas ficasse abaixo do cabeçalho e que desliza-se ao longo da página...como faço isso?
    Aguardo pela resposta
    Beijinhos

    Blog / Facebook / Instagram

    ResponderExcluir
  23. Funcionou e ficou demais, obrigadaaaaaaa. Adoro seu blog e suas dicas, menina você é demais!

    ResponderExcluir
  24. Oi Elaine! Muito obrigada pela dica!! Tentei mudar a fonte, mas não consegui... como que faz?

    ResponderExcluir
    Respostas
    1. Bianca, você altera em Modelo/Avançados, pelo painel do blog.

      Excluir
  25. Muito bom sua explicação, ficou perfeito no meu blog, ficou muito show!!!

    whatsappcentral.blogspot.com

    ResponderExcluir
  26. como faz para colocar essa mini imagem que fica na aba

    ResponderExcluir
  27. Obrigado pela dica, já estou seguindo.

    ResponderExcluir
  28. OII criei um blog tambem pode passar lá??
    tudo na moda chama se você puder passa la e divulga amo vc muito mesmo

    ResponderExcluir
  29. Ei Elaine,
    Parabéns, seu conteúdo é maravilhoso, tudo muito bem explicado.
    Sigo muitas das suas dicas.
    Acabei de incluir esse menu no meu blog e amei!

    www.vireimoda.com

    ResponderExcluir
  30. como mudar a fonte do menu do blog com o layout gratis da elaine?

    ResponderExcluir
  31. Oi Elaine, esse post foi muito útil pra mim, vou me empenhar mais para melhorar a interface do meu blog.
    Obrigada
    bjs

    http://myblogcarinaribeiro.blogspot.com.br/

    ResponderExcluir
  32. O artigo ficou muito bom, detalhado e eficiente. Parabéns!

    ResponderExcluir
  33. Elaine, este tutorial me ajudou muito, obrigada. Gostaria de saber se tem como colocar a barra de pesquisa junto com o menu no topo.

    ResponderExcluir
    Respostas
    1. Juliane, no menu de páginas não.
      Mas tem alguns menus no blog, veja se algum dá certo...
      De todo modo vou ver se acho um e posto assim que der.
      bjsss

      Excluir
    2. Eu também estou buscando isso. E com redes sociais tb. Este menu é perfeito pois nao tem java ;-)

      Excluir
  34. Olá, tenho um problema. Meu blogger tem domínio próprio. Quando adiciono link externo diz que a página não existe por causa do DNS. Vi que na imagem colocaste portfólio. (Nome do site) fiz assim e continua igual. Qual o motivo?

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

    ResponderExcluir
  36. Blog muito bom. Didático, prático e eficaz.

    ResponderExcluir
  37. Como consigo diminuir as letras ou espaço entre as páginas? Só consigo colocar 8 páginas e a outra fica em baixo...

    ResponderExcluir
  38. Obrigado pelas dicas! Estou tentando fazer um menu com sub-abas deste jeito,mas não estou conseguindo. Tem como através do widget Páginas?

    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…