Menu horizontal para blog: como editar e personalizar

em 13 de outubro de 2014

Há uma categoria aqui no blog com vários menus de navegação.
Veja:
Menus variados para blog
Há vários menus lá, confira!


E hoje vou mostrar mais um, bem simples e muito fofo!
Para começar você precisa saber que  em todos os modelos nativos do Blogger esse menu dá certo.
Caso seu template seja muito modificado ou tenha sido muito mexido pode não dar certo.
Recomendo que teste sempre em um blog de testes, ok?

Feito o alerta, vamos instalar?
Vá ao seu painel do blog e clique na aba Layout.
Clique então em Adicionar um gadget, e na janela de opções que abrir escolha HTML/JAVASCRIPT.
Dentro da janelinha que expandir cole este código:

Copiar o código

Personalizando o menu e inserindo links nele

Trocando as cores:
As cores desse menu podem ser trocadas para combinar com seu blog.
Para isso altere os valores hexadecimais que definem as cores.
Esses valores sempre são precedidos do sinal #;
Assim sendo, a cor de fundo do menu, que no meu exemplo é pink, está definida no código pelo número hexadecimal #F944A5.
Portanto, para alterar essa cor troque o código dela pelo código da cor que desejar.
Deixei marcado no código onde trocar cada cor, ok?

Inserindo os links no menu:
No final do código há o campo onde você vai inserir os seus links e trocar o nome das abas pelos nomes que desejar.
Vou dar um exemplo:
Vamos supor que eu queria o menu assim:

Ver o exemplo

Nesse caso eu preencheria desse jeito o campo dos links e dos nomes das abas:

<a href='http://blog-de-teste-da-elaine.blogspot.com.br/'><span>Home</span></a>

<a href='http://www.elainegaspareto.com/'><span>Blog pessoal</span></a>
<a href='http://www.elainegaspareto.com/p/todas-as-dicas-para-blogs.html'><span>Dicas para blogs</span></a>
<a href='http://www.elainegaspareto.com/search/label/Receitas'><span>Receitas</span></a>
<a href='http://www.elainegaspareto.com/search/label/Colunistas'><span>Colunistas</span></a>
<a href='http://www.elainegaspareto.com.br/p/contrate-meus-servicos.html'><span>Quer um blog?</span></a>
<a href='http://www.elainegaspareto.com/p/contato_31.html'><span>Contato</span></a>

Em pink é o endereço do link, que pode ser o endereço de um marcador (Receitas, no meu exemplo), de uma página estática (Contato, no meu exemplo) ou um link externo (Quer um blog?, no meu exemplo).

Depois do código pronto, com suas cores e seus links salve as alterações.
Arraste para onde deseja que o menu fique e em seguida salve o arranjo.
Minha dica é que o menu fique abaixo do seu cabeçalho.

Em geral todo mundo que tenta de verdade, com atenção e paciência, consegue inserir qualquer menu de navegação no blog.
Mas já recebi muitos pedidos de ajuda onde ficou claro que a dificuldade, especialmente de blogueiros iniciantes, é como colocar os links nos menus, como separar as postagens, etc.
A dica de ouro para separar as postagens e elas aparecerem certinhas no menu é ter os marcadores de seu blog bem organizados.
Clique aqui e entenda como isso é importante para seu blog

Gostou do tutorial?
Se foi útil de alguma forma curta a postagem, compartilhe-a no G+, deixe seu comentário!
Fico muito grata! 

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.

59 comentários , comente também!

  1. Oi Elaine, tento mas ainda sofro com a linguagem dos programas.
    Valeu a dica, continuarei tentando
    Xerão

    ResponderExcluir
  2. Elaine, tuas dicas sempre são maravilhosas e dadas com todas as explicações bem detalhadas! bjs, linda semana,chica

    ResponderExcluir
  3. Oi Elaine,

    Interessante, mas outra hora eu volto com 'atenção e paciência'.

    Beijos!

    ResponderExcluir
  4. Dicas bacanas no uso do html.

    Hi leitores!
    Está procurando dicas para várias coisas acesse o blog "tipsdetudo" que visa dar dicas sobre todos os tipos de assuntos.
    Falarei sobre coisas que acho legais e importantes, mas os leitores também podem solicitar dicas dos assuntos que tiverem interesse. http://tipsdetudo.blogspot.com.br

    Os primeiros posts têm dicas de cursos online e de séries de tv. Confira!

    ResponderExcluir
  5. Para quem é esperta e sabe mexer ´muito bom suas dicas, eu morro de medo , um bicho de 7 cabeças!!kkkk


    bjss

    ResponderExcluir
  6. percebi que a minha lista de marcadores está um caos. Há coisas repetidas, postagens com o mesmo assunto com marcadores diferentes, enfim, preciso arrumar isso. Se eu apagar a lista de marcadores atual, vou precisar remarcar cada postagem ou seria melhor apagar e marcar a partir daí deixando as restantes como estão. O que me sugeres?
    Abraço!
    Sonia

    ResponderExcluir
    Respostas
    1. Sonia, no Blogger, uma vez criados os marcadores jamais poderão ser apagados de fato, eles sempre existirão.
      Pra trocar terá que editar post a post.
      bjss

      Excluir
  7. Ameii seu Blog, tudo de bom, me ajudou muito. obrigado de verdade. :)

    ResponderExcluir
  8. Eliane queria saber como colocar o Cabeçalho, menu e slide. vc ja tem algum post ensinado como colocar os tres?

    ResponderExcluir
  9. Oi Elaine, fiz ess marcador no mu blog de teste e funcionou, muito bom esse post! Tenho uma dúvida eu tenho mais de um marcador nos ítens do meu menu (como se no seu acima, no dica para blog tivesse vários marcadores). Como eufaço para colocar o link de todo os marcadores nesse menu? Obrigada e beijos

    ResponderExcluir
  10. Olá, como faço para meter no menu as novas postagens? Porque assim só acrescento os links de um post

    ResponderExcluir
  11. Como mudo a largura dessa barra ? A minha ficou super curtinha

    ResponderExcluir
    Respostas
    1. Rafaela, a largura será aumentada à medida que você incluir mais links nela, ela é responsiva.

      Excluir
  12. Tenho a mesma dúvida da "A casa eh sua" e da Sandra Guerra.
    Como faço para colocar mais de um post na mesma aba, sendo que só tem um link para ser redirecionado?

    ResponderExcluir
  13. Olá Elaine, seus tutoriais nos ajuda muito. Eu gostaria que voce fizesse um tutorial, sobre o cabeçalho do blog, eu gostaria de poder colocar no cabeçalho imagens além do titulo.

    ResponderExcluir
  14. OLÁ!! Obrigada pelas dicas! Há dias eu estou tentando personalizar meu blog, mas sou meio nood nisso tudo ainda hahaha Suas dicas são ótimas e bem esclarecidas! :)

    beaqperez.blogspot.com

    ResponderExcluir
  15. Poxa, eu adorei, consegui colocar no meu blog mas não estou conseguindo centralizar, me ajuda !!

    ResponderExcluir
  16. Olá adorei a dica e amei o blog!Mas queria saber Como faço pra aumentar ele sem ter que colocar mais abas?
    Espero que alguem me ajude

    ResponderExcluir
    Respostas
    1. Ana, só inserindo mais abas, até onde testei.

      Excluir
    2. Eu consegui aumentar sem colocar mais abas, aumentando o número na opção padding (no código).
      Estou usando:
      padding: 1.4em;

      Excluir
  17. Boa tarde! Por favor, algém sabe como faço para centralizar este menu? Obrigada!

    ResponderExcluir
    Respostas
    1. Experimente inserir os comandos < center > antes e < / center > ao final do código do menu.
      Mas centraliza-lo depende do tamanho dele e do tamanho total de seu template.

      Excluir
  18. deu certo o único problema é que é pequeno demais, não na altura mas sim na largura como posso coloca-lo mais largo

    ResponderExcluir
    Respostas
    1. Conforme for adicionando links ele expandirá.

      Excluir
  19. Este comentário foi removido pelo autor.

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

    ResponderExcluir
  21. TEm como adiciona um widget no menu??? ou somente urls..

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

    ResponderExcluir
  23. Olá Elaine, adorei sua página! Queria uma ajuda com este menu, qual código para utilizar o menu-fita com sub-abas?

    ResponderExcluir
    Respostas
    1. Lindiana, eu não sei, mas creio que não dá pra ter sub abas naquele menu...

      Excluir
  24. Nossa, nem sei como dizer o quanto você me ajudou, procurei MUITO um tutorial assim, mas nunca nenhum dava certo, e o seu super deu certo e ficou lindo no blog. Obrigada!!!

    ResponderExcluir
  25. Elaine como excluo aquele g1 do google no final dos posts Mobile?

    ResponderExcluir
    Respostas
    1. Erick, não faço ideia, acho que não tem como excluir pois não há como editar, até onde sei.

      Excluir
  26. O menu apenas aparece no começo do carregamento do meu blog, e logo some. O que poderia ser?

    ResponderExcluir
  27. O menu apenas aparece no começo do carregamento do meu blog, e logo some. O que poderia ser?
    Obs. colando no widget html/javascript não funcionou. eu colei então em adicionar css :V

    ResponderExcluir
    Respostas
    1. Lucas, não faço ideia.
      Pode ser algo em seu template...

      Excluir
  28. Oi Elaine!

    Adorei, e consegui fazer. Mas ficou uma duvida. Na pagina inicial nao aparece nada e não sei como fazer no html para direcionar a pagina criada. Será que pode me ajudar.

    http://atelierdezsextos.blogspot.com.br/

    Obrigada

    ResponderExcluir
  29. Ah, só especificando melhor Elaine, posso usar o codigo do link na pagina inicio: http://atelierdezsextos.blogspot.com.br/p/inicio_89.html - mas acontece que se fizer isso, meu blog nao será localizado.

    http://atelierdezsextos.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Olha, você precisa colocar os links corretos nos lugares indicados.
      Releia o tutorial, a informação que você precisa está nele...
      beijossss

      Excluir
  30. Não sei porque comigo não dá certo Chateada
    Visite meu blog e se possível de umas dicas entendo pouco de web design
    www.byfeminina.com

    ResponderExcluir
  31. Consegui mudar a largura
    padding:0 1em

    por
    padding:0 3em

    ResponderExcluir
  32. Oi Elaine, tudo bom? Seu tutorial me ajudou muito, muito obrigada!!! :D

    ResponderExcluir
  33. Noossa! Passei uma semana tentando fazer um menu, somente com o seu tutorial consegui fazer a coisa toda acontecer. Muuuito obrigada! ;D

    ResponderExcluir
  34. Elaine... seu blog é sensacional.
    A parte de dicas para blogs foi essencial para criação do meu blog, especialmente esse post sobre a organização dos menus e os marcadores.
    Parabéns pela dedicação e esforço!

    www.entrerabiscoseriscos.blogspot.com

    ResponderExcluir
  35. Oii!
    Tem como colocar subitens nesse tipo de menu??

    ResponderExcluir
  36. Oii!
    Tem como colocar subitens nesse tipo de menu??

    ResponderExcluir
  37. Minha querida deu tudo certinho no meu blog com uma observação ficou desalinhado já usei o as recomendações com os códigos acima mas não adiantou poderia sugerir alguma outra solução. OBR, Ivan de Jesus

    ResponderExcluir
  38. Dicas incríveis, muito obrigada, literalmente,salvou minha vida! Parabéns.

    ResponderExcluir
  39. Estou apx pelo seu site <3 Está me ajudando pra caramba. Obrigada!

    ResponderExcluir
  40. Oi Elaine, cheguei até o seu blog de pára quedas mesmo. Parabéns pela dedicação e criatividade. Estou "criando" o meu blog, não entendo nada de html e CSS. Se for possível, gostaria de saber como faço para inserir uma barra de menu com os ícones das redes sociais à direita da barra e o menu abaixo do cabeçalho. Confesso que já tentei diversas vezes e não consegui. Pelo gadget HTML/Javascript, sei fazer. Mas, gostaria de um blog com a minha personalidade. Grata!

    ResponderExcluir
  41. Oi Elaine! Adorei o post me ajudou muito! E consegui aumentar o menu modificando o padding. Tenho uma dúvida minha linda, dá pra acrescentar uma sub aba nesse menu?? To precisando! Adoro seu blog beijo!

    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…