
olhe as imagens de exemplo, ele pode ser editado de acordo com o gosto de cada um..pode-se mudar a fonte do menu, tamanho e cores...
![]() |
Menu Normal (cores) |
![]() |
Ao passar o mouse (muda cor do menu) |


acima dessa tag cole o código:

#nav{
color:#A8DEE7; */Cor da fonte*/
display: block;
padding-bottom: 1px;
font-weight:bold;
text-decoration:none;
line-height:15px;
vertical-align:middle;
width: 100%;
font-size:9px;
font-family: Tahoma;
margin-bottom: 2px;
background-color:#E3FBFF; */Cor do Menu*/
border-top:1px solid #E3FBFF; */Cor do Menu iguais*/
border-left:1px solid #E3FBFF;
border-right:1px solid #E3FBFF;
border-bottom:1px solid #E3FBFF;
padding:0px;}
#nav:hover{
color:#a1f78f; */Cor da fonte ao passar o mouse*/
display: block;
padding-bottom: 1px;
font-weight:bold;
text-decoration:none;
line-height:15px;
vertical-align:middle;
width: 100%;
font-size:9px;
font-family: Tahoma;
margin-bottom: 2px;
background-color:#ceffc7; */Cor do menu ao passar o mouse*/
border-top:1px solid #ceffc7;
border-left:1px solid #ceffc7;
border-right:1px solid #ceffc7;
border-bottom:1px solid #ceffc7;
padding:0px;}
#nav2{
color:#FFADD6; */Cor da fonte*/
display: block;
padding-bottom: 1px;
font-weight:bold;
text-decoration:none;
line-height:15px;
vertical-align:middle;
width: 100%;
margin-bottom: 2px;
font-size:9px;
font-family: Tahoma;
background-color:#FFEFF7; */Cor do Menu*/
border-top:1px solid #FFEFF7;
border-left:1px solid #FFEFF7;
border-right:1px solid #FFEFF7;
border-bottom:1px solid #FFEFF7;
padding:0px;}
#nav2:hover{
color:#a1f78f; */Cor da fonte ao passar o mouse*/
display: block;
padding-bottom: 1px;
font-weight:bold;
text-decoration:none;
line-height:15px;
vertical-align:middle;
width: 100%;
font-size:9px;
font-family: Tahoma;
margin-bottom: 2px;
background-color:#ceffc7; */Cor do menu ao passar o mouse*/
border-top:1px solid #ceffc7;
border-left:1px solid #ceffc7;
border-right:1px solid #ceffc7;
border-bottom:1px solid #ceffc7;
padding:0px;}
#nav3{
color:#b5abe7; */Cor da fonte*/
display: block;
padding-bottom: 1px;
font-weight:bold;
text-decoration:none;
line-height:15px;
vertical-align:middle;
width: 100%;
font-size:9px;
font-family: Tahoma;
margin-bottom: 2px;
background-color:#f1e3ff; */Cor do Menu*/
border-top:1px solid #f1e3ff;
border-left:1px solid #f1e3ff;
border-right:1px solid #f1e3ff;
border-bottom:1px solid #f1e3ff;
padding:0px;}
#nav3:hover{
color:#a1f78f; */Cor da fonte ao passar o mouse*/
display: block;
padding-bottom: 1px;
font-weight:bold;
text-decoration:none;
line-height:15px;
vertical-align:middle;
width: 100%;
margin-bottom: 2px;
font-size:9px;
font-family: Tahoma;
background-color:#ceffc7; */Cor do menu ao passar o mouse*/
border-top:1px solid #ceffc7;
border-left:1px solid #ceffc7;
border-right:1px solid #ceffc7;
border-bottom:1px solid #ceffc7;
padding:0px;}


<div id="nav"><a title="descrição do link" href="URL DA PAGINA">Pagina a</a> – bla bla bla</div>
<div id="nav2"><a title="descrição do link" href="URL DA PAGINA">Pagina b</a> – bla bla bla</div><div id="nav3"><a title="descrição do link" href="URL DA PAGINA">Pagina c</a> – bla bla bla</div>
Naum consiguir botar kakah !! me ajudaah ??
ResponderExcluirdiga qual o problema xuxu..que te ajudo
ExcluirKaakah é que eu boto o codigo no html do meu blog só que qnd eu boto o gadjet n fica o menu igual ao de cima . oque aconteceu?
Excluirixiii num sei amore..as vezes o titulo do gadget interfere..tenta fazer sem titulo..
Excluirtestei o código novamente em outros Templates e não tive problemas..=/
No próximo lay eu coloco,kakah tá rolando um concurso lá no meu blog,ficaria mto feliz se vc participassa,bjs!!
ResponderExcluirhttp://blog-garotaambulante.blogspot.com.br/2012/04/concurso-meu-blog-e-o-melhor.html
Ah sim,eu queria fazer um pedido de Tuto,vc poderia ensonar como colocar essa coisinha q vc tem no final do blog,como número de comments,redes sociais,e etc,bjs!!
ResponderExcluirAh xuxu esse num foi eu que fiz..é daki óh
Excluirhttp://www.candylland.net/2012/03/candy-barra-fixa.html
Obrigada flor!
ExcluirKaakah eu peguei viiu!! a barra fixa rs~
ExcluirNossa o tutu é enorme mas vale a pena, o efeito é liindo s2 Bezões Luuh
ResponderExcluirRawr Girl ~> teenstyle.com
tuto mto legal fofoa >.<
ResponderExcluirparabéens s2
http://mini-fofoquinhas.blogspot.com.br/
Amei o tutu flor
ResponderExcluirVou usar e creditar x3
Arigato Kaakah, tava procurando isso a um tempo *--*
ResponderExcluirVou testar, se funcionar eu volto para dizer >.<
EU simplesmente ameei seu blog *-*
ResponderExcluirPerfeito,amei o menu tbm
Aceita Afiliaçãao !?
Beijokas
http://diamondsblack-diamonds.blogspot.com.br/
que bom (:
Excluiraiin more num tem mais vagas p/ afiliação
aaawnt que cut' seu blog, perfeito!!O post ficou mara.
ResponderExcluirhttp://sweetdreamssah.blogspot.com.br
Segue?
Blog bonito!! Notei que gosta de anime! Seguindo, segue de volta e participe as aventuras da minha revista pela internet:
ResponderExcluirblogirls-revista.blogspot.com
BYE!
éeem gosto muito ^-^
Excluirvou visitar teu blog
Florzinha, o blog está ainda melhor a cada dia! Estás alcançando sucesso e eu fico feliz por você ! Sei que é chato pedir, mas queria que você ajudasse meu blog a alcançar 50 seguidores... Podes divulgar o My Sweet Photoscape aqui? Nossa, desde já, nem sei como te agradecer :)
ResponderExcluirParabéns mais uma vez pelo sucesso e pelos 160 seguidores, o blog está muito lindo Kaakah :)
Um bjo, Laah Kariinee =*
ajudo siiim xuxuu ^-^
Excluirflor tah com um concurso no meu blog de BFFs e eu adoraria que vc participasse! e alem disso se ajuda-se a divulgar o concurso eu ficaria muito feliz não quero um concurso sem graça , por que eu quero muito que ele de certo então estou contando com vc!
ResponderExcluirTchau Beijos
Bacchinha
www.bacchinha-dacabeacaops.blogspot.com
Vai la da uma passadinha ;-D ficarei muito contente!Beijuss de novo
poxa que legal..mais não costumo participar de concursos..mais posso ajudar a divulgar sim :)
Excluiroi!
ResponderExcluiramo seu blog de paixão e sempre quando posso venho dar uma passadinha aqui.
vim hj mesmo te convidar a participar do sorteio que está rolando no meu blog, que vale uma camiseta meme!!!
aqui está o link:
oblogdapp.blogspot.com
pfv, é mt importante q vc participe!
espero vc anciosamente lá.
beijinhos, e continue com seu blog tão divertido e bonito.
aiin brigadu pelo convite..vou conferir o sorteio
Excluirola adorei seu blog,parabens :D
ResponderExcluirse quiser dar uma passada no meu eu adoraria
menino-bloggeiro.blogspot.com
claroo
ExcluirOla flor.Seu blog ta tão lindo.Cada post seu me deixa doidona...
ResponderExcluirkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk'
Se poder da uma visitinha no meu bloguinho
http://mundofantasticofeminino.blogspot.com.br/
Bye
que bom que tu gosta rsrs..visito sim
ExcluirMuito legal o tutorial,adorei
ResponderExcluiruma boa semana
um bom feriado
xoxo
BarbieLicious Pink
Que lindo o menu! Vou usar em algum template free para o meu blog. Adorei aqui, é lindo, eu achei muito legal e as postagens também! Estou seguindo com certeza, poderia seguir o meu também? Estou tentando atingir minha meta de 500 seguidores, e sua ajuda seria ótima! Gostaria de fazer afiliação e/ou parceria com seu blog.
ResponderExcluirBeijos,
www.tothegossipgirl.blogspot.com.br
vou visitar teu blog ^-^
Excluirxuxu no momento as vagas de afiliação e parceria estão fechadas :)
[aaaaaaaaaaaaaaaaaaaaa] Comentário do Bad Reputation lá [aaa] meu Deus fiquei super feliz =) obrigado por visita e fico feliz de ter gostado do efeito
ResponderExcluir#BezosBaby~~>http://cantinhodopsepf.blogspot.com.br/
rsrsrs \o/
Excluirahhh que lindo o menu *--*
ResponderExcluirnossa seu blog tâ uma graça,ameii -^.^-
bjs!!
http://spaceyourfashion.blogspot.com.br/
Ameei, já estou usando no meu blog já!
ResponderExcluirJá estou seguindo seu blog, ameei mesmo!
Queria fazer um pedido de tutorial, sabe aquelas imagens que ficam no gadget status do blog?
Queria aprender como se coloca, nunca consigo!
Beeijos
http://unhaseesmaltesdicas.blogspot.com.br/
O menu funcionou mais não tá pegando as cores #.#
ResponderExcluiraaaai adoreei o blog! amr, eu to fazendo uma encomenda de blog, e ela me pediu um menu parecido com esse.. vo colocar esse, ok? mas tipo, a minha "NAV", que é o 1º, não ficou com o mesmo estilo... já tentei de td pra arrumer.. mexi no HTML grande, no HTML pra aparecer o menu e nada.. vc sabe oqe aconteceu???
ResponderExcluiro url do blog é esse: http://mone-arts.blogspot.com
Beijos ;***