Como colocar imagens giratórias na sidebar

Olá chicletes de menta! Hoje vou ensinar vocês a colocar aquelas imagens arredondadas que giram quando passam o mouse (muito usada em parceiros e afiliados). Como eu aprendi no blog Sweet Pepper, vamos deixar os créditos ao blog. Vamos la:

Eu sempre gosto de primeiro de tudo adicionar o código em HTML Java Script quando é assim, pois daí você tem a certeza se o código dará certo ou não!

Então vá em design>adiconar gadget> HTML Java Script e adicione o seguinte código:

<a href="LINK REDIRECIONADO" target="_blank"><img class="rotate" src="URL DA IMAGEM" title=''Titulo" /></a> 

Mude corretamente o que está em negrito
Agra vá em design>Editar HTML> ctrl+F e procure por ]]></b:skin>.Acima dele adicione o seguinte código:

.rotate{ -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; width:auto; -webkit-transition-duration: 1.20s;}.rotate:hover{-webkit-transform: rotate(360deg);} 

Na primeira linha do código, fica as proporções da borda arredondada.
Na segunda fica a duração do giro ( 1.20s) quando menor o numero, mais rápido irá girar.
Na terceira linha fica o grau de rotação (360deg).
Visualize e se a imagem ja estiver arredondada é porque tudo deu certinho!

Espero ter ajudado! Comenta vai! 

Se reblogar deixe créditos com link | Bang Teen.