2 de mai. de 2012

Tutorial: Cute Menu

|| || ||

Hooy Girls

.Hoje estou trazendo para vocês um cute menu que eu aprendi , ele e muito simples para desenvolver , assim como qualquer um!
.Então vamos Lá??


credits:cantinhodemeninaoficial
Vamos lá! 
 
  • Vá em Designer > Editar HTML  
  • aperte crlt + f e procure por :  ]]></b:skin>
  • Quando você achar  cole em cima dele, o codigo:

/* Cute Menu
----------------------------------------------- */
#menuextra {
display : block;
font-size: 11px;
font-family: Tahoma;
letter-spacing : 0;
border-bottom : 1px dashed #CDB7B5;
background-repeat : no-repeat;
text-indent : 5px;
vertical-align : middle;
text-decoration : none;
line-height : 15px;
margin-bottom : 1px;
background : url('URL DO MINE GIF 1') no-repeat left;
padding-left : 10px;
}

#menuextra:hover {
display : block;
text-decoration : none;
vertical-align : middle;
line-height : 15px;
border-bottom : 1px dashed #FF69B4;
background : url('URL DO MINE GIF 2') no-repeat left;
padding-left : 10px;
Onde tá escrito , URL DO MINE GIF 1 e o mini gif Que vai aparecer quando o mouse não
estiver acima do texto.
Onde ta escrito URL DO MINE GIF 2 e aonde muda o gif, que vai aparecer outro gif se você
colocar o mouse em cima! :] 
Agora sempre que for usa o cute menu use o código abaixo:


<div id="menuextra"><a href="Link ">Nome do link</a>
</div>
<div id="menuextra"><a href="Link">Nome do link</a></div>

Vamos entender??

•Onde tem o código : #CDB7B5
é a cor da barrinha pontilhada que sublinha o link quando o mouse não está no link.


•Onde tem o código :  #FF69B4
é a cor da barrinha que sublinha o link quando o mouse passa por cima.


Beijos,Fiquem com Deus

5 comentários:

  1. legal, gostei! passando por aqui flor, bjs bjs.

    ResponderExcluir
  2. Hooy vim avisar que vc ganhou o concurso do Space,e preciso que vc entre em contato comigo,pelo blog mesmo,pra vc ver seu prazo do recebimento do prêmio!

    Beijos <3 Space Girl Br (c)

    ResponderExcluir
  3. Bem fácil, amei o tutorial :)

    Beeijos,
    www.blogmundodamoda.com

    ResponderExcluir
  4. Adorei o tutorial, curti mesmo!
    Seu cantinho é mto fofo e seguindo!
    Gostaria que conhecesse o meu se puder, tá rolando um sorteio super legal!
    ♥♫Beijokas da Nina♥♫
    http://ninateinforma.blogspot.com
    http://desenhoeterapia.blogspot.com.br/
    @ninateinforma

    ResponderExcluir

- Sem ofensas, não seja mal educada.
- De sempre sua opinião.
- Por favor, não diga: "Seguindo, segue de volta?", comente e deixe o url do seu blog, se eu gostar, sigo;
- NÃO DEIXE O LINK DO SEU BLOG, ESTÁ SENDO CONSIDERADO COMO SPAM PELO GOOGLE, DEIXE SEMPRE ALGO DO TIPO : - Meu Blog - ou meublog.blogspot.
- Vagas para parceiros abertas;