Efeito Shake em imagens

 

Ola Pessoal , nesse primeiro tutorial estarei ensinando como fazer um efeito nos afiliados ,(ou imagens qualquer na sua sidebar) , um efeito chamado SHAKE um efeito que ao passar o mouse sobre a foto ela começa a se tremer , e bem legal podem ver aqui , e além do más trouxe ALGUMAS IMAGENS DE ATRIZES para Utilizarem como Afiliados/ou imagens , enfim se pegarem as imagens comente aqui , bom lembrando que este efeito e do Kawaii , então não mexam em nada do código. 

CLIQUE EM LEIA MAIS

Abra seu Blogger , vá em editar html der CTRL+ F e pesquise por ]]></b:skin , acima desta tag 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;} 

Agora salve , e ADICIONE um gadget "HTML/JAVA SCRIPT" e cole o esse código , lembrando para que apareça mais imagens e só repetir o código , modificando .

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

URL : Site ou Blog que deseja que redirecione ao clicar na imagem , 

NOME: Nome do Blog Afiliado

URL DA IMAGEM : A Url da imagem que voce que apareça com o efeito

 

IMAGENS , SE PEGAR COMENTE AQUI .