Membuat Zooming Gambar untuk Blogger

Apa itu "zooming gambar"? Zooming gambar...kalau secara bahasa artinya memperbesar gambar, nah kalau dari sisi artinya saja teman2 pasti sudah pada paham maksud dari judul di atas. Namun yang ingin kita bahas kali ini yaitu "bagaimana cara memasang fasilitas zooming gambar tersebut ke dalam blog kita". Sebagai gambarannya, fasilitas ini sangat unik dan cocok bagi teman2 yang biasanya menyediakan gambar2 kecil di dalam blognya lalu menggunakan trik ini dengan tujuan agar setiap pengunjung blog teman2 bisa melihat dengan jelas bagaimana wujud gambar tersebut dalam skala yang lebih besar, dengan begitu tampilan gambar yang dimaksud lebih jelas untuk dipandang.


SCREENSHOT BLOG INI (TEMPLATE LAMA)

Bagi teman2 yang tertarik untuk membuat "Zooming Gambar", silahkan diperaktekkan melalui langkah2 berikut:

Login ke blogger, lalu klik Tata Letak >> Edit HTML

Selanjutnya yang harus teman2 lakukan yaitu meletakkan kode berikut tepat di bawah kode tag ]]></b:skin>

<script src='http://sites.google.com/site/t4belajarblogger/js_t4belajarblogger/zoom.js' type='text/javascript'/>
<script src='http://sites.google.com/site/t4belajarblogger/js_t4belajarblogger/nge.zoom.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery.noConflict();
jQuery(document).ready(function(){
$(&quot;img.jqzoom&quot;).jqueryzoom({
xzoom: 400, //zooming div default width(default width value is 400)
yzoom: 400, //zooming div default width(default height value is 400)
offset: 30 //zooming div default offset(default offset value is 30)
//position: &quot;right&quot; //zooming div position(default position value is &quot;right&quot;)
});
});
</script>

<style type='text/css'>
div.zoomdiv {
z-index : 100;
position : absolute;
top:0px;
left:0px;
width : 200px;
height : 200px;
background: #ffffff;
border:1px solid #CCCCCC;
display:none;
text-align: center;
overflow: hidden;

}


img.jqzoom{
cursor:crosshair;
position:relative;

}
</style>

Lalu klik simpan template.


Selanjutnya teman2 harus menggunakan kode berikut (untuk membuat zooming gambar) di gadget HTML (tata letak) atau ke dalam postingannya teman2

<span class="tozoom"><img alt="URL Gambar Besar" src="URL Gambar Kecil" class="jqzoom"/></span>

Nih berikut ini contohnya

<span class="tozoom"><img alt="http://sites.google.com/site/t4belajarblogger/gambar/screenshot_t4belajarblogger_besar.JPG" src="http://sites.google.com/site/t4belajarblogger/gambar/screenshot_t4belajarblogger_kecil.JPG" class="jqzoom"/></span>

(yang di atas itu adalah contoh untuk screenshot blog saya, silahkan disesuaikan dengan URL gambarnya teman2)


Lalu untuk mengatur panjang lebar layar "gambar zooming"-nya teman2 bisa mengatur nilai panjang lebar (xzoom-yzoom-offset) yang telah saya tandai dengan warna BIRU.

Selamat mencobA.....

(kalau ada kesulitan silahkan untuk meninggalkan pertanyaan sobat pada kotak komentar postingan)


Semoga Bermanfaat []

Tags: membuat efek zoom gambar, zoom gambar untuk blogspot, agar gambar jadi besar, bagaimana buat gambar besar, efek gambar besar disorot, kode HTML zoom, zoom untuk gambar script