Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1513083632
Vida do cache: 1513126832
Status: 1
Mensagem: Centive nao respondeu
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Hospedagem - 728 x 90

Menus

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.


Confira Demo»

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>



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

44 Comentários

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

  2. Alana disse:

    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…

  3. Oi Vanessa, segui corretamente como colocar, mas no meu site não deu certo? o que pode ser? Beijos

    • Vanessa disse:

      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.

  4. Oi Vanessa tudo bem, gostaria de saber se conseguimos incluir sub-menus nesse menu rolante?

    Agradeço desde já.

  5. Jun disse:

    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!

  6. Juliano Araújo disse:

    Oi Vanessa adorei a dica funcionou perfeitamente, agora tem como adicionar sub-menus dentro dele?

    Aguardo. Desde já obrigado.

  7. Raíssa disse:

    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!

    • Vanessa disse:

      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.

  8. Dayane disse:

    oooi, eu queria coloca o texto do menu no centro! mais quando mudo o FLOAT não funciona. Eai, como faz?

  9. Henrique disse:

    Eu posso colocar as paginas em baixo, no rodapé do blog?

  10. kiko disse:

    oi amiga gostaria de saber como faço para centralizar o menu deixar o “botões” centralizados aguardo a sua ajuda!

  11. Carlos Eduardo disse:

    O Menu, deu certo no meu blog mais quando clico no link fica assim como faço para reverter isso?

  12. Valeu muito obrigador deu certinho o menu com esse tutorial ai

  13. Will Monteiro disse:

    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

  14. junior play disse:

    legal esse post

  15. eCalandula disse:

    Obrigado… tudo certinho_ em breve estará no blog ()

  16. Clícia Loubach disse:

    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!

    • di web disse:

      o meu tbm não centralizou com troca do float por center.. :( me ajudaaaa…

  17. Angelo disse:

    muuuuuuuuuuuuuuuuuiiiiiiiiito obridado, não acredito que o meu blog esta com o menu que eu sempre quiz colocar, obrigado !

  18. Mih disse:

    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/

  19. ana costa disse:

    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

  20. Potter disse:

    Como mudar a familia da font e também como fazer para colocar imagens ao invés de texto??

  21. .:: Clau ::. disse:

    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 😉

  22. Sm!g@u disse:

    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

  23. BLOG DE GISOALVES* disse:

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

  24. .:: Clau ::. disse:

    BLOG DE GISOALVES
    Dá uma lida neste tutorial:
    http://www.mundoblogger.com.br/2009/08/menu-flutuante-para-rolar-pagina-do.html

  25. BLOG DE GISOALVES* disse:

    Oi clau, estou procundo os menus antigos de botões rolante, para cima e para baixo e o page do site !!

  26. Silvana disse:

    Adorei!!!!!!!!!!!
    to editando o meu ainda em tudo… super vou usar!!!
    se quiser ver…. silvanaoliveira.com

    beijo, mt obrigada mesmo!

  27. .:: Clau ::. disse:

    H1TL3R
    Eu já publiquei um menu dropdown, se quiser dá uma olhada. Obg pelo comentario.

  28. H1TL3R disse:

    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)

  29. Franklin disse:

    Obrigado pela dica, caso queira ver como ficou: http://www.mundointerpessoal.com, aproveitei e fiz uma adaptação.

  30. .:: Clau ::. disse:

    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

  31. Franklin disse:

    Olá Clau, Gostaria de saber como faço para deixar ela fixa.
    Obrigado.

  32. Eduuh M. disse:

    clau, eu coloquei, mais ele tampa o titulo do meu blog, dá uma olhada:
    http://www.blogseraobenedito.com

  33. Avelino disse:

    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!

  34. Luis Marcos Leite disse:

    Parabéns. Explicação simples e objetiva. Funcionou direitinho e já estou, no momento ajustando.

  35. Kevin Oliveira disse:

    Muito bom Clau, estou modificando um template e acho que este tutorial vai ser essencial, continue postando artigos incríveis. (:

Desculpe, os comentários deste artigo estão desativados.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.