Menu rolante fixo no topo dos blogs do Blogger

Compartilhar:
Olá queridos leitores, hoje trago a vocês um novo menu. Este menu fica fixado no topo do blog e quando você rola a página ele rola também. Você pode deixá-lo do jeito que quiser, apear de ser bonito de qualquer forma. Vamos instalar?
1. Acesse a guia Modelo e clique no botão Fazer backup/Restaurar e faça um cópia de segurança do seu template clicando em Fazer download do modelo completo.


2. Depois clique em Editar HTML e marque a opção Expandir modelos de widgets.


3. Pressione Ctrl+F para abrir o Localizador de seu navegador e procure pelo código abaixo.


<body>

Caso em seu template não tenha o código acima, procure por este outro código:

<header> 

4. Depois de encontrar um dos códigos acima, cole o código a seguir abaixo de <body>. Caso em seu template tenha somente o segundo (<header>) código, cole acima dele.

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

Substitua as partes destacadas de vermelho pelo link desejado. Substitua as partes destacadas de verde pelo nome ao passar o mouse em cima do link e substitua as partes destacadas de azul pelo nome do seu link.

5. Pressione novamente Ctrl+F para abrir o Localizador do navegador e procure pelo código abaixo.

]]></b:skin>

6. Após ter encontrado o código, cole o seguinte código acima do mesmo. Lembre-se de fazer as modificações à seu gosto.


/* 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;
}

7. Clique em Visualizar e se estive tudo correto, clique em Salvar modelo.

Pronto, seu menu novo está adicionado. Lembrando que você pode adicionar mais links no menu repetindo a parte destacada de negrito no passo. Boa sorte e até mais.
► Postagens Relacionadas:

12 Comentários

DenisGomez disse...

Muito bom, sabe que sou fã de menus kkkkk
Mas eu prefiro os que ficam lá em cima e não os que rolam junto :) mas muito bom artigo

11 de março de 2012 às 01:38
João Almeida disse...

Mas cada um tem o gosto. Além disso ele bem útil para o leitor não ficar só subindo e descendo. Obrigado pela participação.

11 de março de 2012 às 12:34
Eliel Neto disse...

João posta uma imagem do widjet pronto!

12 de março de 2012 às 21:22
João Almeida disse...

Desculpe não ter colocado uma demonstração. Mas acesse a imagem a partir do link: https://lh4.googleusercontent.com/-q_t95P5dpik/T16UgyNmnjI/AAAAAAAACb8/WslUwM9KGd4/s912/Capturar.PNG

Espero lhe ter ajudado.

12 de março de 2012 às 21:28
Herlan Santos disse...

Muito bom!

27 de março de 2012 às 19:04
João Almeida disse...

Que feliz em que tenha gostado Herlan! Obrigado pela participação.

27 de março de 2012 às 19:09
Tiago Martins disse...

www.detiagomartins.blogspot.com

Visita ai JOÃO comenta la?

17 de maio de 2012 às 18:05
João Almeida disse...

Ele é realmente bom, mas está demorando a carregar, tente resolver este probleminha. ;D

17 de maio de 2012 às 18:56
O LARÁPIO disse...

OI JOÃO, EU NOVAMENTE, KKK. OLHA, TEM COMO CENTRALIZAR O MENU É QUE ELE FICA À ESQUERDA E EU GOSTARIA QUE FICASSE CENTRALIZADO.


OBRIGADO MAIS UMA VEZ MEU AMIGO E PARABÉNS PELO TRABALHO.

18 de julho de 2012 às 16:13
João Almeida disse...

Olá Larápio! É sempre bom tê-lo aqui. Para deixar o menu centralizado, você vai modificar estas áreas:
Em #navtop li {, procure o float: left;. Substitua o left por center.

Faça o mesmo em #navtop li a, #navtop li a:link, #navtop li a:visited { . Procure por float: left; e substitua o left por center.
Espero ter ajudado.

18 de julho de 2012 às 20:27
Leide Anny disse...

Troquei os left por center, porém não funciona. Apenas ficou um abaixo do outro ao invés de centralizado. PRECISO DE AJUDA!!! o.O

29 de dezembro de 2013 às 03:01
ricardo.farias disse...

Algo deu errasdo no meu site http://www.trabalhoemcasalucrativo.com

6 de janeiro de 2014 às 00:33

Postar um comentário