Tutorial - Efeito Shake

Yoo people! Boa tarde!

Como vão todas vocês? Eu resolvi postar outro tutorial, viciou fazer tutoriais, já que eu amo mexer com HTML.

O tutorial de hoje é um efeito que é melhor sendo usado em elite de afiliados, ele balança um pouco e depois para. Quem quiser ver como é, clique aqui.

Enjoy ~*

1. Vá em Modelo > Editar HTML > Ctrl + F e procure por ]]></b:skin> e acima disso, cole:

@-webkit-keyframes shake {0% {transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg);}

25% {transform: rotate(5deg); -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -o-transform: rotate(5deg); -ms-transform: rotate(5deg);}

50% {transform: rotate(-5deg); -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -o-transform: rotate(-5deg); -ms-transform: rotate(-5deg);}

75% {transform: rotate(5deg); -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -o-transform: rotate(5deg); -ms-transform: rotate(5deg);}

100% {transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg);}


}.shake {-webkit-transition: .9s; border-radius: 5px;}.shake:hover {-webkit-animation: shake .9s alternate ease;}

Não precisa editar nada!

2. Vá até Layout > Adicionar Gadget > HTML/JavaScript e cole:

<a href="URL" title="NOME"><img class="shake" src="URL da IMAGEM" /></a>

Se quiser mais, é só ir adicionando esse código.

Fácil né? E tão fofo!

Daqui a pouco eu trago uma playlist! Beijos leitores!