Menus Vanessa S.
Menu Rolante no topo do Blog
Neste tutorial, vamos aprender como adicionar um menu no topo do blog.
O diferencial deste menu é que ele se move conforme rolamos a página para cima ou para baixo, porém, permanece sempre fixo no topo.
Para implementar este menu no seu blog, basta apenas a inserção de CSS e HTML no código do template.
Antes de iniciarmos, para evitar quaisquer transtornos, caso algo saia errado, recomendo que você faça um Backup do seu template antes de prosseguir.
1º passo – Aplicar estilos CSS:
Entre na edição HTML 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.
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>
Insira seus links nos locais destacados, 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>
Olá Vanessa, será que lembra de mim ainda ?? rsrsrs Acho que não… To passando pra te agradecer, pois suas explicações são demais, bem detalhadas e sem erros… O código da barra fixa no topo do blog funcionou perfeitamente… Muito obrigado… Tbm to comentando para lhe deixar uma dica bem legal que pode melhorar ainda mais seu código do menu fixo no topo do blog, é um efeito de transição entre as cores do links no estado normal pro hover e vice-versa, basta acrescentar essa pequena linha de códigos:
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
No local de personalização do link do estado normal e repetir esse código no local do link no estado hover, isso gera um efeito bem legal a transição de cores quando o mouse passa por cima do link. É só uma dica pra deixar mais perfeito do que já está seu código… Se quiser ver um exemplo, coloquei esse efeito em meu blog romirys.blogspot.com e ficou bem legal…
Mais uma vez queria te agradecer pelo maravilhoso código e deixar essa dica como sugestão para otimização dos códigos citados nessa publicação…
Att. Romirys Cavalcante
Como faço para deixar os links centralizados?
Usa o atributo Dentro do código html na primeira e vai colocando o espaço em pixels correto até que você veja que os links estão centralizados, um exemplo de como poderia ficar o código é assim:
Link 1
Você pode alterar o valor em pixels de 150 para mais ou para menos de modo a centralizar os links… Espero que a dica ajude Alana…
Oi Vanessa, segui corretamente como colocar, mas no meu site não deu certo? o que pode ser? Beijos
Recursos que funcionam a base de arquivo javascript a sua funcionalidade pode variar de acordo com o template. Templates que possuem muitos scripts, acabam gerando “conflitos” entre si. Pode ser isso que ocorreu no seu blog.
Oi Vanessa tudo bem, gostaria de saber se conseguimos incluir sub-menus nesse menu rolante?
Agradeço desde já.
Juliano, eu não testei, portanto não sei te informar.
Oi Clau! Teria algum tutorial de menu horizontal como esse porém que fique fixo na página lá em cima, sem acompanhar a rolagem? Tnx!
Oi Vanessa adorei a dica funcionou perfeitamente, agora tem como adicionar sub-menus dentro dele?
Aguardo. Desde já obrigado.
Olá… estou tentando acrescentar esse menu no meu blog, mas ele não aparece como menu horizontal como no exemplo, mas como vertical sobre a imagem de Header do meu blog. Uso os modelos do blogger.
Gosto muito do seu blog e ja me ajudou mt nas mudanças.
Se puder me ajudar ficarei grata. Obg.
ótimo final de semana!
Lamento, mas eu não tenho como te ajudar, pois deve ser algo relacionado ao seu template e para tentar descobrir, teria que ser feita uma análise mais minuciosa, e infelizmente eu não disponho de tempo para isso. De qualquer forma, agradeço pelo comentário.
oooi, eu queria coloca o texto do menu no centro! mais quando mudo o FLOAT não funciona. Eai, como faz?
Eu posso colocar as paginas em baixo, no rodapé do blog?
oi amiga gostaria de saber como faço para centralizar o menu deixar o “botões” centralizados aguardo a sua ajuda!
Experimenta substituir o float: left; por float: center;
Não dá certo.
coloque em modelos de seu blog >> avançado >> adicionar css >> procure por isso aqui padding:0px 0px; >> para coloca no centro mude esse lado que eu alterei padding:0px 3px; você vera alteração que vai faz la ta.blz
O Menu, deu certo no meu blog mais quando clico no link fica assim como faço para reverter isso?
Valeu muito obrigador deu certinho o menu com esse tutorial ai
oi eu queria saber se tem como fazer do mesmo jeito só que sem mecher com o html do blog css, tipo só um gadget, personalizado.
se tiver por favor faz um tutorial ensinand a personalizar.
obrigado
legal esse post
Obrigado… tudo certinho_ em breve estará no blog ()
Olá Clau! Parabéns pelo tutorial claro e prático!
Gostaria de saber apenas três coisas deste menu:
1 – o que altero no código para mudar a fonte dos links.
2 – o que altero para centralizar os botões (tentei center mas se formou um escada ao invés de centralizar).
3 – como colocar, do lado direito, botões para redes sociais ou caixa de busca.
Aguardo seu retorno!
Muito obrigada!
o meu tbm não centralizou com troca do float por center.. 🙁 me ajudaaaa…
muuuuuuuuuuuuuuuuuiiiiiiiiito obridado, não acredito que o meu blog esta com o menu que eu sempre quiz colocar, obrigado !
Oiii Clau tudo bem?
EU fiz esse menu no meu blog,mas eu gostaria que ele ficasse intacto na em cima e não rolasse junto com a página,como faço para tirar o rollover?
Eu tirei o fundo e desci ele,ache que ficou muito fofo.
Você poderia me ajudar?
Beijinhos!
http://nerfetite.blogspot.com/
Oi eu gostava de pôr no meu blog em cima não sei se a aplicação se chama menus, mas é um pouco como voçê tem.
Seria mais ou menos isto: início, contacto, indice e depois outro item com os posts, mas não consigo. O template já traz ou posso por? me ajuda? obrigada
Como mudar a familia da font e também como fazer para colocar imagens ao invés de texto??
Sm!g@u
Valeu pelo toque! É impressionante como tem gente cara de pau nessa blogosfera né? Já irei tomar as providências cabíveis. Valeu 😉
Olha clau….faz tempo anda vendo gente copiar seus tutoriais, e ainda por cima não colocam seus créditos.
Veja esse site: http://www.tutoriais.bcreate.net/
Tem diversos arquivos seus, no qual eu considero uma tremenda falta de respeito
Att, SM!G@U
Olá Clau, eu achei o código mais tentei por mais não conseguir, o meu modelo clássico, por isso não deu certo, mais mesmo assim te agradeço !!
BLOG DE GISOALVES
Dá uma lida neste tutorial:
https://www.mundoblogger.com.br/2009/08/menu-flutuante-para-rolar-pagina-do.html
Oi clau, estou procundo os menus antigos de botões rolante, para cima e para baixo e o page do site !!
Parabéns!
http://www.monstevolution.net/
Adorei!!!!!!!!!!!
to editando o meu ainda em tudo… super vou usar!!!
se quiser ver…. silvanaoliveira.com
beijo, mt obrigada mesmo!
H1TL3R
Eu já publiquei um menu dropdown, se quiser dá uma olhada. Obg pelo comentario.
Clau como sempre disponibilizando aos blogueiros, e aos curiosos na arte de blogar os melhores tutoriais de CSS e HTML…
Eu particularmente adorei este menu, mas eu acho que ficaria melhor se você colocasse uma opção com Dropdown deste menu rolante!!! #Ficadica
Desde já, muito obrigado… By:H1TL3R (Holocaustocanibal.Webs.com)
Obrigado pela dica, caso queira ver como ficou: http://www.mundointerpessoal.com, aproveitei e fiz uma adaptação.
Kevin,
Luis Marcos
Obrigada! 😉
Avelino
Eu já publiquei este que vc citou:
Menu auto ocultável no topo do blog
Olha há tempos que ando pensando em migrar para o WP, o problema é o trabalhão que sei que vou ter..rs
Boa sorte na nova plataforma 😉
Eduuh M.
Experimenta estipular um espaçamento maior do cabeçalho do blog para o topo:
margin-top: XXpx;
Franklin
Já publiquei alguns modelos de menus que ficam fixos, se quiser, confira e escolha um:
Vários Menus Horizontais para blog
Olá Clau, Gostaria de saber como faço para deixar ela fixa.
Obrigado.
clau, eu coloquei, mais ele tampa o titulo do meu blog, dá uma olhada:
http://www.blogseraobenedito.com
Bacana este menu Clau,pensei que seria aquele que fica transparente quando rolamos a página,mesmo assim esse fica mais destacado.
Infelizmente(ou felizmente)deixei o blogger mudei para o wordpress,ainda estou em preocesso de reformulação e alterando tudo que precisa(dor de cabeça)..
Abraço!
Parabéns. Explicação simples e objetiva. Funcionou direitinho e já estou, no momento ajustando.
Muito bom Clau, estou modificando um template e acho que este tutorial vai ser essencial, continue postando artigos incríveis. (: