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

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!