Cara Menambah Efek Zoom pada Gambar Postingan

Cara Menambah Efek Zoom pada Gambar Postingan

Cara Menambah Efek Zoom pada Gambar Postingan

Penambahan efek zoom pada gambar postingan ini akan membuat gambar ditampilkan lebih besar ketika mause diletakkan di atas objek gambar, jadi pengunjung tidak perlu melakukan klik yang terkadang dalam proses memuatnya membutuhkan waktu loading yang agak lama untuk mengetahui detail gambar yang kita sajikan dalam postingan blog.

Cara pemasangannya pun sangat mudah, hanya perlu menambahkan beberapa kode script saja pada template yang Sobat gunakan. Jika Sobat tertarik untuk memasangnya ikuti langkahnya berikut ini.

Cara Menambah Efek Zoom pada Gambar Postingan

  • Login ke blogger
  • Pilih menu Template
  • Kemudian klik Edit HTML
  • Setelah itu cari kode ]]></b:skin>
  • Copy kode script berikut dan paste-kan tepat di atas kode ]]></b:skin> yang tadi telah kita cari
.post img:hover {
-o-transition: all 0.9s;
-moz-transition: all 0.9s;
-webkit-transition: all 0.9s;
-moz-transform: scale(1.7);
-o-transform: scale(1.7);
-webkit-transform: scale(1.7);
}
  • Terakhir Simpan Template

Tambahan:
  • Kode all 0.9s adalah kode waktu yang dibutuhkan untuk menampilkan gambar setelah dikenai efek zoom. Jika Sobat merubah 0.9s menjadi lebih besar, misalnya 1s maka waktu yang dibutuhkan untuk menampilkan gambar akan lebih lama, begitu juga sebaliknya.
  • Sedangkan kode scale(1.7) adalah kode skala perbandingan antara gambar sebenarnya dengan gambar setelah dikenai efek zoom ini. Bila Sobat merubah 1.7 menjadi lebih besar, misalnya 1.10, maka gambar yang ditampilkan akan lebih besar, begitu juga sebaliknya.
Demikian artikel singkat cara menambah efek zoom pada gambar postingan ini, semoga dapat bermanfaat dan selamat mencoba. Happy blogging!

Artikel terkait:

Bagikan: