Cara Membuat Efek Gambar Bergoyang

Memang keberadaan gambar bisa mempengaruhi kecepatan loading blog anda. Namun jika Anda bisa mengelolanya dengan baik (termasuk dengan mengkompresnya agar file menjadi semakin kecil), tidak mungkin pengunjung akan banyak berdatangan ke blog Anda karena gambar-gambar tersebut (baca: Cara menambahkan tag alt dan title pada gambar postingan ). Dan agar lebih menarik lagi, tidak ada salahnya juga Anda tambahkan efek bergoyang pada gambar tersebut biar pengunjung bermanfaat 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 Dashboard Blogger.
2. Pilih menu theme dan klik edit html.
3. Cari kode ]]></b:skin> atau </style> dan letakkan kode berikut ini di atasnya.

.post-body img:hover {
animasi: bergoyang 0.8s;
animasi-iterasi-hitungan: tak terbatas;
}

@keyframes bergoyang {
0% { transformasi: terjemahkan(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transformasi: terjemahkan(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% { transformasi: terjemahkan(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 mempertanyakan oleh mouse (PC / laptop) atau menggunakan (smartphone) pembacanya.

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