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(){
$("img.jqzoom").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: "right" //zooming div position(default position value is "right")
});
});
</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