06 setembro 2013

Tutorial: Menu acima do cabeçalho

Oi gente? Como estão? Depois do texto depressivo de ontem, estou bem melhor e espero que vocês também estejam tá bom? VOCÊ PODE CONFERIR MAIS TUTORIAIS AQUI!


  Quanto tempo não posto um tutorial né mesmo? Então hoje eu vim tirar essa tag da poeira e atender o pedido da Laís Herculano do blog Meus Dezoito Anos ♥ e da Jessica Alves do Batom e Blush ♥, que era como fazer o menu acima do cabeçalho (igual a do blog) com barra de pesquisa. É bem simples e precisa de bastante atenção, pois se errar uma letrinha já era. Preparados?


Testado apenas no modelo travel. Códigos editados por mim, o código original não lembro da onde tirei. Se for seu, me fale!

1. Entre no painel do blogger >> mais opções >> modelo >> editar html;
2. Acima da tag ]]></b:skin>
  cole o seguinte código:


#mymenuda {
background: #CD6090; /* defina a cor do background */

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

width: 100%;
height: 42px;
position: fixed;
top: 0;
left: 0;
z-index: 9999; 
}
#mymenu {
background: #fff; /* cor da fonte */
font-family: 'Arial', corsiva; /* nome da fonte */
font-size: 20px; /* titulo 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: 42px;
}
#mymenu a:hover {
color: #EED5D2; /* cor do link 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, poderá também mudar para Right (Direita) e Left (Esquerda) */
font-family: Georgia, Tahoma; /* Fonte da letra que será escrita quando procurarmos por algo */
}
.searchbar{
margin-top:7px;
height: 20px;
width: 240px;
color: #ccc; /* Cor da fonte da letra que será escrita quando procurarmos por algo */
-moz-border-radius: 6px;-webkit-border-radius: 6px;-goog-ms-border-radius: 6px;background: #FFF; /* Cor de fundo da parte onde escrevemos */
}
.searchbut{
background: url('http://cdn1.iconfinder.com/data/icons/Snow/Snow/snow/Search.png'); /* Link/Url da imagem do botão de pesquisar | tamanho: 30 x 30px */
width:30px;
height:30px;
border: 0;
padding:7px;
}



3. Depois de ter colado o código e ter feito todas as suas personalizações, vá para Layout >> Add Gadget >> HTML/ JAVASCRIPT e cole o código abaixo trocando o " # " pelo link da página e "PAG" pelo nome da página.


<div id="mymenuda">
<div id="mymenu">
<li><a href=" # ">PAG</a></li>
<li><a href="# ">PAG</a></li>
<li><a href=" # ">PAG</a></li>
<li><a href=" # ">PAG</a></li>
<li><a href=" # ">PAG</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>

4. Agora é só salvar. Se caso der algum erro não deixe de falar comigo tá bom?

Resultado: 

Beijos!

Comente com o Facebook:

77 comentários:

  1. Amei o tutorial eles sempre me ajudam por isso e outros motivos eu AMO o seu blog <3
    Ah fiquei muito feliz por ter e colocado nos blogs amigos irei fazer o mesmo com o seu você merece :D
    Beijos Linda Sucesso ;*
    *BR*
    http://debatomvermelhoo.blogspot.com.br/
    Facebook: https://www.facebook.com/DeBatomVermelhoo?ref=hl
    Youtube:http://www.youtube.com/channel/UCZhDEOgg0gwkU4W64-pkUPA

    ResponderExcluir
    Respostas
    1. Obrigada linda! Fico feliz por saber que eles te ajudam.
      Coloquei sim porque teu blog é shooow!

      Sucesso pra vc tambem.

      Excluir
  2. Menina, estes tutoriais ajudam muito eu sou perdida no meu blog .. beijos

    ResponderExcluir
    Respostas
    1. hahahaha que bom que te ajuda rs

      Excluir
  3. Gé, você salvou a minha vida e de tantas outras meninas! Obrigada pelo tutorial, irei experimentá-lo <3 Muito obrigada!

    Beijão,
    www.garotasemcliches.com

    ResponderExcluir
  4. Ai meu Deus, era esse tutorial que eu precisava! Obrigaaaaaada Ge. Faz mais tutoriais (:

    blog-meninasdepreto.blogspot.com.br

    ResponderExcluir
    Respostas
    1. De nada Deby! Faço sim é só vocês pedirem.

      Excluir
  5. No meu próximo layout vou tentar colocar no blog :D' faz mais tutoriais assim!

    ResponderExcluir
    Respostas
    1. Coloca sim! Qualquer duvida só falar tá Sa?
      Faço sim é só vocês pedirem.

      Excluir
  6. eu tava procurando um tuto desse ontem mesmo *-* vou dar um jeitinho e colocar no blog, acho muito lindo ^_^ Obrigada pela dica Geeh <3 Mais tutos assim iriam facilitar a minha vida haha
    Ah, só mais uma coisinha: Você comentou lá no meu blog que tava seguindo, né? Se você não notar diferença no número de seguidores do teu blog, é porque eu te sigo já faz tempo u.u
    Beijos !
    entaotudomudou.blogspot.com

    ResponderExcluir
  7. Que bacana, nem todo mundo entende de html tipo EU, em breve vou tentar fazer isso no meu blog *.*
    Obrigada pela dica
    Beijo
    www.sonhosdebrigadeiro.blogspot.com

    ResponderExcluir
    Respostas
    1. Faz sim! Qualquer duvida só falar.

      Excluir
  8. Adorei a dica
    beijos

    http://ronyalbuquerque.blogspot.com.br/

    ResponderExcluir
  9. Se eu não tivesse encarado html o dia todo, até experimentaria num layout. Mas já tô de saco cheioooooo hahahaha. A dica é super válida! Ajuda muito e fica fofíssimo!

    Pedras na Janela

    ResponderExcluir
    Respostas
    1. sei como é may rs
      Fica fofo mesmo

      Excluir
  10. Esse tutorial é muito bom. Obrigada, Gessy.
    Quero um nesse estilo para quando for mudar o design.
    Bjin.

    ResponderExcluir
    Respostas
    1. Que bom que gostou Sam, não precisa agradecer.
      Se não quiser que fique fixado é só tirar o" fixed" e pronto.

      Excluir
  11. Gessy, tenho uma dúvida. E se eu não quiser que o menu fique fixado no topo, troco o "fixed" por qual termo?

    ResponderExcluir
  12. Amanda10/9/13

    Eu não estou conseguindo ver qual é a tag '-'
    Mas muuuuuito obrigada pelo tutorial. Seu blog e seus tutoriais foram quem me deu gás pra voltar pra blogosfera! Obrigada!!

    ResponderExcluir
    Respostas
    1. Já concertei =)
      Não precisa agradecer. Eu que agradeço pelo carinho. Nem acredito que to lendo isso. Fico muito feliz por ter te ajudado de alguma forma. Qualquer coisa eu to aqui! Bjs

      Excluir
  13. Esta MUITO procurando um tutorial desses, muito obrigada ♥
    http://bonjourana.blogspot.com/

    ResponderExcluir
  14. Oi!
    Ótimo esse tutorial! Funcionou direitinho! Obrigada!

    Mas aparece uma linha bem fininha (amarela) dividindo os itens do Menu.
    (no meu blog pelo menos: http://www.liviaesuascarolinices.com/)

    Você sabe me dizer como faço para retirar?

    ResponderExcluir
    Respostas
    1. Sério! Que bom Livia!
      Deve alguma configuração de link que apareceu. Não sei como faz pra tirar:/

      Excluir
  15. Amei o tutorial, já adicionei ao layout que estou criando.
    Parabéns, está muito bem explicado!

    Beijos!

    Prioridades Femininas

    ResponderExcluir
    Respostas
    1. Feliz que tenha gostado e usado!
      Obrigada

      Excluir
  16. Anônimo26/10/13

    Hey there! I could have sworn I've been to this website
    before but after browsing through some of the post I realized it's new to me.
    Nonetheless, I'm definitely delighted I found it and I'll be
    bookmarking and checking back frequently!

    Feel free to surf to my page; Louisville Air Conditioning Installation

    ResponderExcluir
  17. Linda fiz direitinho mais nao funcionou , eu queria o fundo escuro mudei e nada,só ficava transparente ....bjs

    www.belezaemminutos.com

    ResponderExcluir
    Respostas
    1. :9
      Poxa
      Tenta de novo. As vezes é uma tag que vc esqueceu de copiar ou botou no lugar errado. A primeira vez que testei esse tuto ficou assim também, mas quando fiz de novo foi. Qualquer coisa só falar comigo!
      -------------------------------------------------

      RESPONDIDOS!

      Excluir
  18. Posso trocar a barra de pesquisa por botões de redes sociais?! Como?!

    ResponderExcluir
  19. Anônimo22/11/13

    You expressed that terrifically.

    Also visit my site ... 人気 ブランド 財布

    ResponderExcluir
  20. Eu até fui colocar no meu, mas não funcionou :/

    ResponderExcluir
  21. Usei no meu novo layout ficou muito lindo.
    Beeijos.
    http://cerejaaazul.blogspot.com.br/

    ResponderExcluir
  22. Me ajudou muitp e vou utilizar no novo lay. Lindo blog!!!

    ResponderExcluir
  23. se quiser mudar a cor da borda da barra como faço?
    Obrigada :)

    ResponderExcluir
  24. Oie,

    Me ajudou bastante, já que eu queria mudar o local do menu, estou usando no meu blog, irei colocar os créditos, obrigada.

    Mayla
    http://meulivromeutudo.blogspot.com.br/

    ResponderExcluir
  25. Eeeei, adorei o tutorial e já esotu usando lá no blog... Beeeeeijos
    www.coisasdafrida.com

    ResponderExcluir
  26. Obg adoreii o tuto já estou usando no meu teste :D
    Beijos♥♥♥

    ResponderExcluir
  27. Valeu Gessica , Aqui funcionou tudo direitinho :)

    ResponderExcluir
  28. Oi Gessica, tudo bem? ^^
    Gostei bastante da organização e das postagens do seu blog. Não estou no mundo dos "blogueiros" a tanto tempo ( estou no começo agora, na verdade ) e tenho bastante a aprender. Tutoriais como os seus, ajudam muito os iniciantes. Obrigada.

    http://poetisa-literaria.blogspot.com.br/

    ResponderExcluir
  29. Super útil o tutorial, amei!
    Muito obrigada,seu tutoriais me ajudam bastante.

    ResponderExcluir
  30. Ola adorei o tutorial, mas tem como ele ficar fixo no topo ( sem ele mexer com a barra de rolagem ) ?

    ResponderExcluir
  31. Ficou lindo meu blog! e perfeito! parabéns pelo turorial!! ;) Sucesso!!
    ótima noite!
    bjos ♥

    http://divaemaquiada.blogspot.com.br/

    ResponderExcluir
  32. Adorei o tutorial, mas quando uso o menu a fonte fica embaixo dele sabe?
    Bjs, por favor me ajuda!

    ResponderExcluir
  33. ei em meu blog não apareceu acima... ficou no lugar do gadget

    ResponderExcluir
  34. E se eu quiser colocar ele no lugar das guias, abaixo do cabeçalho????

    ResponderExcluir
  35. Gessica, amei esse tutorial. Gostaria muito de incluir alguns icones de rede social. bem no meu. tem como?

    ResponderExcluir
  36. Muito Obrigado, você me deu a solução que não achei em local algum.
    continue assim :D

    ResponderExcluir
  37. só gostaria de mais uma pergunta, o meu esta ficando por baixo dos posts do blog, como colocaria ele por cima ? ao rolar a barra

    ResponderExcluir
  38. Oi, amei o tutorial. Só uma dúvida. Tem como tirar a área de pesquisa desse menu?

    ResponderExcluir
  39. Teria como eu adicionar as redes sociais em um cabeçalho fixo no meu website?

    http://www.codigosparablog.com
    Tem algum Plugin? Alguém conheçe?

    ResponderExcluir
  40. Anônimo25/6/14

    qual é a fonte do print dos menus ?

    ResponderExcluir
  41. Anônimo27/6/14

    HEEEEEEEEEEEELP!!! DEU TUDO CERTO MAS AGORA COMO ESCREVO 'SOBRE' E LIGO AO LINK DESSE MENU??? OBRIGADA, BEIJOS.

    ResponderExcluir
  42. Amei seu tutorial, mas como não sei nada de configurar modelos de blog, eu queria saber como faço p colocar a cor nos lugares onde você escreveu e como mudar o nome de PAG para Home Sobre, etc.
    Obrigada!!!!

    ResponderExcluir
    Respostas
    1. onde está escrito "PAG",é só você mudar para o nome que quer da página.E para colocar o link onde você será redirecionada,substitua o "#" pelo link (obs.:e como tem um espaçinho antes e depois do "#" você apaga para dar certo). por exemlo,está assim: blábla "#" bláblá,e claro la no seu codigo no lugar desse blá vai estar algo do seu código.

      http://blog-way-maysa.blogspot.com.br/

      Excluir
  43. Na verdade, eu gostaria de saber como colocar links nesse menu. Tipo quero uma parte do blog só para música, ai essa parte só aparece quando se clica em música, não aparece na página inicial

    ResponderExcluir
  44. No meu não funcionou T.T
    http://miissperfection.blogspot.com.br/

    ResponderExcluir
  45. Ótimo tutorial!Eu gostei desse menu,e irei usar no meu blog.....bjos e obrigada!

    http://blog-way-maysa.blogspot.com.br/

    ResponderExcluir
  46. Não funciona no meu blog :(

    ResponderExcluir
  47. não funcionou no meu também

    ResponderExcluir
  48. olá adoreii funcionou perfeitamente, tô começando dá uma passadinha no meu http://cheia-d-charme.blogspot.com.br/

    ResponderExcluir
  49. Oi!
    Tentei colocar mas no meu ficou horizontal :( sabe me dizer o porque? Bjs
    Luh

    ResponderExcluir
  50. oi, gessica, tudo bom?
    consegui instalar o menu num blog de testes, porém estou com dificuldades para tirar a barra de buscas. gostaria apenas de usar como menu e incluir as redes sociais. poderia, por favor, ajudar a todas as perdidas aqui? hahaha :)
    beijos.
    http://ap202.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. para tirar a barra de buscas é só escluir a parte de /* caixa de pesquisa */ até em baixo quando for colocar no html...

      http://filhadoreilarisse.blogspot.com.br/

      Excluir
  51. Adorei o tutorial, estava a horas procurando um menu igual a esse e não sabia onde é que tinha, obrigada <3
    http://www.leticiakoliveira.com/

    ResponderExcluir
  52. Oi, vc poderia me responder, é que eu não sei o que aconteceu que quando eu passo o mouse fica com, tipo, o fundo preto e a fonte azul (eu quis ela azul, porém não quero o preto) como eu tiro ?? HELP ME PLSSS

    ResponderExcluir
  53. Ólá! Não deu certo no meu layout... fiquei triste!!

    http://dicasde-maquiagem.blogspot.com.br

    ResponderExcluir
  54. Gostei!! Deu certo!! Já tinha desistido com os outros tutoriais que vi na net!! Obrigada!
    O blog ainda está em construção, mas dá uma passadinha lá para vc ver como meu menu ficou:
    http://esposacacheada.blogspot.com.br/

    Bjoss

    ResponderExcluir
  55. oi! eu tentei mudar a letra, mas não aparece no blog. aparece quando eu to editando o modelo mas no blog mesmo não. oq eu faço?

    ResponderExcluir
  56. Oii, muito obrigada pela dica, realmente funcionu, mas como eu adiciono mais botões?
    Obrigada
    izumiy.blogspot.com

    ResponderExcluir
  57. Eu já tenho menu simplesmente quero que ela fique no topo

    ResponderExcluir
  58. No meu funcionou direitinho o caso é quando mudo a cor do background e da fonte eles não alteram, podes me ajudar?
    http://rafaelleventura.blogspot.com.br/

    ResponderExcluir
  59. no meu quando clico no pag nao vai

    ResponderExcluir
:) :( ;) :D :-/ :P :-O X( :7 B-) :-S :(( :)) :| :-B ~X( L-) (:| =D7 @-) :-w 7:P \m/ :-q :-bd

Deixe aqui sua opinião a respeito do post ou do blog ♥
Você pode comentar através do Facebook também! É rápido, simples e prático!