8 de mar. de 2013

Menu Hover Deslizante

~Hey Confetes! 
Como uma leitora liamda me pediu o menu que eu uso no gadget "Apresentação" e como eu não recuso um pedido, achei que seria bom postar o tutorial para todos os leitores. Eu não vou enrolar muito porque já postei hoje umas 2 vezes e não quero encher a paciência de vocês. Vamos ver? 
1º- Vá em HTML>>Ctrl+F e pesquise por ]]></b:skin>. Agora, acima dessa tag, cole esse 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;}
2.Agora que fez isso, salve e abra um gadget HTML/JavaScript e cole esse código:
<div class="heart"> Seu texto </div> 
Prontinho, troque o que se está em itálico e seu menu está pronto!
Créditos: Kawaii World

6 comentários:

  1. AW valeu amor, era mesmo o que eu estava precisando!!!

    ResponderExcluir
  2. Adorei o tuto :) Mas como já te disse, vou ver quando ponho umm menu no blog
    Beijos e me visita?
    ilovecantores.blogspot.com

    ResponderExcluir
  3. Muito bom o menu!
    Talvéz eu até use :P

    minhas-confissoes-2012.blogspot.com

    ResponderExcluir