Menu Fixo no Topo do Blog

07:27



Olá meus amores, hoje eu trago para vocês mais um tutorial de como colocar um Menu Fixo no Topo do Blog, igual ao meu como vocês podem conferir ai no topo...
Sempre quis coloca-lo assim, porem nao sabia como, tentei algumas vezes e dava erro nos link, mas agora funcionou e vou compartilhar com vocês.
Obs:  Testei no Modelo Travel
Faça um Backup do seu layout caso alguma coisa dê errado!
Os créditos vão para Place Style


  • Vá no Painel do Blogger > Modelo e procure por  ]]></b:skin>
  • Quando encontrar, cole acima dessa Tag:


#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;

}

________________________________________________________

Bem, todas as linhas que tem uma descrição em vermelho, 
podem ser alterada como quiserem, de acordo com sua preferencia.
OBS:  se você não entende muito de HTML recomendo que não altere nada 
além do que está indicado.
Caso queiram conferir a lista de cores em HTML (Clique Aqui)
________________________________________________________

  • Feito isso, salve o modelo.
  • Agora vá em " Layout"
  • Adicionar um Gadget
  • HTML/JavaScript
E cole esse Código:

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

___________________________________________________________

No caso do meu blog (não sei se acontece com todos),  a parte em negrito escrito LINK, nao vai o link completo...

Exemplo:

A pagina "SOBRE" do meu blog tem esse link:

http://renatamassa.blogspot.com/p/sobre_1.html

Mas no codigo onde tem a Opção para botar o link, coloca-se apenas tudo que vem depois do .COM

Como ta ai em cima em vermelho, somente essa parte colocamos na opção do link.
Bem, espero que vocês tenham entendido.

Qualquer duvida, pode deixar aqui nos comentários que responderei a todos!



Você pode gostar também

23 comentários

  1. Muito bonitinho seu blog ^^ ! mas vem ca Renata coomo faço isso no wordpress?

    www.suelenlima.com.br (Sue Fashion Day)

    ResponderExcluir
    Respostas
    1. Oie Suelen, obrigada pela visita.
      Esse foi um dos motivos que me fez desistir do Wordpress...
      Talvez nao tive tanta habilidade com ele, e tambem eram pucas opçoes rsrs...
      Entao migrei para o blogger...

      Excluir
  2. ameiii reh! eessas dicas estao cada vez melhores!!
    beijokas

    ResponderExcluir
    Respostas
    1. Oieee Tete..m muito obrigada pela força ♥
      Beijooo

      Excluir
  3. Adorei, seu blog é lindo!

    http://meumundo-corderosaa.blogspot.com.br/2015/01/trend-top-de-croche.html

    ResponderExcluir
    Respostas
    1. que bom q gostou... fico muitoooo feliz por issooo ♥♥♥
      visitei seu blig e tbm curtir mtoo ♥
      Bjus... volte sempre Anna

      Excluir
  4. Rê , poxa parei na primeira linha: Vá no Painel do Blogger > Modelo e procure por ]]>. Não achei esse código ai não. Eu escolhi o modelo travel, e coloquei para personalizar .. ai abriu o menu para design do blog ..
    Quando ver pode falar cmg pelo zap zap ?

    beiijão Reh

    ResponderExcluir
    Respostas
    1. Kaa... as vezes quando copiamos o codigo e colamos.. acaba indo com um espaco antes ou depois do codigo... ai nao encontra mesmo.. dê uma conferida de nao ter nenhum espaço vazio antes ou depois da palavra quando vc busca em Contl F
      se assim ainda nao funcionar... basta procurar por parte do codigo...
      exemplo: Skin
      voce procura o segundo que sera de fechamento qye tem uma barra / entre o codigo.
      qualquer duvida... volta aqui q esclareco

      Excluir
  5. Gostei demais. Mas quero tirar a sombra que fica em cima quando passamos o mouse. Como faço?

    ResponderExcluir
    Respostas
    1. Oie Quezia .. vc quer tirar o Hover.. nessa parte do codigo vc altera a cor quando passa o mause por cima

      mymenu a:hover {
      color: #EED5D2; /* Cor da fonte em hover

      Nao fiz o teste sem o hover.. agora tou no celular daqui a pouco quando tiver pelo not vou testar excluindo a linha e te falo...
      Nao tente para nao prejudicar seu layout... eu ultiliso blog para teste de lay.
      Bjao lindona te respondo ainda hj, se Deus quiser ♥

      Excluir
    2. Eu já tirei esse código. Mas continuou. Aguardo sua resposta. Obrigadinha *---*
      Bjooss

      Excluir
    3. Quezia, testei de dois jeitos, e os dois funcionaram.
      Na verdade nao seria uma sombra, as letras mudam de cor quando o mouse passa por cima.

      Eu excluir a linha do Hover (funcionou)

      E testei colocando a cor em hover igual a da cor inicial, ou seja quando o mouse passa por cima continua da mesma cor.

      Tenta, e me diz!
      Bjus

      Excluir
  6. Lindão o blog, Renata! Amei!
    E amei esse tuto, porém tenho uma dúvida. Só estou te enchendo a paciência com isso porque não encontrei a resposta em nenhum outro lugar: por exemplo, se eu quiser que o menu não fique aparecendo conforme eu rolo a página, o que tenho que fazer? Tudo o que eu tento desconfigura-o, então se você soubesse a resposta, me ajudaria muito ^~

    bjo!

    ResponderExcluir
  7. Olá linda, é a primeira vez que venho no seu blog, que eu conheço o seu cantinho e eu amei tudo aqui. Você com essa dica me ajudou bastante com o meu blog, não tenho palavras para agradecer. Já ganhou uma seguidora hehe. Super beijo, sucesso, e continua fazendo mais post sobre blog.

    http://morandosozinhaesoumae.blogspot.com.br/

    ResponderExcluir
  8. Acabei de conhecer teu blog e usei esse tutorial www.ideiadela.com
    Não sei como deixar o menu centralizado na versão mobile também... Você saberia me ajudar?
    Obrigada!! bjs

    ResponderExcluir
  9. Muito bom estamos usando em nosso blog

    ResponderExcluir
  10. Amei seu blog! suas dicas são muito verdadeiras. obg

    ResponderExcluir
  11. Amo seu blog... Estou aprendendo html e css, nas duvidas seu blog está me ajudando bastante <3 bjos

    ResponderExcluir
  12. Re olha no meu eu tambem eu fiz no modelo travel mais nao acho o codigo

    ResponderExcluir
  13. Deu certo! Fiz algumas modificações para ficar do jeito que eu queria. Obrigada!
    http://meualeatorio.blogspot.com.br/

    ResponderExcluir
  14. Olá Renata que legal seu blog, gostei do o menu no topo, e gostei da cor do fundo também e fiz poucas mudanças na cores, porem o NAVBAR sumiu do topo, mais beleza!!

    ResponderExcluir
  15. Olá, queria que quando passasse por cima da letra aparecesse o botao preto bem pequeno, como uma linha somente e tbm mudasse a cor da letra, como posso fazer isso ?

    ResponderExcluir
  16. Ficou lindo esse menu no meu blog 😉, mt obrigada! Dá uma olhadinha lá 💜 https://filosofarodrigues.blogspot.com.br 💜

    ResponderExcluir

Mande seu comentário, criticas, elogios ou sugestões.
Responderei o mais rápido possivel.
Um forte abraço a todos vocês!

Contrate o Blog

Meu blog faz parte do Modatrade


Renata Massa
Renata Massa
Modatrade | A vitrine dos blogs de moda
Modatrade | A vitrine dos blogs de moda