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.
Caso em seu template não tenha o código acima, procure por este outro código:
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.
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.
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.
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 4º passo. Boa sorte e até mais.
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 4º passo. Boa sorte e até mais.
Postagens Relacionadas:
Muito bom, sabe que sou fã de menus kkkkk
11 de março de 2012 às 01:38Mas eu prefiro os que ficam lá em cima e não os que rolam junto :) mas muito bom artigo
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:34João posta uma imagem do widjet pronto!
12 de março de 2012 às 21:22Desculpe 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
12 de março de 2012 às 21:28Espero lhe ter ajudado.
Muito bom!
27 de março de 2012 às 19:04Que feliz em que tenha gostado Herlan! Obrigado pela participação.
27 de março de 2012 às 19:09www.detiagomartins.blogspot.com
17 de maio de 2012 às 18:05Visita ai JOÃO comenta la?
Ele é realmente bom, mas está demorando a carregar, tente resolver este probleminha. ;D
17 de maio de 2012 às 18:56OI JOÃO, EU NOVAMENTE, KKK. OLHA, TEM COMO CENTRALIZAR O MENU É QUE ELE FICA À ESQUERDA E EU GOSTARIA QUE FICASSE CENTRALIZADO.
18 de julho de 2012 às 16:13OBRIGADO MAIS UMA VEZ MEU AMIGO E PARABÉNS PELO TRABALHO.
Olá Larápio! É sempre bom tê-lo aqui. Para deixar o menu centralizado, você vai modificar estas áreas:
18 de julho de 2012 às 20:27Em #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.
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:01Algo deu errasdo no meu site http://www.trabalhoemcasalucrativo.com
6 de janeiro de 2014 às 00:33Postar um comentário