Fasilitas ini dikembangkan oleh Dynamic Drive dengan framework jQuery, silahkan lihat preview-nya disini. Dalam proses integrasi dengan blogger juga tidak serumit efek LightBox, untuk mencobanya silahkan ikuti langkah dibawah ini...
Langkah pemasangan Efek MagnifyLangkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Checklist "Expand Template Widget"
Langkah 4
Cari kode dibawah ini :
</head>Langkah 5
Masukan (copy paste) kode dibawah ini tepat diatas kode pada langkah 4 :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>Langkah 4
<script src='http://hensblog.googlecode.com/files/Magnifier.js' type='text/javascript'/>
Simpan template, sampai disini proses integrasi efek Magnify pada blogger telah selesai.
Modifikasi gambar yang akan ditampilkan dengan efek Magnify
Langkah 1
Masukan gambar pada posting blog kita
Langkah 2
Untuk memodifikasi kode gambar, ubahlah mode posting ke mode Edit HTML
Langkah 3
Cari kode gambar seperti di bawah ini:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="URL-GAMBAR/contoh.jpg">Langkah 4
<img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 211px; height: 320px;" src="URL-GAMBAR/contoh.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_XXXXX"/>
</a>
Ada beberapa cara pemasangan kode efek Magnify pada artikel kita.
Cara 1
Tambahkan kode (warna biru) untuk pemasangan efek seperti contoh dibawah ini:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="URL-GAMBAR/contoh.jpg" rel="magnify[contoh]">
<img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 211px; height: 320px;" src="URL-GAMBAR/contoh.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_XXXXX" id="contoh" class="magnify" data-magnifyby="2"/>
</a>
Cara 2
Buang kode dibawah ini:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="URL-GAMBAR/contoh.jpg">Sehingga tersisa kode seperti dibawah ini dan tambahkan kode efek Magnify (warna biru):
....
</a>
<img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 211px; height: 320px;" src="URL-GAMBAR/contoh.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_XXXXX" class="magnify"/>Langkah 5
Terbitkan artikel anda
Keterangan:
Perhatikan langkah 4!
- rel="magnify[contoh]" : kode ini berfungsi untuk menghubungkan link ke gambar yang akan tampilkan, kode [contoh] ini adalah ID unik yang harus sama dengan kode ID.
- id="contoh" : kode ini adalah identitas unik yang digunakan dalam pemanggilan gambar oleh kode rel="magnify[contoh]"
- class="magnify" : ini adalah kode wajib yang harus disertakan untuk menampilkan gambar dengan efek magnify
- data-magnifyby="2" : nilai 2 menentukan perbesaran gambar, jika diisi nilai 2 maka gambar akan di perbesar 2 kali dari ukuran aslinya. Kode ini adalah tambahan, jika tidak disertakan pun tidak menjadi masalah, hanya perbesaran default-nya adalah 3 kali jika tanpa kode ini.
- Secara mudah efek magnify untuk artikel ikuti saja langkah 4 cara 2.