Memasang Efek Zoom pada Gambar di Blog

Memasang Efek Zoom pada Gambar di Blog – Kali ini saya akan membahas tutorial lain tentang tips trik blogging, dimana efek zoom pada gambar ini merupakan permainan kode CSS. Efek zoom pada gambar ini merupakan efek yang akan membuat gambar menjadi lebih besar saat pointer mouse digerakkan diatas gambar. Sehingga, gambar yang kecil akan terlihat lebih jelas. Preview efek zoom pada gambar ini dapat dilihat di sini.

Efek zoom pada gambar ini dapat digunakan untuk membuat betah pengunjung blog, dan membuat mereka merasa nyaman di blog. Karena, dengan adanya efek zoom pada gambar ini akan membantu pengunjung melihat gambar yang ukurannya cukup kecil. Cukup dengan meletakkan pointer mouse diatas gambar, dan gambar akan membesar dengan sendirinya.

Oke, to the point saja. Inilah cara memasang efek zoom pada gambar di blog :

1.     Buka blog Anda.

2.     Pilih Template.

3.     Buatlah sebuah cadangan (backup) dari template blog Anda, lalu klik Edit HTML.

4.     Klik pada kode HTML yang muncul, dan tekan ctrl+f

5.     Pada kotak search: yang muncul, carilah kode ]]></b:skin.

6.     Jika sudah ketemu, pastekan kode berikut ini diatas/sebelum kode ]]></b:skin.

.post img:hover { -o-transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform: scale(1.3); -o-transform: scale(1.3); -webkit-transform: scale(1.3); }

7.     Silahkan melihat pratinjaunya dahulu dengan mengklik tombol Pratinjau template.

8.     Jika dirasa sesuai, klik Simpan Template.

Dengan adanya efek zoom pada gambar di blog ini, pengunjung blog Anda tidak akan kesulitan melihat gambar – gambar kecil di blog Anda. Dan tentu saja, kenyamanan dan pengalaman pengunjung blog Anda akan bertambah. Selamat mencoba!

Salam blogger!