Menu Lateral (exclusivo)

|| ||
Olá pessoal! Como estava sem ideia nenhuma do que postar me lembrei desse menu que a Lô criou e resolvi disponibilizar para vocês o menu lateral (exclusivo) aquele um do gadget welcome.
Para visualizá-lo clique aqui
Vamos lá!

Primeiro vá em Modelo>> Editar HTML>> Aperte Ctrl+F e procure por:
]]></b:skin>
Acima dele cole o seguinte código:
@font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }
.menulateral {
text-align: center;
border: solid 1px #f6ab7b;
text-shadow: 1px 1px 0px #f69d63;
 font-family: "silkscreen";
font-size: 8px;
background:#f9ccae;
width: 50px;
color:#FFFFFF;
PADDING: 2PX;
FLOAT: LEFT;
MARGIN: 2PX;
height: 16px;
-WEBKIT-TRANSITION-DURATION: .80S;
}
.menulateral:hover {
border: solid 1px #e9cab0;
text-shadow: 1px 1px 0px #e9cab0;
 font-family: "silkscreen";
font-size: 8px;
background:#f4e5d8;
transform: rotate(181deg) scale(1) skew(1deg) translate(0px);
-webkit-transform: rotate(181deg) scale(1) skew(1deg) translate(0px);
-moz-transform: rotate(181deg) scale(1) skew(1deg) translate(0px);
-o-transform: rotate(181deg) scale(1) skew(1deg) translate(0px);
-ms-transform: rotate(181deg) scale(1) skew(1deg) translate(0px);
}
Mude onde for necessário e salve!
Depois vá em Layout>> Adicionar um Gadget>> HTML/JavaScript e cole esse código:
<div style="position: absolute; margin-left: 225px; margin-top: -85px;">
<a href="LINK"><div class="menulateral">Nome</div></a>
<a href="LINK"><div class="menulateral">Nome</div></a>
<a href="LINK"><div class="menulateral">Nome</div></a>
</div>
Para colocar mais páginas é só colar esse trecho abaixo dos outros:
<a href="LINK"><div class="menulateral">Nome</div></a>
Faça as modificações necessária e depois salve!
Pronto!!!
Espero que tenham gostado!
Se usar dei os créditos para Sweet of Cherry