Cara Membuat Efek Bergoyang Pada Gambar Postingan Blog Ketika Disentuh

gambar goyang ketika disentuh

Keberadaan gambar di dalam postingan memang cukup penting dalam mendukung kekuatan konten agar pembahasan semakin kaya dan mudah dipahami. Pada umumnya, pembaca juga akan jenuh ketika membaca sebuah postingan yang panjang menjalar, namun minim gambar atau bahkan tidak ada gambar ilustrasinya sama sekali. Selain bikin ngantuk, ketiadaan ilustrasi gambar juga bisa membuat pengunjung malas untuk membacanya. Oleh karenanya, maksimalkan setiap postingan anda dengan selalu menyertakan gambar di dalamnya. 
Memang keberadaan gambar bisa mempengaruhi kecepatan loading blog anda. Namun jika anda bisa mengelolanya dengan baik (termasuk dengan mengkompresnya agar file menjadi semakin kecil), bukan tidak mungkin pengunjung akan banyak berdatangan menuju blog anda karena gambar-gambar tersebut. Dan agar lebih menarik lagi, tidak ada salahnya juga anda tambahkan efek bergoyang pada gambar tersebut biar pengunjung terhibur dan terkesima. 

Jangan khawatir, cara membuat efek goyang pada gambar postingan ini hanya menggunakan kode CSS sehingga tidak akan begitu mempengaruhi kecepatan loading blog anda. Jika berminat memasangnya, silahkan ikuti langkah-langkah berikut ini:

1. Buka akun blogger anda. 

2. Pilih menu thema dan klik edit html. 

3. Cari kode ]]></b:skin> atau </style> dan letakkan kode berikut ini di atasnya. 
.post-body img:hover {
animation: bergoyang 0.8s;
animation-iteration-count: infinite;
}
@keyframes bergoyang {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 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(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
4. Simpan kembali template anda. 

Silahkan anda bisa melihat hasilnya. Gambar-gambar di dalam postingan pun kini akan bergoyang ketika tersentuh oleh mouse (via PC/ laptop) atau jari jemari (via smartphone) pembacanya. 

Demikianlah pembahasan artikel kali ini tentang cara membuat efek bergoyang atau bergerak atau bergetar pada gambar postingan. Semoga bermanfaat.

Artikel Terkait