Menu Cute

Não, não é aquele menu que muda o gif ao passar o mouse..mais é cute também 
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)                  











Ei xuxu quer aprender a fazer esse menu? Continue lendo 

Vá em Design    Editar HTML    Ctrl F e procure por: ]]></b:skin>

acima dessa tag cole o código:

Deixei nas cores de cada menu..como das imagens de exemplo p/ entenderem melhor :B

#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;}

Visualize, Se tiver tudinho ok, Salve!

Agora p/ que o menu apareça basta Adicionar um Gadget HTML/JavaScript e colar ou cole onde quiser que apareça:

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

Edite do jeito que quiser
tabela de cores aqui

vi esse código no dannykitty.com

37 comentários:

  1. Naum consiguir botar kakah !! me ajudaah ??

    ResponderExcluir
    Respostas
    1. Kaakah é 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?

      Excluir
    2. ixiii num sei amore..as vezes o titulo do gadget interfere..tenta fazer sem titulo..
      testei o código novamente em outros Templates e não tive problemas..=/

      Excluir
  2. No próximo lay eu coloco,kakah tá rolando um concurso lá no meu blog,ficaria mto feliz se vc participassa,bjs!!
    http://blog-garotaambulante.blogspot.com.br/2012/04/concurso-meu-blog-e-o-melhor.html

    ResponderExcluir
  3. 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!!

    ResponderExcluir
    Respostas
    1. Ah xuxu esse num foi eu que fiz..é daki óh
      http://www.candylland.net/2012/03/candy-barra-fixa.html

      Excluir
    2. Kaakah eu peguei viiu!! a barra fixa rs~

      Excluir
  4. Nossa o tutu é enorme mas vale a pena, o efeito é liindo s2 Bezões Luuh
    Rawr Girl ~> teenstyle.com

    ResponderExcluir
  5. tuto mto legal fofoa >.<
    parabéens s2
    http://mini-fofoquinhas.blogspot.com.br/

    ResponderExcluir
  6. Amei o tutu flor
    Vou usar e creditar x3

    ResponderExcluir
  7. Arigato Kaakah, tava procurando isso a um tempo *--*
    Vou testar, se funcionar eu volto para dizer >.<

    ResponderExcluir
  8. EU simplesmente ameei seu blog *-*
    Perfeito,amei o menu tbm

    Aceita Afiliaçãao !?

    Beijokas

    http://diamondsblack-diamonds.blogspot.com.br/

    ResponderExcluir
  9. aaawnt que cut' seu blog, perfeito!!O post ficou mara.
    http://sweetdreamssah.blogspot.com.br
    Segue?

    ResponderExcluir
  10. Blog bonito!! Notei que gosta de anime! Seguindo, segue de volta e participe as aventuras da minha revista pela internet:

    blogirls-revista.blogspot.com

    BYE!

    ResponderExcluir
  11. 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 :)

    Parabéns mais uma vez pelo sucesso e pelos 160 seguidores, o blog está muito lindo Kaakah :)
    Um bjo, Laah Kariinee =*

    ResponderExcluir
  12. flor 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!
    Tchau Beijos
    Bacchinha
    www.bacchinha-dacabeacaops.blogspot.com
    Vai la da uma passadinha ;-D ficarei muito contente!Beijuss de novo

    ResponderExcluir
    Respostas
    1. poxa que legal..mais não costumo participar de concursos..mais posso ajudar a divulgar sim :)

      Excluir
  13. oi!
    amo 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.

    ResponderExcluir
  14. ola adorei seu blog,parabens :D

    se quiser dar uma passada no meu eu adoraria

    menino-bloggeiro.blogspot.com

    ResponderExcluir
  15. Ola flor.Seu blog ta tão lindo.Cada post seu me deixa doidona...
    kkkkkkkkkkkkkkkkkkkkkkkkkkkkkk'
    Se poder da uma visitinha no meu bloguinho
    http://mundofantasticofeminino.blogspot.com.br/

    Bye

    ResponderExcluir
  16. Muito legal o tutorial,adorei
    uma boa semana
    um bom feriado

    xoxo

    BarbieLicious Pink

    ResponderExcluir
  17. 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.

    Beijos,
    www.tothegossipgirl.blogspot.com.br

    ResponderExcluir
    Respostas
    1. vou visitar teu blog ^-^
      xuxu no momento as vagas de afiliação e parceria estão fechadas :)

      Excluir
  18. [aaaaaaaaaaaaaaaaaaaaa] Comentário do Bad Reputation lá [aaa] meu Deus fiquei super feliz =) obrigado por visita e fico feliz de ter gostado do efeito

    #BezosBaby~~>http://cantinhodopsepf.blogspot.com.br/

    ResponderExcluir
  19. ahhh que lindo o menu *--*
    nossa seu blog tâ uma graça,ameii -^.^-
    bjs!!

    http://spaceyourfashion.blogspot.com.br/

    ResponderExcluir
  20. Ameei, já estou usando no meu blog já!
    Já 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/

    ResponderExcluir
  21. O menu funcionou mais não tá pegando as cores #.#

    ResponderExcluir
  22. aaaai 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???

    o url do blog é esse: http://mone-arts.blogspot.com
    Beijos ;***

    ResponderExcluir