Images Magnifier untuk Blogger

Pernahkah kita mengunjungi salah satu situs web/blog, di dalam situs itu terdapat sebuah gambar yang di-embedkan ke page dari situs tersebut, ketika kita mendekatkan pointer ke gambar itu dan tiba-tiba pointer dari kursor kita berubah menjadi bentuk semacam luv denan tanda + (plus) didalamnya. Dan ketika kita mengklik gambar tersebut aneh bin ajaib gambar tersebut menjadi besar seakan-akan keluar dari halaman tadi dan mendekat ke arah kita.

Ok, yang demikian itu adalah fitur yang dinamakan dengan Images Magnifier, script asli dari images magnifier ini dapat anda temukan di dynamicdrive.com. Setelah mengetahui tentang script tersebut timbul suatu pertanyaan bagaimana cara untuk menempatkan fitur tersebut di dalam blog kita. Langsung saja kebetulan penulis telah mencoba trik demikian, untuk melihat contoh dari script ini bisa dilihat di galeri photo penulis.

Adapun langkah untuk menempatkan script ini adalah sebagai berikut:

1. Login ke Blogger dengan akun blog yang kita miliki.
2. Tambah posting atau buat laman baru
3. Pada Edit Entry atau Edit Page/laman, Sisipkan kode dbawah ini:
<script src="https://sites.google.com/site/sdnegeritanjungsari2/file/jquery.magnifier.js" type="text/javascript"> </script> <div style="text-align: center;"> <img border="0" class="magnify" data-magnifyby="2" height="100" src="http://bla-bla..." width="100" /></div>
Perhatikan pada script diatas pada tag img terdapat properti class="magnify", properti ini berfungsi untuk memanggil fungsi magnify pada javascript yang telah kita panggil sebelumnya, kemudian pada property data-magnifyby isi dengan jumlah pengali dari dari ukuran gambar tersebut (ukuran gambar adalah angka pada property height dan width tag img tersebut), untuk property border, height, width dan src isi sesuai dengan kebutuhan.
4. Setelah semuanya selesai save entry/laman, kemudian lihat hasilnya.

Semoga Bermanfaat, selamat mencoba dan Good Luck ya...