Tutorial: Menu Roda a Roda

Yo minna!

Ah, que feliz... Minha última semana de aulas!! E semana que vem é meu níver ou seja: NÍVER = BOLO + PRESENTES = FELICIDADE E-T-E-R-N-A DA MEL

(≧▽≦)

Enfim, hoje eu trouxe um outro menu que também tem um nome ridículo diferente. O menu Roda a Roda não, o Silvio Santos não vem aí u.u. Ele serve tanto para menu, quanto para colocar nos afiliados ou tags, etc. Como eu ainda não tive paciência para fazer uma preview no Tumblr (afinal nunca funfa ¬¬") eu coloquei no mesmo blog que eu criei para o Menu Menu. Para ver é só clicar aqui.

Então vamos ao tutorial GO GO GO!

♥♥

Antes de tudo, prepare as imagens que você irá usar (de preferência 100x100px).
Agora vá em editar HTML e cole depois de ]]></b:skin> o código abaixo

.rodaaroda{
border:5px solid #312198 ;*borda da imagem - personalize como quiser*
transition: cssAnimation 5s 0 ease-in-out;
-webkit-animation: cssAnimation 1s 0 ease-in-out;
-moz-animation: cssAnimation 1s 0 ease-in-out;
-o-animation: cssAnimation 1s 0 ease-in-out;
-webkit-transform: rotate(0deg) scale(1.0) skew(0deg) translate(0px);
-moz-transform: rotate(0deg) scale(1.0) skew(0deg) translate(0px);
-o-transform: rotate(0deg) scale(1.0) skew(0deg) translate(0px);
-ms-transform: rotate(0deg) scale(1.0) skew(0deg) translate(0px);
-webkit-transition-duration: .90s;
*borda redonda - altere de acordo com o tamanho da imagem*
-webkit-border-radius: 70px;
-moz-border-radius: 70px;
border-radius: 70px;
}
.rodaaroda:hover{
border:5px solid #937df2 ;*borda da imagem - personalize como quiser*
-webkit-transform: rotate(360deg) scale(1.0) skew(0deg) translate(0px);
-moz-transform: rotate(360deg) scale(1.0) skew(0deg) translate(0px);
-o-transform: rotate(360deg) scale(1.0) skew(0deg) translate(0px);
-ms-transform: rotate(360deg) scale(1.0) skew(0deg) translate(0px);
-webkit-transition-duration: .90s;
*borda redonda - altere de acordo com o tamanho da imagem*
-webkit-border-radius: 70px;
-moz-border-radius: 70px;
border-radius: 70px;
}

Salve o modelo. Depois vá em Layout→ adicionar um gadget→ HTML/JavaScript e cole o código abaixo, fazendo as alterações necessárias.
<a href="LINK" title="TITULO DO LINK"><img src="LINK DA IMAGEM" /></a>

Por hoje é só ;)
Sayonara õ//