Menu com Efeito Hover Rolante

Bom Dia! Vim ensinar como eu fiz o menu que estou usando no novo "Sweet Fireworks", o agora "Comprei Glitter":

Pois então, vamos aprender?

1. No Blogger, vá em Design> Editar HTML. Tecle Ctrl F e procure por:

]]></b:skin>

2. Acima dessa tag, cole:

.sidenav a:link, .sidenav a:active, .sidenav a:visited {
width:200px; /* Tamanho dos links */
color:#bea48f; /* Cor dos links */ 
display: inline-block; /* Modo de exibição */
text-decoration:none; /* Efeitos do texto. Normalmente está desativado. */
font-family:segoe ui light; /* Fonte */
font-size:12px; /* Tamanho da fonte */
padding:2px; /* Margem interna */
padding-left:10px; /* Margem interna */
border-left:10px solid #bea48f; /* Estilo da borda lateral dos links */
margin-top:2px; /* Margem interna */
-webkit-transition-property:color, text; /* Efeito fade */
-webkit-transition-duration: .4s; /* Efeito fade */
-moz-transition-duration: .4s; /* Efeito fade */
-webkit-transition-timing-function: linear, ease-in; /* Efeito fade */
}

.sidenav a:hover {
background-image:url(http://media.tumblr.com/tumblr_lkl75bsU9n1qfamg6.png); /* Mini gif do hover */
background-repeat:no-repeat; /* Repetição do mini gif. Normalmente está desativado. */
background-position:right; /* Posição do mini gif */
border-left:30px solid #bea48f; /* Estilo da borda lateral em hover */
width:180px; /* Tamanho dos links */
color:#e9b3ff; /* Cor dos links em hover */
padding-left:20px; /* Margem interna */
-webkit-transition-duration: .4s; /* Efeito fade */
-moz-transition-duration: .4s; /* Efeito fade */
}

3. Salve e vá para Elementos da Página. Crie um novo gadget de HTML/Javascript e nele cole o código abaixo:

<div class="sidenav">
<a href="URL 1">LINK 1</a>
<a href="URL 2">LINK 2</a>
<a href="URL 3">LINK 3</a>
<a href="URL 4">LINK 4</a>
<a href="URL 5">LINK 5</a>
</div>

4. Salve.

O Tutorial foi Totalmente copiado de Sweet Poison.

Abraços, Cáah.