Menu fixo no topo do blog

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!
POR
TAGS:
loading..
Comentários
31 Comentários

31 comentários

  1. Carla Gomes13 de abril de 2014 12:40

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

    ResponderExcluir
  2. Anônimo14 de abril de 2014 12:13

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

    ResponderExcluir
  3. Luana Souza14 de abril de 2014 14:42

    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. Suzana14 de abril de 2014 15:15

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

    ResponderExcluir
  5. Chris Gomes19 de junho de 2014 23:29

    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. Stéfani Zimmermann20 de junho de 2014 13:33

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

      Excluir
  6. Dona do blog25 de agosto de 2014 21:09

    O Meu ficou todo estranho :(

    ResponderExcluir
    Respostas
    1. Unknown10 de novembro de 2014 10:17

      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. Unknown6 de setembro de 2014 22:04

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

    ResponderExcluir
  8. Unknown8 de setembro de 2014 23:28

    Este comentário foi removido pelo autor.

    ResponderExcluir
  9. Pausa Para Make17 de outubro de 2014 12:35

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

    ResponderExcluir
  10. Marie 18 de dezembro de 2014 17:03

    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. Stéfani Zimmermann19 de dezembro de 2014 17:11

      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. Unknown22 de janeiro de 2015 22:43

    Adorei o tutorial <3

    ResponderExcluir
  12. Unknown11 de fevereiro de 2015 19:26

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

    ResponderExcluir
  13. Gabriela C16 de março de 2015 20:37

    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. Stéfani Zimmermann21 de março de 2015 14:43

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

      Excluir
  14. Camie Saraiva3 de abril de 2015 01:58

    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
  15. Unknown4 de abril de 2015 17:23

    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
  16. Anônimo12 de abril de 2015 13:18

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

    ResponderExcluir
  17. Unknown8 de maio de 2015 23:09

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

    ResponderExcluir
  18. Unknown22 de junho de 2015 15:13

    Amei!

    ResponderExcluir
  19. Unknown23 de junho de 2015 12:31

    GOSTEI DE MAIS DEIXO MEU LAYOUT PERFEITO!

    ResponderExcluir
  20. Gabriely1 de agosto de 2015 00:16

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

    ResponderExcluir
    Respostas
    1. Stéfani Zimmermann2 de agosto de 2015 18:39

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

      Excluir
    2. Gabriely3 de agosto de 2015 20:59

      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. Stéfani Zimmermann4 de agosto de 2015 23:17

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

      Excluir
  21. Unknown22 de fevereiro de 2016 14:46

    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
  22. Lidia Canuto3 de julho de 2016 02:13

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

    ResponderExcluir
  23. Anônimo26 de julho de 2017 21:26

    Vou testar no blog
    www.mulhercristaeseular.blogspot.com

    ResponderExcluir

Assinar: Postar comentários (Atom)