Tutorial: Menu acima do cabeçalho
6.9.13
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 */
font-family: Georgia, Tahoma; /* 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 */
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:
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!
76 Recados
Amei o tutorial eles sempre me ajudam por isso e outros motivos eu AMO o seu blog <3
ResponderExcluirAh 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
Obrigada linda! Fico feliz por saber que eles te ajudam.
ExcluirColoquei sim porque teu blog é shooow!
Sucesso pra vc tambem.
Menina, estes tutoriais ajudam muito eu sou perdida no meu blog .. beijos
ResponderExcluirhahahaha que bom que te ajuda rs
ExcluirGé, você salvou a minha vida e de tantas outras meninas! Obrigada pelo tutorial, irei experimentá-lo <3 Muito obrigada!
ResponderExcluirBeijão,
www.garotasemcliches.com
Sim sim Camy!
ExcluirFicou lindo!
Ai meu Deus, era esse tutorial que eu precisava! Obrigaaaaaada Ge. Faz mais tutoriais (:
ResponderExcluirblog-meninasdepreto.blogspot.com.br
De nada Deby! Faço sim é só vocês pedirem.
ExcluirNo meu próximo layout vou tentar colocar no blog :D' faz mais tutoriais assim!
ResponderExcluirColoca sim! Qualquer duvida só falar tá Sa?
ExcluirFaço sim é só vocês pedirem.
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
ResponderExcluirAh, 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
De na Ketly!
Excluirok =)
Que bacana, nem todo mundo entende de html tipo EU, em breve vou tentar fazer isso no meu blog *.*
ResponderExcluirObrigada pela dica
Beijo
www.sonhosdebrigadeiro.blogspot.com
Faz sim! Qualquer duvida só falar.
ExcluirAdorei a dica
ResponderExcluirbeijos
http://ronyalbuquerque.blogspot.com.br/
<3
ExcluirSe 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!
ResponderExcluirPedras na Janela
sei como é may rs
ExcluirFica fofo mesmo
Esse tutorial é muito bom. Obrigada, Gessy.
ResponderExcluirQuero um nesse estilo para quando for mudar o design.
Bjin.
Que bom que gostou Sam, não precisa agradecer.
ExcluirSe não quiser que fique fixado é só tirar o" fixed" e pronto.
Gessy, tenho uma dúvida. E se eu não quiser que o menu fique fixado no topo, troco o "fixed" por qual termo?
ResponderExcluirEu não estou conseguindo ver qual é a tag '-'
ResponderExcluirMas muuuuuito obrigada pelo tutorial. Seu blog e seus tutoriais foram quem me deu gás pra voltar pra blogosfera! Obrigada!!
Já concertei =)
ExcluirNã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
Esta MUITO procurando um tutorial desses, muito obrigada ♥
ResponderExcluirhttp://bonjourana.blogspot.com/
Oi!
ResponderExcluirÓ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?
Sério! Que bom Livia!
ExcluirDeve alguma configuração de link que apareceu. Não sei como faz pra tirar:/
Amei o tutorial, já adicionei ao layout que estou criando.
ResponderExcluirParabéns, está muito bem explicado!
Beijos!
Prioridades Femininas
Feliz que tenha gostado e usado!
ExcluirObrigada
Hey there! I could have sworn I've been to this website
ResponderExcluirbefore 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
Linda fiz direitinho mais nao funcionou , eu queria o fundo escuro mudei e nada,só ficava transparente ....bjs
ResponderExcluirwww.belezaemminutos.com
:9
ExcluirPoxa
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!
Posso trocar a barra de pesquisa por botões de redes sociais?! Como?!
ResponderExcluirYou expressed that terrifically.
ResponderExcluirAlso visit my site ... 人気 ブランド 財布
NÃO FUNCIONOU AQUI :(
ResponderExcluirEu até fui colocar no meu, mas não funcionou :/
ResponderExcluirUsei no meu novo layout ficou muito lindo.
ResponderExcluirBeeijos.
http://cerejaaazul.blogspot.com.br/
Me ajudou muitp e vou utilizar no novo lay. Lindo blog!!!
ResponderExcluirse quiser mudar a cor da borda da barra como faço?
ResponderExcluirObrigada :)
Oie,
ResponderExcluirMe 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/
Eeeei, adorei o tutorial e já esotu usando lá no blog... Beeeeeijos
ResponderExcluirwww.coisasdafrida.com
Obg adoreii o tuto já estou usando no meu teste :D
ResponderExcluirBeijos♥♥♥
Valeu Gessica , Aqui funcionou tudo direitinho :)
ResponderExcluirOi Gessica, tudo bem? ^^
ResponderExcluirGostei 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/
Super útil o tutorial, amei!
ResponderExcluirMuito obrigada,seu tutoriais me ajudam bastante.
Ola adorei o tutorial, mas tem como ele ficar fixo no topo ( sem ele mexer com a barra de rolagem ) ?
ResponderExcluirFicou lindo meu blog! e perfeito! parabéns pelo turorial!! ;) Sucesso!!
ResponderExcluirótima noite!
bjos ♥
http://divaemaquiada.blogspot.com.br/
Adorei o tutorial, mas quando uso o menu a fonte fica embaixo dele sabe?
ResponderExcluirBjs, por favor me ajuda!
ei em meu blog não apareceu acima... ficou no lugar do gadget
ResponderExcluirE se eu quiser colocar ele no lugar das guias, abaixo do cabeçalho????
ResponderExcluirGessica, amei esse tutorial. Gostaria muito de incluir alguns icones de rede social. bem no meu. tem como?
ResponderExcluirMuito Obrigado, você me deu a solução que não achei em local algum.
ResponderExcluircontinue assim :D
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
ResponderExcluirOi, amei o tutorial. Só uma dúvida. Tem como tirar a área de pesquisa desse menu?
ResponderExcluirTeria como eu adicionar as redes sociais em um cabeçalho fixo no meu website?
ResponderExcluirhttp://www.codigosparablog.com
Tem algum Plugin? Alguém conheçe?
qual é a fonte do print dos menus ?
ResponderExcluirHEEEEEEEEEEEELP!!! DEU TUDO CERTO MAS AGORA COMO ESCREVO 'SOBRE' E LIGO AO LINK DESSE MENU??? OBRIGADA, BEIJOS.
ResponderExcluirAmei 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.
ResponderExcluirObrigada!!!!
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.
Excluirhttp://blog-way-maysa.blogspot.com.br/
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
ResponderExcluirNo meu não funcionou T.T
ResponderExcluirhttp://miissperfection.blogspot.com.br/
Ótimo tutorial!Eu gostei desse menu,e irei usar no meu blog.....bjos e obrigada!
ResponderExcluirhttp://blog-way-maysa.blogspot.com.br/
Não funciona no meu blog :(
ResponderExcluirnão funcionou no meu também
ResponderExcluirolá adoreii funcionou perfeitamente, tô começando dá uma passadinha no meu http://cheia-d-charme.blogspot.com.br/
ResponderExcluirOi!
ResponderExcluirTentei colocar mas no meu ficou horizontal :( sabe me dizer o porque? Bjs
Luh
oi, gessica, tudo bom?
ResponderExcluirconsegui 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/
para tirar a barra de buscas é só escluir a parte de /* caixa de pesquisa */ até em baixo quando for colocar no html...
Excluirhttp://filhadoreilarisse.blogspot.com.br/
Adorei o tutorial, estava a horas procurando um menu igual a esse e não sabia onde é que tinha, obrigada <3
ResponderExcluirhttp://www.leticiakoliveira.com/
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Ólá! Não deu certo no meu layout... fiquei triste!!
ResponderExcluirhttp://dicasde-maquiagem.blogspot.com.br
Gostei!! Deu certo!! Já tinha desistido com os outros tutoriais que vi na net!! Obrigada!
ResponderExcluirO blog ainda está em construção, mas dá uma passadinha lá para vc ver como meu menu ficou:
http://esposacacheada.blogspot.com.br/
Bjoss
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?
ResponderExcluirOii, muito obrigada pela dica, realmente funcionu, mas como eu adiciono mais botões?
ResponderExcluirObrigada
izumiy.blogspot.com
Eu já tenho menu simplesmente quero que ela fique no topo
ResponderExcluirNo meu funcionou direitinho o caso é quando mudo a cor do background e da fonte eles não alteram, podes me ajudar?
ResponderExcluirhttp://rafaelleventura.blogspot.com.br/
no meu quando clico no pag nao vai
ResponderExcluirDeixe 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!