Menu Roll Right

Ohayoooooo, como vão? Venho avisar que abri mais 25 vagas para afiliados. Fui visitar alguns blogs afiliados meus e vi que muito deles tinham me tirado ou foram excluídos, então podem pedir. Mas agora vamos ao tutu do dia, trago um menu que acho super fofo e quero usar no meu próximo layout, ele se chama Roll Right créditos ao Worldesigns e KW. Caso queiram dar uma olhadinha no menu clique no botão mais a baixo. Gostaram? Então vamos ao tutorial.

Brevia do efeito

1. Vá ate seu HTML e procure por ]]></b:skin>, assim que o achar acima dele adicione isso:

Códigos

#menu{
background: url(http://static.tumblr.com/jyjxgdu/2Humbnktp/menu.png) right ;
width: 110px;
float: left;
height: 20px;
font: 20px Play;
color: #fff;
padding: 2px 0 6px 0;
text-align: center;border-radius: 7px;
margin: 5px;
text-transform: uppercase;
cursor: default;
-moz-transition: all 0.2s ease-out;
-webkit-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
#menu:hover {
opacity: .95;
background: url(http://static.tumblr.com/jyjxgdu/2Humbnktp/menu.png) left ;
 color: #5f5147;
}

2. Arrume as  partes em negrito pelo o endereço de sua imagem, lembrando que as imagens devem ser o mesmo link. Agora vá ate seu layout e abra um gadget HTML/Javascript e cole o código:

Códigos

<a href="link" id="menu">Link</a>

Espero que tenham gostado e ate mais tarde bunnys.