CSS - Cara Agar Gambar Blog Bergerak/goyang saat disentuh Hover

Gambar merupakan elemen penting dalam kualitas konten di postingan blog. Para Blogger baik pemula sampai Suhu (Ahli) berlomba-lomba menambahkan gambar pada setiap artikelnya supaya artikel yang mereka buat lebih berbobot dan tentu SEO.

Setiap gambar yang ditampilkan di lini postingan  tentu harus sesuai dengan topik pembahasan yang sedang dipaparkan agar para pembaca semakin yakin dengan tulisan kita nantinya.

Bayangkan saja kalau sobat menemukan artikel yang isinya cuma tulisan saja tanpa adanya gambar pendukung? "kok kuraaaaang!" saya pastiin sobat akan malas untuk membacanya, benar bukan? kemudian apa akibatnya? akibatnya pengunjung lebih memilih blog lain yang lebih lengkap dan blog sobat ditinggalkan begitu saja padahal belum dibaca.

Jaman sudah serba visual jadi semakin baik visual yang terpampang maka akan memiliki nilai yang baik pula dimata pengunjung khususnya pengunjung blog. Kualitas gambar yang kalian tampilkan di setiap postingan juga perlu diperhatikan kualitasnya, jangan asal comot karena bisa saja ada gambar yang memiliki hak cipta.

Cara Membuat Efek Bergerak / Goyang saat Mouse / Jari menyentuh gambar di Blog
Waktu itu saya mencari-cari artikel tentang bagaimana membuat agar gambar yang ada di setiap postingan blog kita bisa bergerak saat di Hover (sentuh/dilewati Mouse), tapi ternyata rata-rata hanya artikel lawas yang jika kita terapkan di blog kita saat ini tidak bisa alias tidak berefek sesuai yang di janjikan.

Lalu bagaimana? tenang dulu sob, hari ini saya mempelajari beberapa CSS hasil racikan saya sendiri untuk bisa membuat gambar di Blog Bergoyang-goyang layaknya penyanyi Dangdut wkwk.

CSS Gambar Bergoyang saya bagi jadi 2 Versi :

Global : Semua gambar Berubah jadi bisa bergoyang saat di Hover (Sentuh jari / Mouse), tanpa memanggil Class di setiap Postingan. Lebih Praktis.

Khusus : Hanya Beberapa gambar pilihan saja yang bisa bergoyang saat di Hover (Sentuh jari / Mouse), perlu memanggil Class di setiap Postingan. Sedikit Memakan Waktu.

Jadi silahkan bayangkan terlebih dahulu yang mana sekiranya cocok dengan blog dan pemikiran sobat agar tak perlu mengganti-gantinya nanti. Bagi yang masih pemula atau awam tentang CSS saya sarankan menggunakan yang global saja.

Langkah-langkah Menerapkan Gambar bergerak saat di Hover (Tersentuh Jari / Mouse)

Global (Semua)
Langkah 1 : Buka Blogger -> Tema.
Langkah 2 :  Edit HTML.
Langkah 3 : Copy Kode dibawah dan Paste diatas kode ]]></b:skin>

.post-body img{
  display: inherit;
  transform-origin: center center; }
img:hover img{ animation-play-state: running; }

@keyframes img {
  20% { transform: translate(-1px, -5px) rotate(2.5deg); }
  40% { transform: translate(5px, 1px) rotate(-2.5deg); }
  60% { transform: translate(-1px, -5px) rotate(2.5deg); }
  80% { transform: translate(5px, 1px) rotate(-2.5deg); }
  0%, 100% { transform: translate(0, 0) rotate(0); } }

img:hover{
  animation-name: img;
  animation-duration: 0.5s;
  animation-timing-function: ease-in-out;}

Langkah 4 : Simpan dan Lihat hasilnya.

Khusus (Tertentu)
Langkah 1 : Buka Blogger -> Tema.
Langkah 2 :  Edit HTML.
Langkah 3 : Copy Kode dibawah dan Paste diatas kode ]]></b:skin>

.motubablog{
  display: inherit;
  transform-origin: center center; }
.motubablog:hover .motubablog{ animation-play-state: running; }

@keyframes motubablog{
  20% { transform: translate(-1px, -5px) rotate(2.5deg); }
  40% { transform: translate(5px, 1px) rotate(-2.5deg); }
  60% { transform: translate(-1px, -5px) rotate(2.5deg); }
  80% { transform: translate(5px, 1px) rotate(-2.5deg); }
  0%, 100% { transform: translate(0, 0) rotate(0); } }

.motubablog:hover{
  animation-name: motubablog;
  animation-duration: 0.5s;
  animation-timing-function: ease-in-out;}

Langkah 4 : Simpan.
Langkah 5 : Cara menggunakannya Buat Postingan -> masukan Gambar.
Langkah 6 : Masuk HTML bukan Compose, tambahkan "class=motubablog" setelah <img. dibawah ini contoh penerapannya.

<img class="motubablog" border="0" data-original-height="564" data-original-width="278" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7Vo71eWc0Yfn-sBPmiqnT9TcjiugO9UbZ5mqwoHhiFmNV7GL9hqbAiKIB8HBwos6qnYyeU0yS3lOGrZqxfyFUt0MjtxNmbDx5IyxklFO9OPLZnjQuWv3m4DXePyEMXjMI1PSBX3rWtqM/s400/tambah-lokasi-jam-wa-terbaru-+%25289%2529.png" width="196" />

Langkah 7 : Simpan dan Terbitkan Artikel.

Kok gambar masih Diam saat disentuh? Kok gaada perubahan? Bagi blog yang menggunakan script anti copas atau script anti klik kanan, gambar tidak akan bergoyang karena script itu secara langsung mematikan script goyang ini.

Manfaat menambahkan Gambar + Effek goyang / bergerak di Blog

1. Gambar akan Menarik Perhatian Pengunjung.
2. Bisa menjadi ciri khas Blog.
3. Meningkatkan Traffic karena unik.
4. Menjadikan Fokus gambar.
5. Memperjelas & Pendukung Artikel.
6. Memperkecil Bounce Rate, karena pengunjung asik dengan efek gambar goyang.
7. Meningkatkan PV (Pageview).

Jadi bagaimana menurut sobat apakah setelah melihat gambar bisa begoyang itu menarik? dengan menambahkan script diatas blog kita bisa menjadi lebih unik dimata visitor. Apa bila ada ketidakpahaman pada langkah-langkah menerapkan script CSS di blog sobat bisa ditanyakan dikolom komentar dibawah.

Sekian artikel tentang bagaimana supaya gambar bergerak saat di lewati mouse, sentuh jari atau Hover di Blogger, semoga membantu sobat Blogger Indonesia semuanya. Terimakasih. Jangan Lewatkan Artikel Motubablog lainnya...