View demoDownload source
Yap , di tutorial blogging kali ini saya akan membahas sedikit , lebih tepatnya memberikan informasi dan arahan dan bukan pembahasan atau pembedahan karena saya bukan ahlinya dibidang ini , jadi saya hanya akan mengatakan apa yang saya tau saja .
Yang akan saya bagikan dalam post ini adalah sebuah cara untuk menciptakan efek Hover Zoom pada image post . Untuk contohnya anda bisa melihat gambar dibawah ini dan silahkan arahkan mouse anda ke gambar tersebut .
Ya , kebetulan saya juga barusaja menggunakan system ini untuk sekedar uji coba .
Disini kita akan memanfaatkan sebuah Plugin ImageLens yang berfungsi menciptakan efek kaca pembesar pada gambar saat di sorot mouse ( hover ) .
Cara memasangnya cukup sederhana , silahkan ikuti petunjuknya dibawah ini .
Instalasi Plugin
1. Silahkan anda masuk ke dasbor blogger > Template > Edit Html .
2. Letakkan script dibawah ini diantara kode <head> dan </head> pada template anda .
<script src="jquery.imageLens.js" type="text/javascript"></script>Eksekusi
Disini saya menerapkan pada image posting , untuk itu yang perlu kita eksekusi adalah bagian
.post-body img
<script type='text/javascript'>
$(".post-body img").imageLens();
</script>
<script type='text/javascript'>
$(".post-body img").imageLens({ lensSize: 200 });
</script>Anda bisa melihat berbagai macam style yang dihasilkan dengan mengunjungi halaman demo melalui tombol dibawah ini .
View demoDownload source
Arahkan Kursor dibawah ini untuk memberikan komentar.
No HyperLink dan Komentar Hit&Run akan diacuhkan . Berkomentarlah dengan bahasa yang baik dan benar EmoticonEmoticon