[Blogger - Gadgets] - Como colocar um menu horizontal em blogs do Blogger

Olá querido leitor, neste artigo eu mostrarei a você como colocar um menu horizontal em blogs do Blogger. O menu horizontal, para aqueles que não sabem, é aquele que aparece, geralmente, abaixo dos cabeçalhos dos blogs. Como você já deve ter percebido, todos os templates disponibilizados na ferramenta Designer de modelo do Blogger possuem um menu horizontal, como você pode conferir nas imagens abaixo.






Acima estão apenas alguns exemplos de menus horizontais, todos retirados dos templates disponíveis na ferramenta Designer de modelo, mas todos os templates dessa ferramenta possuem este tipo de menu, a única diferença entre eles está no estilo e nas cores. Mas, embora os templates já contenham o código necessário para o menu, é necessário que você adicione o gadget que irá assumir o formato de menu, e é isso o que eu vou mostrar para você neste artigo.

INFORMAÇÃO: o estilo do menu horizontal pode variar de acordo com o template que está sendo usado no blog. Templates criados por terceiros (não oficiais) podem não possuir os códigos necessários para mostrar os menus horizontais.

O menu horizontal pode ser colocado abaixo do cabeçalho do blog de duas maneiras. Veja abaixo uma explicação que mostra detalhadamente como fazer esse processo.

Menu horizontal criado com o gadget "Lista de links"


1. Faça login no Blogger e acesse o painel de controle do seu blog, depois clique no menu Layout > Adicionar um Gadget > Lista de links, como ilustram as imagens abaixo.

Clique na imagem para ampliar


2. Após clicar no gadget uma janela como a mostrada abaixo se abrirá.


Veja abaixo uma explicação de cada opção.
  • Título: neste campo você pode colocar um nome para o gadget, mas aconselho que você deixe-o em branco, pois em alguns templates esse título ficará oculto, já em outros o título poderá aparecer dando um ar amador ao seu blog;
  • Número de links a serem mostrados na lista: através desta opção, você pode escolher a quantidade máxima de itens que o menu terá, se você deixar este campo em branco todos os itens do menu aparecerão;
  • Classificação:
    • Não classificar: se você estiver com essa opção selecionada, sempre que você adicionar um novo item ao menu ele será adicionado no topo da lista;
    • Colocar em ordem alfabética: deixando esta opção selecionada, sempre que você adicionar um novo item ao menu ele será adicionado em ordem alfabética (A-Z);
    • Classificar na ordem alfabética inversa: essa opção tem o mesmo efeito que o item anterior, mas a ordem alfabética será em ordem inversa (Z-A);
  • Novo URL do site: neste campo você deve colocar o link ao qual o leitor será direcionado quando clicar no determinado item do menu;
  • Novo nome do site: nesta opção você deve colocar o nome do item do menu, como por exemplo: "Início", "Contato" etc.
Depois de configurar como quer, basta clicar no botão Adicionar link. Em seguida adicione outra URL e outro nome, e clique novamente no botão. Faça este processo até ter adicionado todos os itens do menu que você quer. Após adicionar todos os itens, você verá que eles aparecerão logo abaixo do gadget, como ilustra a imagem abaixo.


Você pode mudar a ordem dos menus, clicando nas setas e . E também, Excluir ou Editar o link e/ou o nome dos itens do menu clicando nos respectivos links.

3. Ao final clique no botão Salvar. Agora basta ir ao seu blog e conferir como ficou.

Menu horizontal criado com o gadget "Páginas"


Além de usar o gadget Lista de links, você pode usar a área do menu horizontal para colocar as páginas estáticas do seu blog. Para fazer isso, siga os passos descritos abaixo.

1. Faça login no Blogger e acesse o painel de controle do seu blog, depois clique no menu Layout > Adicionar um Gadget > Página, como ilustram as imagens abaixo.

Clique na imagem para ampliar


2. Após clicar no gadget uma janela como a mostrada abaixo se abrirá.


Veja abaixo uma explicação de cada opção.
  • Título: neste campo você pode colocar um título para o gadget, assim como o gadget lista de links eu aconselho que você o deixe em branco;
  • Adicionar automaticamente novas páginas ao publicá-las: se esta opção estiver marcada, sempre que você criar uma nova página estática, a mesma será adicionada automaticamente ao menu;
  • Páginas a serem exibidas: através desta opção você pode escolher quais páginas aparecerão no menu;
  • Ordem das páginas: através desta opção, você pode alterar a ordem das páginas no menu, basta clicar a arrastar os menus para cima ou para baixo.
3. Depois de configurar o gadget, basta clicar no botão Salvar. Agora é só ir na página inicial do blog e conferir como ficou o menu horizontal.

Atualização — 20.08.2011 às 18h25
O artigo foi atualizado para refletir mudanças realizadas no painel de controle da plataforma Blogger.
É terminantemente proibida a cópia de nossos artigos sem nossa expressa autorização!
Plágio é crime previsto no artigo 184 do Código Penal brasileiro e na Lei 9.610/98.
As informações contidas neste artigo estão desatualizadas? Notifique-me! Editar artigo
Igor Sousa é dono e criador do blog Hdblog (antigo Bloggando Na Web). Tem 24 anos, é paulistano e atualmente cursa o 8° Semestre em Ciências Contábeis. Blogar era apenas um modo de melhorar sua redação de texto, mas unida a sua vontade de ajudar as pessoas passou a ser um hobby.

Foram postados 33 comentários neste artigo!

  1. Muhammad Taqi: glad to know that you liked it!
    Thanks for your visit and your comment.

    Hugs.

    ResponderExcluir
  2. Valeu pela dica, era isso mesmo que queria!

    ResponderExcluir
  3. Conheça nossa equipe: fico feliz em saber que encontrou o que estava procurando!

    Agradeço a visita e o comentário.
    Volte sempre!

    ResponderExcluir
  4. Grande Igor,

    Parabéns pelo seu excelente trabalho.

    gostaria de sanar uma dúvida, quando coloco este menu, o gadget fica de fora a fora no blog (faixa gradiente), tem como retirar o que ultrapassa a largura do cobeçalho ?

    grato

    ResponderExcluir
  5. Lanunes: visitei os blogs disponíveis no seu perfil, mas em nenhum deles eu encontrei o menu instalado, caso o problema ainda persista, informe o endereço do blog onde ele está ocorrendo.

    ResponderExcluir
  6. haaa...é que acabei desinstalando...vou instalá-lo novamente no seguinte blog: http://spbrasil-teste.blogspot.com/

    outro detalhe: a nuvem de tags (com movimento) não está funcionando no IE...uma pena, pois é bacana pacas...

    este IE é mesmo uma tranca..rsrs

    brigadão...

    ResponderExcluir
  7. Lanunes: pelo que eu entendi, você gostaria de deixar o menu com a mesma largura do cabeçalho e sem o “excesso” que ultrapassa o mesmo, certo? Faça o seguinte:

    1. Vá em: Design > Editar HTML. Faça uma cópia de segurança de seu template, clicando em Baixar modelo completo. Pressione Ctrl+F para abrir a janela Localizar, e procure o código abaixo:

    .tabs-inner .section {
    margin: 0 16px;
    }


    2. Mude no código acima, o valor 16 para o valor 5. Em seguida, procure e apague os códigos abaixo:

    .tabs-outer {
    overflow: hidden;
    position: relative;
    background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll 0 0;
    }

    .tabs-cap-top, .tabs-cap-bottom {
    position: absolute;
    width: 100%;
    border-top: 1px solid $(tabs.border.color);
    }


    3. Procure o código abaixo:

    .tabs-inner .widget li a {

    4. Imediatamente abaixo dele, você deverá inserir o seguinte código:

    background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll 0 0;

    5. Para finalizar é só clicar em Salvar modelo.
    Quanto à nuvem de tags com movimento, infelizmente ela não funciona mesmo no Internet Explorer, uma pena! Espero que isto lhe ajude de alguma forma. Volte sempre.

    ResponderExcluir
  8. Grande Igor....

    Brigadão mesmo, funcionou perfeitamente.

    só mas uma coisinha (se não for incomodá-lo demais) como faço para trocar a cor (cinza para outra) ?

    abraços

    ResponderExcluir
  9. Lanunes: para mudar as cores do menu, vá em: Design > Designer do modelo > Avançado > Plano de fundo das guias. Depois é só escolher a cor que mais lhe agradar. Volte sempre! Abraços.

    ResponderExcluir
  10. Oi, Igor, blz? (eu de novo, enchendo o saco!rs)

    Vc conhece esse site? http://www.flashvortex.com/menus.php

    Funciona mesmo? Vi num blog e uma amiga queria ajuda no blog dela para criar menus. O que é melhor? Fazer como vc ensinou a cima ou ter um desses?

    Boa semana!

    ResponderExcluir
  11. Olá Sybylla, tudo certinho sim, sinta-se à vontade para comentar sempre que tiver dúvidas! Eu conheço sim o site FlashVortex, e os menus funcionam sim, basta configurar tudo de maneira correta, mas ele tem algumas desvantagens: eles adicionam uma marca d'água no menu que só pode ser removida se você pagar, sempre que quiser adicionar outros itens ao menu, você terá que recriá-lo desde o início e ele com certeza não deve aparecer na versão móvel do blog, dentre outras coisas. Mas, tudo vai depender do gosto do autor né, eu pessoalmente não usaria, pois dá um ar de “blog amador”, prefiro os menus originais do template! Espero que isto esclareça suas dúvidas. Volte sempre! Boa semana.

    ResponderExcluir
  12. Igor, obrigada!

    Realmente achei os menus deles meio piegas. Mas os banners até que são utilizáveis (dependendo do propósito do blog, claro...)

    Obrigada mais uma vez!

    ResponderExcluir
  13. Igor...

    Me bateu uma curiosidade... Aquela sua barra lá em cima é super funcional. Mas estou quebrando a cabeça em como colocar os scripts do contador como vc fez. Se pensar num novo tutorial, pensa nele?

    Obrigada!

    ResponderExcluir
  14. Olá Sybylla, tudo depende do template usado no blog, mas pensarei em algo e assim que possível postarei aqui no blog!

    ResponderExcluir
  15. ÍGOR... cá estou eu pra pedir SOCORROOOOOOOO...
    Consegui criar os ícones do menu, mas não consegui colocar as coisas lá...como email de contato, fotos, selinho(que nem sei pra que servem) kkk , canal do Youtube... Enfim...oq faço?? Outro blog??kkkk
    Grata!
    LIAA

    ResponderExcluir
  16. Liaa: rsrs, não precisa fazer outro blog não, isso apenas em último caso! Mas, entre em contato comigo pelo formulário de contato, assim ficará mais fácil para eu prestar assistência à você!

    ResponderExcluir
  17. Eu tnh um blog de testes e fiz o que vc mandou mais não de certo não,ficou na vertical,o meu template é da Evelyn que lá no blog dela,ela disponibiliza grátis só que vem sem esse menu horizontal e qr colok um mais não deu muito certo,vou deixar o endereço e vc ver lá http://joselia-porfirio.blogspot.com/

    ResponderExcluir
  18. Jo: como eu falei no início do artigo, o menu varia de acordo com o template que está sendo utilizado. Como você está usando um template customizado (não padrão do Blogger), o seu template não contém os códigos que dão forma ao menu (como você mesma já notou), neste caso você terá que adicionar tais códigos, porém, os códigos também são variáveis, então tudo vai depender de como você quer o seu menu; se quer imagens, quais cores, formato e etc. Infelizmente eu não posso te ajudar de uma forma mais efetiva, porque eu não sei como é a estrutura do seu template, mas talvez a autora que você citou (Evelyn) possa te ajudar.

    ResponderExcluir
  19. Quando escolho o gadget “Páginas" aparece só a opção inicio, e não consigo por autros, então acaba ficando uma unica aba no menu, como faço para abrir com varias opção? Obrigada desde ja!

    ResponderExcluir
  20. Camila: para que apareçam outras páginas nas opções do gadget, você precisa primeiramente criá-las. Para isto, faça login no Blogger e vá em: Postagem > Editar páginas, e crie as páginas que você quer. Depois de criadas, elas estarão disponíveis no gadget de páginas. Eu que agradeço a visita e o comentário, volte sempre!

    ResponderExcluir
  21. João Neto, para criar um menu acima do cabeçalho do blog, você deve criar uma nova seção que aceite gadgets, mas acima dos códigos referentes ao cabeçalho, depois é só adicionar estilos ao menu, e adicionar o gadget de lista de link ou páginas à essa seção.

    ResponderExcluir
  22. Eu já fiz isso e deu certo, mas na minha pergunta eu não a exemplifiquei. Eu também queria saber como deixá-lo em todo o layout, como assim? Deixando ele de uma ponta a outra.

    ResponderExcluir
  23. João Neto, isso deve ser ajustado no próprio CSS que você irá adicionar ao menu. Mas você pode adicionar CSS também à seção onde o menu ficará.

    ResponderExcluir
  24. Usando o gadget "páginas", só a primeira página (a de ínicio) pode ser editada, e se eu quiser mudar o nome "página 1" para outra coisa? É possível?

    ResponderExcluir
    Respostas
    1. Mkj, sim é possível! Para alterar o nome das demais páginas, basta você acessar o menu de páginas (onde elas são criadas) e editar o título das páginas. Porém, veja que alterar o nome da página não alterará o link da mesma.

      Excluir
  25. Olá Igor,
    Não estou localizando os códigos dos exemplos de menus horizontais,
    pode me ajudar?

    Obrigado

    ResponderExcluir
    Respostas
    1. Olá Eder, ao visitar o seu blog eu pude ver o menu horizontal, mas ele possui alguns "erros" de customização. Como eu falei no artigo, a aparência do menu varia de acordo com o template que está sendo usado, portanto, templates de terceiros ou templates cujo os códigos foram muito alterados ou até mesmo apagados, podem apresentar erros na aparência do menu. Infelizmente, eu não posso ajudar de uma maneira mais efetiva, pois teria que analisar a estrutura do seu template para ver o que foi alterado nele. Mas, eu notei que o seu nicho é fotografia, você já experimentou os templates dinâmicos do Blogger? Alguns deles ficam muito bons em blogs de fotografia! Eu que agradeço a visita, volte sempre!

      Excluir
    2. Oi Igor,
      Valeu pela atenção, Mas acho que eu te expliquei errado sobre minha dúvida. Eu não estou localizando os códigos no teu BLOG, para alterar o estilo do menu horizontal.

      Obrigado

      Excluir
    3. Olá Eder, agora eu entendi. Na verdade esse artigo não ensina como customizar os menus horizontais do blog. Este artigo mostra apenas como adicioná-los. Em breve publicarei algum artigo com códigos de menu customizados para serem utilizados.

      Excluir
  26. Obrigado Igor,

    Através do seu tutorial consegui incluir os menus horizontais no meu blog. Mas, ainda não consegui inserir um menu (horizontal) para levar o leitor à uma lista. Ou seja, pretendo colocar um link para levar o leitor a uma lista de blogs, isso é possível?

    Um abraço.

    Vilson

    ResponderExcluir
    Respostas
    1. Olá Vilson, fico feliz que tenha conseguido utilizar os menus horizontais em seu blog. Quanto a sua dúvida sobre a lista de blogs, é possível sim, mas tudo depende de como você quer o resultado final. Você pode, por exemplo, criar uma página estática ou um post, e no conteúdo colocar a sua lista de blogs. Depois é só adicionar um novo item ao seu menu horizontal com o link para a página ou post que contém a sua lista de blogs. Espero que isso ajude. Agradeço a visita e o comentário. Volte sempre!

      Excluir