Tutorial - Menu hover deslizante

Boa tarde gente! Hoje trouxe pra vocês um tutorial muito simples e lindo, que não chama muito atenção e deixa seu blog muito fofo. É o menu hover deslizante, veja o preview, que é do blog Pingo de Adolescência, a minha amiga Lílian é dona dele ^^

Esse é um menu hover, você pode colocar o status, ou o menu mesmo, vamos fazer?

             Vá em Editar HTML  Aperte F3 e procure por ]]></b:skin>  Acima desse código cole:

.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 o que está em negrito pelo o que eles correspondem.

                                       Em um gadget HTML/ JavaScript cole o seguinte:

                                                              <div class="heart"> seu texto </div>

 Digite o seu texto onde está em negrito, e se quiser mais caixinhas, é só repetir esse código. É só salvar!

Pronto, é fácil e simples! Bjok 

Créditos: Kawaii World