Menu Symmetry

Oii onigiris! *-*
Hoje vim trazer-vos um menu que eu ADOREI! É simples e fica muito fofi *-*
Bom os créditos é uma coisa engraçada... ora, encontrei o tuto no BC mas pelos vistos o tuto é do SP... E agora que a questão dos créditos está tratada, vamos ao tutorial!

O menu é este:

Coloquei exemplo em gif para que vissem o efeito hover.

Comece por ir a Design, Esquema e adicionar um HTML/Javascript e cole:

<a href="LINK 1" class="symmetry">NOME 1</a><br />
<a href="LINK 2" class="symmetry2">NOME 2</a><br />
<a href="LINK 3" class="symmetry">NOME 3</a><br />
<a href="LINK 4" class="symmetry2">NOME 4</a><br />
<a href="LINK 5" class="symmetry">NOME 5</a><br />

Agora dirijam-se ao HTML e dê um CTRL F e procure pôr:

]]></b:skin>

E acima disso cole o seguinte código:

.symmetry {
background-color:#ade977;
display: inline-block;
text-align: right;
color:#ee009d;
float: center;
margin:1px;
font-size: 9px;
font-family: tahoma;
text-transform:uppercase;
padding:1px;
height:10px;
width:200px;
box-shadow: 0 0px 0px #41d845;
z-index:100;
display:inline-block;
}
.symmetry:hover {
background-color:#76c53b;
-webkit-transition-duration: 0.8s;
}
.symmetry2 {
background-color:#ffc8e8;
display: inline-block;
text-align: center;
color:#ee009d;
float: center;
margin:1px;
font-size: 9px;
font-family: tahoma;
text-transform:uppercase;
padding:1px;
height:10px;
width:120px;
box-shadow: 0 0px 0px #ee009d;
z-index:100;
display:inline-block;
padding-left:50px;
}
.symmetry2:hover {
background-color:#ed51a9;
-webkit-transition-duration: 0.8s;
}

Básicamente só precisam de mudar o que está a verde...
Caso queiram modificar a cor da letra tem de ser em Design, Personalizar, e o tipo de letra da barra lateral/Sidebar...
E prontinho! Pré-visualize e veja se aparece tudo direitinho ;)