Menu que se fixa no topo ao rolar a página no Blogger

17 de abril de 2014

44 comentários:
Este estilo de menu é o que estou usando em meu blog. Um menu que se fixa ao ao topo do blog, ao rolar a barra de rolagem da página até determinado ponto. É algo bem interessante e ao mesmo tempo diferente, deixando seu blog com uma cara moderna e atualizada. Irei dividir o tutorial em duas partes, a primeira que é a parte referente ao código do menu, e a segunda a instalação no blog, inserindo no html, e tudo mais.

Atenção! Estarei usando um modelo simples do blogger, e por isso, se estiver usando um modelo personalizado, é possível que não funciona da forma correta, ou até mesmo não encontre o trecho de código em questão. E nestas circunstâncias, será necessário que tente inserir o código do menu em outro ponto do seu blog.

Código do Menu

1. Código HTML
<div class="conteudo-menu">
<div class="menu">
<ul>
<li><a href="http://seu-link">Início</a></li>
<li><a href="http://seu-link">Sobre</a></li>
<li><a href="http://seu-link">Contato</a></li>
<li><a href="http://seu-link">Anuncie</a></li>
<li><a href="http://seu-link">Parceria</a></li>
</ul>
<div class="clear"></div>
</div>
</div>
Nesse código, os trechos que devem ser alterados estão em negrito. Que é o link da página do blog (ou outra página, postagem ou marcador), e também o nome que será apresentado. Lembre-se que inserir os links entre aspas, pois ao contrário, o código não funcionará.

Caso queira adicionar novos links, bastará duplicar linhas de código que estão entre <li></li>, não se limitando apenas a quantidade de páginas do modelo.

2. Código CSS
.conteudo-menu { background: #ededed; font-family: Arial, Helvetica, sans-serif; font-size: 14px; border-bottom: 2px solid #ccc;}
.menu-fixo { z-index: 9999; position: fixed; top: 0; width: 880px; height: 37px;}
.menu { height: 37px;}
.menu ul { list-style: none; margin:0; }
.menu ul li {float: left; margin-top: 6px; padding: 6px; border-right: 1px dotted #ccc;}
.menu ul li:first-child { padding-left: 0;}
.menu ul li a { color: #666; text-decoration: blink;}
.menu ul li a:hover { color: #777; text-decoration: underline;}
A personalização do menu fiz por minha conta. Usei um fundo cinza bem claro, e cor de font também cinza. Deixo os trechos destacados caso queira alterar os valores:

#ededed - Substitua pela cor de fundo do menu.
880px - Substitua pela largura do seu blog. Você poderá ter acesso a essa informação em Modelo › Personalizar › Largura do blog.
#666 - Cor do texto do link.
#777 - Cor do texto do link ao passar o mouse sobre ele.

Se você possuir conhecimentos básicos (no mínimo) com relação ao CSS, saberá alterar outros campos do código, aptando-o ao seu blog.

3. Código JavaScript
<script src='http://code.jquery.com/jquery-1.7.min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery("document").ready(function($){
var nav = $('.conteudo-menu');
$(window).scroll(function () {
if ($(this).scrollTop() > 168) {
nav.addClass("menu-fixo");
} else {
nav.removeClass("menu-fixo");
}
});
});
</script>
Este é o código JavaScript jQuery, que da a função de fixar o menu ao topo da página. Sem ele, seria apenas um menu normal, sem nenhum efeito diferenciado. Neste código, o único trecho a ser alterado será o de vermelho, 168, que refere-se ao valor da altera entre o topo da página e o local onde se encontra o menu.

A função deste trecho é indicar ao código, quantos pixels deveram ser rolados da barra de rolagem até que o menu fique fixo. Você deverá usar uma forma de medição, ou ir inserindo um valor e testando... até que chegue a um valor aproximado ao ideal para o menu.

Instalando em seu blog

A instalação é feita diretamente no código HTML do seu blog, e por isso, aconselho que antes de qualquer modificação, faça Backup do seu template.

1. Acesse o painel do blogger, e clique no blog desejado, e selecione Modelo e em seguida Editar HTML.
2. No editor de códigos, clique dentro da caixa de códigos e pressione as teclas Ctrl + F.
3. Procure por </header> e abaixo da tag cole o Código HTML.


4. Em seguida, procure por ]]></b:skin> e acima dela cole o Código CSS.


5. E por fim, bastará colarmos o Código JavaScript, procurando pela tag </head> e colando o código acima dela.


6. Salve o Modelo e visualize seu blog.

Pronto! Seguindo esses passos, você está inserindo um belo menu fixo em seu blog. Sendo possível que adicione sessões e novos links a ele, ou o personalizado da maneira que achar melhor. Em caso de alguma dúvida ou questão referente a postagem deixe seu comentário, que responderei o mais breve possível!

44 comentários:

  1. Oi Henrique, tudo bem?
    Achei o seu blog e queria saber se vc pode, por gentileza, me ajudar algumas dúvidas.
    Acho que se lembra de mim: www.okaneimoveis.com.br.
    O template que estou usando não é do blog, e do Templateyfy e por isso tenho dificuldades.
    No momento desejo inserir no cabeçalho "Quem Somos" um texto elaborado por mim só que não entendo a linguagem HTML e por isso queria sua ajuda.
    tentei colar aqui pra vc ver mas este post não está permitindo...
    Mas não sei como inserir meu texto aqui dentro, pode me ajudar, por gentileza?
    Se quiser responder direto no meu e-mail é okaneimoveis@hotmail.com

    Muito Obrigada!

    Marta

    ResponderExcluir
    Respostas
    1. Olá Okane,

      Infelizmente não há como me dispor a este tipo de suporte específico com HTML.

      Abraços!

      Excluir
  2. Olá Henrique, gostaria de saber se existem mais cores para inserir neste tipo de Menu.
    Um bj.

    ResponderExcluir
    Respostas
    1. Olá Talita,

      Sim, é possível que altere completamente as cores do menu, conforme o seu gosto. Mas para isso é necessário conhecimentos básicos ou intermediários em CSS.

      Para entender como funcionam as cores em CSS, leia este artigo.

      Abraços!

      Excluir
    2. Olá Henrique, eu não tenho o menor conhecimento em CSS, sou apenas curiosa, pra vc ter noção, meu blogge eh sobre enfermagem. Mas, como havia dito, sou muuuuitooo curiosa, e achei uma tabela pronta de cores em CSS e fonte também!
      Segue os links: http://www.problogger.com.br/tabela-de-cores-html-e-css-completa/
      http://www.google.com/fonts

      Deppos dá uma olhadinha em blogge e vê o que posso melhorar, por favor!!

      Um bj.

      Excluir
    3. Olá Talita,

      Essa curiosidade que faz as pessoas evoluírem e aprender cada vez mais!

      Abraços!

      Excluir
  3. Henrique, você é um anjo! Tava procurando um tutorial desse a muito tempo e nenhum funcionava, até encontrar o teu!

    Primeiramente muito obrigada por ter disponibilizado o tuto, de verdade.
    E segundo: tou com um problema, meu menu não fica centralizado. Já tentei várias alterações e nada. Pelo meu menu só ter três links, ele não preenche tudo e fica pra esquerda. Cê sabe como centralizo?

    Desde já agradeço.
    Beijos.

    ResponderExcluir
    Respostas
    1. Olá Milena,

      A minha sugestão é que tente usar tags como < center > (desconsiderando os espaços), para tentar realizar a centralização do menu. Infelizmente não há como oferecer um suporte específico nesses casos ;/

      Abraços!

      Excluir
  4. Blz, Henrique?

    Parabéns pelo blog!
    Só tive algumas duvidas:
    O seu menu-horizontal foi feito pela ferramenta do blogger(Páginas) com marcadores ou foi criado pelos códigos apresentados neste post e configurado com os links de marcadores?

    OBS: Consegui das duas maneiras, a segunda deu mais trabalho.

    Abr!

    ResponderExcluir
    Respostas
    1. Tudo certo, Maxwel,

      Usei o código desta indicado nesta postagem, apenas dei uma personalizada com CSS, e inseri os links dos marcadores!

      Abraços!

      Excluir
  5. Depois de procurar muito e tentar muitos códigos, finalmente encontrei um que deu certo. Estou editando um layout pro meu blog, mas logo logo estarei usando aqui: http://escrevendo.tk
    Muito obrigado pela ajuda! Irei creditá-lo lá, com certeza.

    ResponderExcluir
  6. Olá, tudo bem? Estou com problemas em relação a este menu. O instalei e ficou perfeito, mas depois ele ficou na vertical e com uma letra minúscula. Já desinstalei várias e várias vezes e não consigo resolver o problema, parece que meu blog não consegue mais "ler" o código. Alguma sugestão?

    ResponderExcluir
  7. Olá o meu menu ficou com uma grande espaço após o cabeçalho, em qual dos códigos eu coloco a tag center ? o link aqui http://todebrincadeira.blogspot.com.br/

    ResponderExcluir
  8. Olá Henrique,
    Post maravilindo!!! Me ajudou muito, mas me tira uma dúvida.
    Como coloco subcategorias no código HTML abaixo do ??
    Um beijo,
    Júlia.

    ResponderExcluir
  9. Infelizmente, no meu blog não funcionou.. Tive que retirar.. mas obrigada pela dica

    ResponderExcluir
  10. Não entendo como que cópia este seus código....

    ResponderExcluir
  11. Olá Henrique, Muito bom seu Tutorial!
    como faço para muar a cor de fundo do menu, e centralizar os menus (vi vc dando a dica de usar o center, mas onde!) Agradeço!!!
    Sucesso...

    ResponderExcluir
  12. Estava com um problema, o menu reduzia a largura ao se fixar, dai testei em vez de colocar a largura em pixels, coloquei 100% como já vi em outros códigos css e deu certo, agradeço o tutorial ficou muito pratico.

    ResponderExcluir
  13. ameiiiiiiii, ajudou muito, mt obrigada

    ResponderExcluir
  14. Vlw cara, mas no meu caso o seu código me ajudou ao contrario hehe, o meu template já vinha com esse menu, mas isso estava me atrapalhando (não era que nem o seu, ele dava uns... bugs, quando subia a pagina rapidamente, e outras coisas) só no se site achei um jeito de retira-lo '-'

    ResponderExcluir
  15. é uma pena, no meu não funcionou e eu fiz tudo certinho :( Você saberia me dizer o que aconteceu ?

    ResponderExcluir
  16. muito bom vlw, boa explicação rápido e simples

    ResponderExcluir
  17. no caso de quem colocar o menu como widget e deseja expandir ele totalmente alinado da esquerda ate o total na direita deve adicionar:

    top: 0;
    left: 0;
    width: 100%;

    na linha:
    ex:
    .menu-fixo { z-index: 9999; position: fixed; top: 0; left: 0; width: 100%; height: 37px;}

    parabens pelo seu menu!

    ResponderExcluir
    Respostas
    1. Cara isso me ajudou muito, eu precisava so do script mais ele tava desalinhado e se escondendo ai eu cpoloquei essas linhas e deu certo, valeu!!!

      Excluir
    2. Mais uma duvida, caso ele fique um pouco afastado do topo o que fazer?

      Excluir
  18. Cara, meus parabéns, entendo um pouco, mas estava me matando pra montar um menu desse tipo, esse que tu deu, é perfeito! Muito obrigada.

    Atenciosamente
    Natália Castilho

    ResponderExcluir
  19. Super útil!!! Esse tutorial foi 1000, rs
    Eu estava acreditando que não conseguiria inserir esse menu no meu blog (por ter muitas alterações), porém de muito pensar, fiz o teste em outro blog e deu (por não ter alteração alguma), então pela lógica inseri os códigos como se fosse a primeira vez, ou seja, acima de outros códigos que alteram o blog.

    Abraços.

    ResponderExcluir
  20. PARABÉEEENS!!!!!! o seu tutorial é simplesmente maravilhoso, faz tempo que estou tentando fazer isso e NUNCA dava certo.... muitíiiissimo obrigada

    ResponderExcluir
  21. Ola Henrique!Gostaria de saber onde pode trocar a fonte?Abraços!

    ResponderExcluir
  22. ola Gostaria de saber se tem com adicionar imagem neste menu tipo o logo do blog no canto no meio tanto faz se tiver como ensina pf

    ResponderExcluir
  23. Tutorial muito bem explicado! Obrigado.

    ResponderExcluir
  24. Olá, gostaria de saber como faço para centralizar o texto da barra, pois ele esta no canto esquerdo e nao sei centraliza-lo

    ResponderExcluir
  25. legal camarada;
    fiz no meu blog de teste e usando um menu com sub menu,
    ficou show
    da uma olhada
    jogodobichorio.blogspot.com

    ResponderExcluir
  26. Como eu tranformo esse menu em DropDown? (com sub abas, por exemplo: Roms>Ps1,Ps2,Psp,etc...)

    ResponderExcluir
  27. Muito bem explicado!! Ajudou muito, obrigada!

    ResponderExcluir
  28. Olá, tu bem? Obrigado pela ajuda.

    Como posso colocar no html para redirecionar para a página inicial?

    Se eu coloco www.meublog.com no código..

    No site fica www.meublog.com/www.meublog.com

    Não sei como resolver isso

    Oibrgado!

    ResponderExcluir
    Respostas
    1. Insira http:// antes do link.

      "http://www.meublog.com/"

      :)

      Excluir
  29. olá gostei muito do tutorial porem não consigo centralizar o texto por não saber onde colocar a tag center.... também gostaria que na hora que o menu subisse tivesse barra de pesquisa... tem como????
    meu blog é o cuteandjoy.blogspot.com eu estou construindo para depois começar a postar

    ResponderExcluir
  30. Henrique, tudo bem???
    Seu exemplo não está funcionando.
    Mesmo assim, peguei o código e estou organizando dentro de minha necessidade.

    Muito Obrigado!!!

    ResponderExcluir
  31. Olá, tudo bem?
    Gostaria de uma ajuda, fiz um menu de categorias e consegui instalar após o header, mas gostaria de fixar usei o seu terceiro codigo e alterei apenas o nome conteudo menu para menu-cat que é o meu, mas acredito que devo fazer mais alterações já que o meu é com imagens e não texto. você poderia me ajudar?
    Grata!!

    ResponderExcluir
  32. Olá Hentique não achei no meu html..tem outro local pra colocar?
    obrigada

    ResponderExcluir
    Respostas
    1. Olá Cibele,

      O tutorial é funcional apenas se você inserir o código no local indicado..

      Abraços!

      Excluir