Tutorial - Efeito Hover Blurry

Graças ao tutorial, eu criei um efeito e lhe dei o nome de Hover Blurry, que significa mais ou menos "giro embaçado" e é isso que ele faz. Espero que não tenha ficado muito embaçado porque não tinha outro jeito mesmo se eu editasse. A preview está no layout free da postagem anterior. Para colocar o efeito no blog, vá em Modelo > Editar HTML > Clique na primeira seta e procure por "]]></b:skin>". Acima disso, copie esse código e cole lá:

.hoverblurry{
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
-o-border-radius: 50px;
-webkit-transition-duration: .90s;
-moz-transition-duration: .90s;
-o-transition-duration: .90s;
}
.hoverblurry:hover{
-webkit-transform: rotate(720deg);
-moz-transform: rotate(720deg);
-o-transform: rotate(720deg);
-webkit-filter: blur(1px);
-moz-filter: blur(1px);
-o-filter: blur(1px);
-webkit-transition-duration: .90s;
-moz-transition-duration: .90s;
-o-transition-duration: .90s;
}

Não edite nada. Quando quiser usar, é só colar esse código em um gadget de HTML/Javascript e editar o que está em negrito:

<a href="Link do Blog" title="Nome do Blog"><img src="Url da Imagem" class="hoverblurry"/></a> 

Aviso: Eu aconselho a usar imagens de tamanho 50x50, pois fica com melhor qualidade e não ocupa muito espaço.