membuat zooming gambar

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 is400)
yzoom: 400, //zooming div default width(default height value is400)
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 []