Colocando um menu que se fixa no topo ao rolar a página da Blogger

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.

Nota! 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.
VAMOS AO TUTORIAL

1º- Acesse seu blogger, vá em "Tema" e "Editar HTML".

2º- Clique no código, pressione "CTRL+F" e pesquise por </header>

3º- Logo ABAIXO da tag encontrada cole o seguinte abaixo.

<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>

Configurações: 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.

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.

4º- Agora procure pela tag ]]></b:skin> e logo ACIMA da tag encontrada cole o seguinte abaixo.


.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;}

Configurações:

#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.

5º- Para finalizar procure pela tag </head> e logo ACIMA da tag encontrada cole o abaixo.


<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>

Nota: 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.

6. Salve o Modelo e visualize seu blog.