Menu Rolante no topo do Blog

Menu Rolante no topo do Blog

Este tutorial demostra como colocar um menu fixo no topo do blog, que a medida que voce for descendo a página o menu permace fixa no topo.
Este menu se move conforme rolamos a página para cima ou para baixo, porém, permanece sempre fixo no topo.

Serão necessários apenas dois passos para implementar este menu no seu blog, apenas a inserção de CSS e HTML no código do template.
Como sempre aconselho, faça um backup e/ou visualize sempre antes de fazer alguma modificação no conteúdo para não prejudicar seu template.

1º - Aplicar estilos CSS:


Acesse seu blog e acesse "DESIGN", entre em  "EDIÇÃO HTM" do seu template, não precisa clicar em "expandir modelos de widgets" e procure pela tag:

]]></b:skin>

e cole o seguinte código logo ACIMA dela:

/* NavTop Menu
----------------------- */
#navtop { /*--container geral do menu--*/
border-bottom:1px solid #666;   /*--Edite cor da borda--*/
background:#fff;   /*--Edite cor de fundo--*/
padding:0px 20px;
position:fixed;
top:0;
left:0;
z-index:2000;
width:100%;
}
#navtop li {
float: left;
display: block;
padding:5px;
}

#navtop li a, #navtop li a:link, #navtop li a:visited { /*--links do menu--*/
float: left;
display: block;
padding: 5px;
text-transform: none;
text-decoration:none;
background: #ccc;  /*--Edite cor de fundo dos links--*/
color:#000;    /*--Edite cor dos links--*/
border:1px solid #666;   /*--Edite cor de borda--*/
font-size:12px;   /*--Edite tamanho da fonte--*/
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#navtop li a:hover {   /*--links no estado hover--*/
background: #000;  /*--Edite cor de fundo dos links--*/
color:#fff;   /*--Edite cor dos links--*/
text-decoration:none;
}

#navtop li ul {
display: none;
}

Edite as cores do menu de acordo com seu gosto. Os campos que você pode e deve editar já estão destacados no código acima em vermelho.

2º passo - Inserir o código html:


Agora devemos inserir o código html do menu para que ele fique visível no topo do blog.
Procure por: <body>

e cole o seguinte código logo ABAIXO dele:

<div id='navtop'>
                       
<li><a href='SEU-LINK-AQUI' title='#'>Link 1</a></li>
 
<li><a href='SEU-LINK-AQUI' title='#'>Link 2</a></li>
 
<li><a href='SEU-LINK-AQUI' title='#'>Link 3</a></li>

<li><a href='SEU-LINK-AQUI' title='#'>Link 4</a></li>

<li><a href='SEU-LINK-AQUI' title='#'>Link 5</a></li>
 
<li><a href='SEU-LINK-AQUI' title='#'>Link 6</a></li>

</div>
Modifique o código acima inserindo seus links nos locais destacados em vermelho, e inclua também o titulo de seus links.

Se estiver usando algum modelo de template do "designer de modelo do blogger", cole o código html do menu logo ACIMA da tag <header>

FONTE original: mundoblogger