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 blogteman2 bisa melihat dengan jelas bagaimana wujud gambar tersebut dalam skala yang lebih besar, dengan begitu tampilan gambar yang dimaksud lebih jelas untuk dipandang.

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

Login ke blogger, lalu klik Tata Letak/Rancangan/Layout >> 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="https://sites.google.com/site/arywebhosting/gambar2ku/complete-review.png" src="https://sites.google.com/site/arywebhosting/gambar2ku/complete-review2.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.

Mudah-mudahan bermanfaat.
Keywords: membuat efek zoom gambar, zoom gambar untuk blogspot, picture zoom effect

Untuk kemajuan Blog Ini Silahkan isi Kotak Komentarnya Ya.. (For blog development, please fill the following blog comment Pal

Share |

Related Post