Cara Memasang Image Shake Hover di Blogger

Cara Membuat Gambar Bergetar Saat di Sentuh - Pada artikel kali ini, saya mau berbagi sedikit tips tentang bagaimana cara membuat gambar diblog bergetar saat disentuh oleh kursor. Image hover kali ini, bisa digunakan pada semua gambar diblog atau hanya dibagian postingan saja.

Dengan menerapkan trik ini, kamu bisa membuat gambar diblog kamu menjadi lebih menarik. Untuk lebih jelasnya, berikut beberapa keuntung yang bisa kamu dapatkan jika menerapkan trik image shake berikut ini.

Keuntungan Menerapkan Image Shake

1. Menambah nilai daya tarik blog bagi pengunjung
2. Membuat pengunjung blog betah
3. Membuat ciri khas blog, sehingga mudah diingat pengunjung
4. Membuat blog terlihat profesional
5. Membuat blog terlihat unik, keren dan berbeda dari yang lain.

Kelebihan Menerapkan Image Shake

Selain membuat konten-konten yang berkualitas untuk pengunjung, salah satu cara membuat pengunjung agar betah berlama-lama diblog kita adalah dengan membuat pengunjung merasa nyaman dengan blog kita. Salah satunya, dengan menerapkan trik image shake hover ini.

Selain itu, kelebihan lain dengan menerapkan trik kali ini adalah tidak membuat loading blog menjadi lambat. Karena trik image shake hover ini hanya menggunakan css, tanpa javascript sedikitpun.

Demo Image Shake Hover

Bagi kamu yang penasaran dengan image shake hover kali, kamu bisa menyentuh gambar yang ada dipostingan blog ini. Karena saya juga menggunakan trik image shake hover ini untuk gambar dipostingan blog.

Cara Menerapkan Image Shake Hover di Blog

Baiklah langsung saja, bagi kamu yang ingin memasang image shake hover ini diblog, kamu bisa mengikuti langkah-langkah dibawah ini.

1. Login ke akun blogger
2. Edit tema, kemudian cari kode ]]></b:skin>
3. Lalu paste css berikut tepat diatasnya
4. Simpan tema.

.post-body img:hover{
animation:Shake 0.80s cubic-bezier(.36,.07,.19,.97) both;transform:translate3d(0, 0, 0);backface-visibility:hidden;perspective:1000px}
@keyframes Shake{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-4px,0,0)}40%,
60%{transform:translate3d(4px, 0, 0)}}
@-webkit-keyframes Shake{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-4px,0,0)}40%,60%{transform:translate3d(4px,0,0)}}

Selesai!

Bagaimana, sangat mudahkan? Selain itu, kalian juga bisa menerapkan trik image shake hover ini pada seluruh gambar di blog kalian dengan menghapus kode class .post-body pada kode tersebut.

Baiklah mungkin itu saja yang bisa saya bagikan untuk trik kali ini. Untuk kalian yang masih kesulitan dalam menerapkan trik image shake hover ini, kalian bisa mengajukan pertanyaan dikotak komentar dibawah ini. Sampai jumpa.