[Tutorial] Menu Wishlist

Oi meus lindos!

Faz um tempinho que ''eu'' não trago Tutos para vocês!

Então, sabem o gadget aqui do blog onde fica o Status do blog?!

Isso mesmo, vou ensinar como colocar ele no blog de vocês! ^.^

Aprendi lá no Kawaii World! Este menu é bastante usado exatamente para isso,para colocar os Status do blog, ou algo parecido, espero que gostem do efeito.

1. Procure por ]]></b:skin> e antes da tag, cole:

.midnight{
background: #dfdbdb;
font-family: trebuchet ms;
font-size: 11px;
margin: 2px;
color: #000;
display: block;
-moz-box-shadow: inset 4px 0 0px 0 #a09aa3;
-webkit-box-shadow: inset 3px 0 0px 0 #fe79ab;
box-shadow: inset 3px 0 0px 0 #ee79b6;
padding: 3px 3px 3px 6px;
-moz-transition: all 0.4s ease-out;
-webkit-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
-ms-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;}
.midnight:hover
{-moz-box-shadow: inset 550px 0 0px 0 #d5e0c6;
-webkit-box-shadow: inset 550px 0 0px 0 #f192ba;
box-shadow: inset 550px 0 0px 0 #d5e0c6;
color: #818181;}

Entenda o Código:

background: #dfdbdb; - Cor do seu fundo inicial.
font-family: trebuchet ms; - Fonte.
font-size: 11px; - Tamanho da fonte.
margin: 2px; - Espaço entre cada linha do menu. 
color: #000; - Cor da fonte.
box-shadow: inset 3px 0 0px 0 #ee79b6; - Cor da linha quando menor.

2. Para usar, vá em um gadget de HTML/JavaScript e cole:

<div class="midnight"> Seu texto </div>

É isso, espero que tenha ajudado!
Bejus..

Créditos ao blog: Iris Jovem