Cara membuat Gambar Bergetar ketika di Hover

Assalamu'alaikum , okkay kali ini saya akan share tentang Cara membuat Gambar Bergetar ketika di Hover ,cara ini sudah saya pakai , dan sebagai demonya lihat di posting hompage dan banner 125x125 , bergetar saat di hover! :) bagaimana kah caranya? langsung saja berikut langkah-langkahnya

pertama sprerti biasanya harus login ke blogger.com dulu
berhasil login dan masuk ke dasboard
samping kiri pilih page template, Edit html
masukan code berikut tepat diatas </b:skin> :

/* mode-getar-interizers.blogspot.com */
letakan ID post kamu, ID css lain, ID css lain1, ID css lain2, ID css lain3 {animation-name:MOD-getar; -moz-animation-name: MOD-getar; -webkit-animation-name: MOD-getar; animation-duration:0.8s; -moz-animation-duration:0.8s; -webkit-animation-duration:0.8s; transform-origin:50% 50%; -moz-transform-origin:50% 50%; -webkit-transform-origin:50% 50%; animation-iteration-count:infinite; -moz-animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite; animation-timing-function:linear; -moz-animation-timing-function:linear; -webkit-animation-timing-function:linear}
@keyframes MOD-getar{0%{transform:translate(2px,1px) rotate(0deg)}
10%{transform:translate(-1px,-2px) rotate(-1deg)}
20%{transform:translate(-3px,0px) rotate(1deg)}
30%{transform:translate(0px,2px) rotate(0deg)}
40%{transform:translate(1px,-1px) rotate(1deg)}
50%{transform:translate(-1px,2px) rotate(-1deg)}
60%{transform:translate(-3px,1px) rotate(0deg)}
70%{transform:translate(2px,1px) rotate(-1deg)}
80%{transform:translate(-1px,-1px) rotate(1deg)}
90%{transform:translate(2px,2px) rotate(0deg)}
100%{transform:translate(1px,-2px) rotate(-1deg)}
}
@-moz-keyframes MOD-getar{0%{-moz-transform:translate(2px,1px) rotate(0deg)}
10%{-moz-transform:translate(-1px,-2px) rotate(-1deg)}
20%{-moz-transform:translate(-3px,0px) rotate(1deg)}
30%{-moz-transform:translate(0px,2px) rotate(0deg)}
40%{-moz-transform:translate(1px,-1px) rotate(1deg)}
50%{-moz-transform:translate(-1px,2px) rotate(-1deg)}
60%{-moz-transform:translate(-3px,1px) rotate(0deg)}
70%{-moz-transform:translate(2px,1px) rotate(-1deg)}
80%{-moz-transform:translate(-1px,-1px) rotate(1deg)}
90%{-moz-transform:translate(2px,2px) rotate(0deg)}
100%{-moz-transform:translate(1px,-2px) rotate(-1deg)}
}
@-webkit-keyframes MOD-getar{0%{-webkit-transform:translate(2px,1px) rotate(0deg)}
10%{-webkit-transform:translate(-1px,-2px) rotate(-1deg)}
20%{-webkit-transform:translate(-3px,0px) rotate(1deg)}
30%{-webkit-transform:translate(0px,2px) rotate(0deg)}
40%{-webkit-transform:translate(1px,-1px) rotate(1deg)}
50%{-webkit-transform:translate(-1px,2px) rotate(-1deg)}
60%{-webkit-transform:translate(-3px,1px) rotate(0deg)}
70%{-webkit-transform:translate(2px,1px) rotate(-1deg)}
80%{-webkit-transform:translate(-1px,-1px) rotate(1deg)}
90%{-webkit-transform:translate(2px,2px) rotate(0deg)}
100%{-webkit-transform:translate(1px,-2px) rotate(-1deg)}
}
/* mod-getar-END */

NB : code yang berwarna : Aqua : ganti dengan ID code css kmu dengan tambahan hover contoh :

dan code yang berwana merah ganti dengan ID code css kmu dengan tambahan hover ,contoh pada banner kmu seperti pada sidebar blog saya, dan bila code diatas tidak digunakan hapus saja codenya dari koma "," sampai koma "," . .

okkay spertinya sudah cukup , Semoga bermanfaat .. sekian 

....Wassalamu'alaikum^