Menu Roll Right

Ohayooo! Boa noite a todos, venho trazer mais um menu para vocês ele se chama "Roll Right", eu não tenho palavras para descrever ele de tão lindo que é. Eu já vi ele em outro blog, mas tive muita vergonha de perguntar e finalmente eu achei. \o/ Então trago ele agora para vocês, mas antes créditos de Worldesigns e ao KW.  Vamos ao tutorial agora?

Brevia do efeito

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

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 a parte em negrito pelo o endereço da sua imagem, a mesma imagem tem que se repetir nos dois links. Salve é vá ate seu layout, então crie um gadget HTML/Javascript, dentro cole o código:

Códigos

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