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

Amei o tutorial *O* estava a procura dela faz um bom tempo :3
ResponderExcluirbjs
anjodecereja.blogspot.com
O meu já veio no Layout, eu só mudei as cores pra deixar mais *azul* minha cara
ResponderExcluirCOMO MUDA DE COR?
ExcluirVou usar ele pro meu próximo layout, acho esse menu bem bonitinho e super prático :) Adorei o tutorial!
ResponderExcluirBeijos,
poderosascomsalto.blogspot.com
Ah se meu layout ainda fosse travel eu até faria, porque adoro esse menu rs Mas não vou arriscar ;(
ResponderExcluirComo faço pra deixá-lo centralizado, chuchu?
ResponderExcluirNo meu layout, ele fica sempre "mais pra um lado", sabe?
Beijo!
www.heychriz.com.br
Ele centraliza automaticamente, a não ser que você tenha apagado a terceira linha do primeiro código.
ExcluirO Meu ficou todo estranho :(
ResponderExcluirOIE 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
ExcluirAmei, me ajudou muito.
ResponderExcluirBeijos
http://blogmeninaousada.blogspot.com.br/
Este comentário foi removido pelo autor.
ResponderExcluirNossa, amei esse tutorial Foi o único que eu consegui deixar centralizado. Obrigada viu
ResponderExcluirEu 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'
ResponderExcluirVocê 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á.
ExcluirAdorei o tutorial <3
ResponderExcluirMuuuito obrigada :D
ResponderExcluirAmei o tutorial e foi mto útil :3
linda, to usando seu menu, e a propósito, é lindo, obrigada!
ResponderExcluiragora 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?
Olá! Você tem que aumentar o tamanho da borda (border-left), até ficar onde você quer. Beijos!
ExcluirFazia 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!
ResponderExcluirBeijos
Muito legal!!
ResponderExcluirPassei 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.
♥ ❤♥ ❤♥ ❤♥ ❤♥ ❤♥ ❤♥ ❤♥ ❤ No meu theme não tem ]]>: colei a primeira parte após style> e funcionou
ResponderExcluirOiiiie, parabéns pelo site e tutorial. Coloquei jno meu blog e ficou ótimo! www.gosteigostasse.com.br
ResponderExcluirAmei!
ResponderExcluirGOSTEI DE MAIS DEIXO MEU LAYOUT PERFEITO!
ResponderExcluirAs minhas letras ficaram todas juntinhas! O que faço? :(
ResponderExcluirDeve ser por que você tem muitas páginas, tente tirar algumas. Beijos!
ExcluirObrigada 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?
ExcluirVocê não mexeu em algo além do que estava indicado no código? Não era para ter essa linha.
ExcluirMuuuuuuuuuitooo obrigada! Tentei colocar o menu fixo no meu blog olhando outros tutoriais e não dava certo! Só agora consegui! Muiito obrigada mesmo! ♥
ResponderExcluirGrata, estou tentando deixar meu blog prático para os meus alunos e a sua postagem ajudou bastante.
ResponderExcluirVou testar no blog
ResponderExcluirwww.mulhercristaeseular.blogspot.com