Menu fixo no topo do blog

12/04/2014

Olá gente! Alguns leitores pediram para que eu ensinasse aqui no blog como fazer o menu que eu uso, então hoje vim fazer o tutorial. Lembrando que ele só foi testado no modelo Travel (Viagem), então não posso garantir que ele funcionará em outros modelos. Encontrei esse tutorial lá no Cereja Black, e fiz algumas alterações para ficar como eu queria. Vamos ao tutorial:


  • Vá no Painel do Blogger > Modelo e cole acima da tag ]]></b:skin>:

#mymenuda {
background: #CD6090; /* Cor do background */

border-left: 200px solid #CD6090; /* Tamanho e cor 
da borda - não retire pois ela centraliza o menu */

width: 100%;
height: 34px;
position: fixed;
top: 0;
left: 0;
z-index: 9999; 
}
#mymenu {
background: #fff; /* Cor da fonte */
font-family: 'Arial', corsiva; /* Nome da fonte */
font-size: 16px; /* Tamanho da fonte */
text-transform: uppercase; 
}
#mymenu li {
list-style-type: none;
display: inline;
float: left; /* Posicionamento do menu */
padding: 0px;
}
#mymenu li a {
color: #fff;
text-decoration: none;
padding-right: 24px;
line-height: 37px;
}
#mymenu a:hover {
color: #EED5D2; /* Cor da fonte em hover */
}
#mymenu ul {
list-style: none;
margin: 0;
padding: 0; 
background: #fff;
margin-left: 40px;
}
#mymenu li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 120px;
padding-left: -40px;
}
#mymenu li ul a {
font-size: 12px;
line-height: 24px;
}
#mymenu li:hover ul ul, 
#mymenu li:hover ul ul ul, 
#mymenu li.sfhover ul ul, 
#mymenu li.sfhover ul ul ul {
left: -999em;
}
#mymenu li:hover ul, 
#mymenu li li:hover ul, 
#mymenu li li li:hover ul, 
#mymenu li.sfhover ul, 
#mymenu li li.sfhover ul, 
#mymenu li li li.sfhover ul {
left: auto;
}

#mymenuright {
float: right;
color: #fff;
}

/* BARRA DE PESQUISA */

.search{
float: left; /* Flutuando a esquerda */
font-family: Georgia, Tahoma; /* Nome da fonte */

}
.searchbar{
margin-top:7px;
height: 14px;
width: 240px;
color: #ccc; /* Cor da fonte */
-moz-border-radius: 6px;-webkit-border-radius: 6px;-goog-ms-border-radius: 6px;background: #FFF; /* Cor de fundo */

}
.searchbut{
background: url('http://i43.tinypic.com/2evyidy.png'); /* Link da imagem do botão de pesquisar | tamanho: 20x20px */
width:20px;
height:20px;
border: 0;
padding:6px;
}

OBS: O menu (exceto as cores), está com as mesmas configurações que eu uso, então se você não entende muito de HTML recomendo que não altere nada além do que está indicado.

  • Vá em Layout > Adicionar um Gadget > HTML/JavaScript e cole:

<div id="mymenuda">
<div id="mymenu">
<li><a href=" Link ">Título</a></li>
<li><a href="Link ">
Título</a></li>
<li><a href=" Link ">
Título</a></li>
<li><a href=" Link ">
Título</a></li>
<li><a href=" Link ">
Título</a></li></div>
<form action="/search" class="search" method="get">
<input class="searchbar" id="s" name="q" type="text" value="" />
<input class="searchbut" type="submit" value="" />
</form>
<div id='mymenuright'>
</div></div>

Faça as alterações necessárias (coloque o link da página e o título) e salve.

OBS: Se você quiser colocar mais uma página é só copiar e colar a linha de <li> até </li> e colar antes de </div>. Para retirar, é só apagar uma das linhas. Resultado.

Espero que tenham gostado do tutorial, qualquer dúvida é só comentar que estarei fazendo o possível para ajudar. Se quiser pedir algum tutorial é só entrar em contato comigo. Beijos!

31 comentários:

  1. Amei o tutorial *O* estava a procura dela faz um bom tempo :3
    bjs
    anjodecereja.blogspot.com

    ResponderExcluir
  2. O meu já veio no Layout, eu só mudei as cores pra deixar mais *azul* minha cara

    ResponderExcluir
  3. Vou usar ele pro meu próximo layout, acho esse menu bem bonitinho e super prático :) Adorei o tutorial!
    Beijos,
    poderosascomsalto.blogspot.com

    ResponderExcluir
  4. Ah se meu layout ainda fosse travel eu até faria, porque adoro esse menu rs Mas não vou arriscar ;(

    ResponderExcluir
  5. Como faço pra deixá-lo centralizado, chuchu?
    No meu layout, ele fica sempre "mais pra um lado", sabe?

    Beijo!

    www.heychriz.com.br

    ResponderExcluir
    Respostas
    1. Ele centraliza automaticamente, a não ser que você tenha apagado a terceira linha do primeiro código.

      Excluir
  6. Respostas
    1. OIE FLOR EU NÃO SOU ELA MAS POSSO TE AJUDA ! VC MEXEU NOS CÓDIGOS ! E SÓ PODE ALTERAR A COR SE NÃO FICA TODO ESTRANHO

      Excluir
  7. Amei, me ajudou muito.
    Beijos
    http://blogmeninaousada.blogspot.com.br/

    ResponderExcluir
  8. Este comentário foi removido pelo autor.

    ResponderExcluir
  9. Nossa, amei esse tutorial Foi o único que eu consegui deixar centralizado. Obrigada viu

    ResponderExcluir
  10. Eu fui tentar colocar no meu blog, mas a fonte ta estranha. Eu não consigo deixar o texto dentro da caixinha do menu, ele fica pra fora :/ eu testei no meu blog teste e deu certo e quando fui passar pro meu atual deu erro :/ Se puder acesse http://blog-diario-de-ferias.blogspot.com.br/ e vê se tem conserto KK'

    ResponderExcluir
    Respostas
    1. Você mexeu em alguma parte do código além do que está indicado? Tente editar só a cor e deixar o resto do código como está.

      Excluir
  11. Muuuito obrigada :D
    Amei o tutorial e foi mto útil :3

    ResponderExcluir
  12. linda, to usando seu menu, e a propósito, é lindo, obrigada!
    agora deixa eu esclarecer uma duvida, tem jeito de centralizar o nome das paginas? porque fica fixo no lado esquerdo e como eu tirei a barrinha de pesquisar quero deixar as páginas centralizadas, como faço?

    ResponderExcluir
    Respostas
    1. Olá! Você tem que aumentar o tamanho da borda (border-left), até ficar onde você quer. Beijos!

      Excluir
  13. Fazia tempo que eu queria colocar esse menu, mas eu não fazia ideia de como fazer, ai achei o teu tutorial enquanto pesquisava e não teve erro. Ficou certinho como eu queria. Muito obrigada pelo tutorial, foi muito, muito útil mesmo!
    Beijos

    ResponderExcluir
  14. Muito legal!!
    Passei o dia de ontem todo tentando vários menus que encontrei pela web, mas só hj eu encontrei o seu blog para me ajudar de uma maneira rápida, simples e eficiente!
    Muito agradecida!!
    Alice.

    ResponderExcluir
  15. ♥ ❤♥ ❤♥ ❤♥ ❤♥ ❤♥ ❤♥ ❤♥ ❤ No meu theme não tem ]]>: colei a primeira parte após style> e funcionou

    ResponderExcluir
  16. Oiiiie, parabéns pelo site e tutorial. Coloquei jno meu blog e ficou ótimo! www.gosteigostasse.com.br

    ResponderExcluir
  17. GOSTEI DE MAIS DEIXO MEU LAYOUT PERFEITO!

    ResponderExcluir
  18. As minhas letras ficaram todas juntinhas! O que faço? :(

    ResponderExcluir
    Respostas
    1. Deve ser por que você tem muitas páginas, tente tirar algumas. Beijos!

      Excluir
    2. Obrigada Flor! Deu certo hehehe! Agora uma outra duvidazinha... Como faço pra tirar uma espécie de "linha" que fica entre os nomes das páginas no menu?

      Excluir
    3. Você não mexeu em algo além do que estava indicado no código? Não era para ter essa linha.

      Excluir
  19. Muuuuuuuuuitooo obrigada! Tentei colocar o menu fixo no meu blog olhando outros tutoriais e não dava certo! Só agora consegui! Muiito obrigada mesmo! ♥

    ResponderExcluir
  20. Grata, estou tentando deixar meu blog prático para os meus alunos e a sua postagem ajudou bastante.

    ResponderExcluir
  21. Vou testar no blog
    www.mulhercristaeseular.blogspot.com

    ResponderExcluir