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!