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!
Suka Artikel Ini? Yang Share Dapat Pahala Lho... Trims!
pertamax, bisa di coba nih gan
BalasHapus@Holidan : Oke sob. Trims atas kunjungan dan komentarnya... :)
Hapus