Cara Membuat Efek Hover Gambar Bergetar di Blog

HaiSob apa kabar? Ok sob pada kesempatan ini saya akan membagikan cara membuat efek gambar bergetar di blog. Banyak sekali efek-efek yang bisa di tambahkan untuk membuat gambar di postinganmu menjadi lebih menarik, misalnya dengan menambahkan efek hover bergetar pada gambar.

Efek seperti ini mungkin sudah pernah sobat lihat di blog-blog di luar sana, efek berikut ini berbeda dengan morph image hover effect yang telah dibahas sebelumnya. Efek hover pada gambar ini adalah efek yang muncul ketika mouse diarahkan pada gambar yang ada di postingan blog tersebut.

 Efek Hover Gambar Bergetar


CSS Efek Hover Gambar Bergetar
Efek Hover Gambar Bergetar

Apakah sobat tertarik ingin membuat efek gambar bergetar di blog sobat? Nah untuk demonya silahkan masuk ke link demo dibawah dan arahkan kursor mouse pada gambar.



Membuat Efek Gambar Bergetar di Blogger


1. Di Blog Blogger 😊
2. Pilih menu Template ➔ Edit HTML
Cara Membuat Efek Hover Gambar Bergetar di Blog
Template ➜ Edit HTML

3. Letakan  diatas kode </head>. atau </body> di coba saja mana yang cocok.
<script type="text/javascript">
var rector=8
var stopit=0
var a=1
function init(which){
stopit=0
shake=which
shake.style.left=0
shake.style.top=0
}
function rattleimage(){
if ((!document.all&&!document.getElementById)||stopit==1)
return
if (a==1){
shake.style.top=parseInt(shake.style.top)+rector+"px"
}
else if (a==2){
shake.style.left=parseInt(shake.style.left)+rector+"px"
}
else if (a==3){
shake.style.top=parseInt(shake.style.top)-rector+"px"
}
else{
shake.style.left=parseInt(shake.style.left)-rector+"px"
}
if (a<4)
a++
else
a=1
setTimeout("rattleimage()",10)
}
function stoprattle(which){
stopit=1
which.style.left=0
which.style.top=0
}
document.write('<style>.gambargetar{position:relative;}</style>')
</script>
4. Untuk penerapannya, bisa untuk gambar mana saja di blog kamu. Jika ingin menerapkannya pada postingan blog silahkan tulis salah satu kode di bawah ini dalam mode HTML (sebelahnya Compose).

EFFECT PELAN

<img class="gambargetar" src="URL GAMBAR" onclick="top.focus()" onmouseout="stoprattle(this);top.focus()" onmouseover="init(this);rattleimage()" />

EFFECT CEPAT

<img class="gambargetar" src="URL GAMBAR" onmouseover="init(this);rattleimage()" onmouseout="stoprattle(this);top.focus()" onclick="top.focus()" />

Ok sobat sekian tutorial cara membuat efek hover gambar bergetar di blog yang dapat dibagikan saat ini, jangan lupa lihat artikel terbaru blog ini lainnya. Semoga bermanfaat.