Menu Sidebar Hover [002]

Oi pessoal!!! Trago mas tutorial de menu para sidebar. Esse e quadradinho e bem simples mas dependendo da arrumação do blog e as cores ele fica lindo! Esse menu eu usei no meu layout free o Cute Nute.

*Modelo*

Bom então vamos lá?

1. Vá em seu HTML e procure pela tag ]]></b:skin>, e acima dele cole esse código:

Códigos

/* Menu Cute Panda */
cute{
text-align:center;
font-size: 12px; /* Tamanho da fonte*/
background: #FFB8DA; /* Fundo */
padding: 2px;
float: left;
margin: 2px;
width: 40%; /* Tamanho do menu
-webkit-transition-duration: .90s; /* Efeito do fade */
border:1px dashed #5988FF; /* Bordas */
color: #FF1F7A; /* Cor da fonte*/
}
cute:hover{
font-size: 12px; /* Tamanho da fonte hover */
background: #9FBAFF; /* Fundo de quando passa o mouse */
border:1px solid #FF1F7A; /* Bordas de quando passa o mouse */
color: #FF1F7A; /* Cor da fonte quando passa o mouse */
-webkit-transition-duration: .80s;
letter-spacing: 4px; /* Espaço das letras em hover */
}

O código e auto explicativo, então já da para entender bem fácil.

2. Agora adicione um Gadget HTML/Java Script, e dentro dele cole esse código:

Códigos

<a href="URL"><cute> NOME </cute></a>
<a href="URL"><cute> NOME </cute></a>
<a href="URL"><cute> NOME </cute></a>
<a href="URL"><cute> NOME </cute></a>

Gostou? Não esqueça de comentar e se for copiar credite *^^*