Blogueiras Iniciantes

Menu Fixo no Topo do Blog



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!



Renata Massa

You Might Also Like

30 comentários

  1. Unknown22 janeiro

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

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

    ResponderExcluir
    Respostas
    1. Renata Massa22 janeiro

      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. Unknown22 janeiro

    ameiii reh! eessas dicas estao cada vez melhores!!
    beijokas

    ResponderExcluir
    Respostas
    1. Renata Massa25 janeiro

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

      Excluir
  3. Anna Dulce22 janeiro

    Adorei, seu blog é lindo!

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

    ResponderExcluir
    Respostas
    1. Renata Massa25 janeiro

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

      Excluir
  4. Karine Fernandes22 janeiro

    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. Renata Massa25 janeiro

      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. Quézia Melgaço25 janeiro

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

    ResponderExcluir
    Respostas
    1. Renata Massa25 janeiro

      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. Quézia Melgaço26 janeiro

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

      Excluir
    3. Renata Massa26 janeiro

      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. Lady Salieri29 abril

    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. Karine Melo27 maio

    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. Ideia dela19 outubro

    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. Altamira News29 maio

    Muito bom estamos usando em nosso blog

    ResponderExcluir
  10. Unknown31 maio

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

    ResponderExcluir
  11. Raquel Santos31 maio

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

    ResponderExcluir
  12. Unknown13 outubro

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

    ResponderExcluir
  13. Fer Freitas16 outubro

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

    ResponderExcluir
  14. Tribotext Brother10 novembro

    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. Unknown10 novembro

    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. Anônimo16 novembro

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

    ResponderExcluir
  17. promotordigital06 janeiro

    Deu tudo errado....os menbus ficaram embaixo..e apareceu muitas letras no topo...eu desisto

    ResponderExcluir
  18. Tiago Gomes06 fevereiro

    ótima dica, sucesso.

    https://sdgbrasil.blogspot.com.br/

    ResponderExcluir
  19. Alex Sandro13 setembro

    São essas dicas e esses templates respossivos que me fazem pensar em evoluir. Mas também gosto de programação crua. Obrigado pela dica!

    http://galeriadoclassicrock.blogspot.com.br/

    ResponderExcluir
  20. Jovem Cristão19 setembro

    Opa Boa noite! se poder me dar uma forcinha agradesço, como faço pra retirar o menu do template e deixar só esse que você ensinou a colocar???

    coloquei mas ficou aparecendo os 2 menus!!!

    ResponderExcluir
  21. Ana Jú Lacerda03 janeiro

    Este comentário foi removido pelo autor.

    ResponderExcluir
  22. Ana Jú Lacerda03 janeiro

    Oii! Fiz direitinho seu tutorial, exatamente como você estava explicando mas não funcionou, o que fiz de errado?

    ResponderExcluir
  23. António Ja Batalha21 agosto

    Boa tarde Renata, tem aqui boas dicas, Pergunto; nesse menú os links não podem abrir também para cima? O meu blog tem muitos links e fazia-me jeito. Encontrei esta caixa abre para os dois lados, mas não é possível editar a cor nem o tamanho, e só aceita uma caixa por página. Se me poder ajudar agradeço.

    ResponderExcluir

Mande seu comentário, criticas, elogios ou sugestões.
Responderei o mais rápido possível.
Um forte abraço.

instagram