20.12.12

Tutorial - Menu Hover Deslizante

Awn' agora deu vontade *--*
Oi Amooras carameladas 
~Boa tarde! Mini Gifs
Tudo beem?? Espero que siim!! ^^
Hoje trouxe para vocês um tuto de um menu super legal que eu uso aqui no SM para os Status do blog:

E quando você passa o mouse:
Vamos aprender a fazer??
Vá em Editar HTML >> Aperte Ctrl F ou F3 e procure por ]]></b:skin>
Achou?? Então acima da tag (
]]></b:skin>) cole o seguinte código:
.heart {
display : block;
 font-size: 10px;
font-family: Tahoma;
letter-spacing : 0;
border-bottom : 1px solid #eee;
background-repeat : no-repeat;   
text-indent : 5px;
vertical-align : middle;
text-decoration : none;
 line-height : 15px;
margin-bottom : 1px;
padding-left : 3px;
 -webkit-transition: all 0.9s ease-out; -moz-transition: all 0.9s ease-out;
border-left: solid #CORDABORDA;
background: #CORDOFUNDO;
 color: #666 !important;
}
.heart:hover {
display : block;
text-decoration: none;
 vertical-align: middle;
line-height: 15px;
background: #CORDOFUNDOHOVER;
 border-left: solid #CORDABORDAHOVER;
 padding-left: 15px;}
Troque as partes em roxo pelo que elas representam
Agora adicione um gadget
HTML/JavaScript e cole:

<div class="heart"> Seu texto </div>
No espaço ''Seu texto" escreva o que preferir, no meu caso coloquei os status do blog.
Prontinho!! Simples, não é?!

 Créditos: A-helphtml 

E aí...Gostaram do tuto??
Fizeram em seus blogs??
Comentem!!

Kissus~ 

9 comentários:

  1. Adorei o tutorial!

    Kissus <3
    gotas-de-fofura.blogspot.com

    ResponderExcluir
  2. Ainda bem que gostou!! Fico super feliz!
    Beijiinhos sz'

    ResponderExcluir
  3. Eu uso esse menuzinho, ele é mega fofo, nee?? Beeijinhos!
    pqngarota.tk

    ResponderExcluir
  4. É fofo mesmo Viih! Eu adoro esse menu =)
    Beijinhos

    ResponderExcluir
  5. Ah eu amo esse menu, é muito fofo!!! Depois vou fazer uma layout com ele, garanto que vai ficar lindo! Hahaha, amei o post! Um beijo :D
    isaloy.blogspot.com.br // faz uma visita?

    ResponderExcluir
  6. Esse menu é uma graça mesmo Isa, eu também adoro ele e uso aqui no SM. Também acho que se você fizer um lay com ele vai ficar lindo!!!Fico feliz que tenha gostado do post!! Já visitei seu blog...
    Beiijinhos ^3^

    ResponderExcluir
  7. Este comentário foi removido pelo autor.

    ResponderExcluir
  8. Amei esse Tutorial Obrigada ja estou seguindo seu blog cute Sayonara Kisu Me Blog Link:http://otakuotomemoe.blogspot.com.br/!:D

    ResponderExcluir
  9. Amei! Já estou usando no meu lay free!
    Obrigada, muito útil!
    Beijinhos,
    http://kawaii--unicorns.blogspot.com.br/

    ResponderExcluir