Membuat Gambar Membesar Saat Disorot

Berbagai macam efek gambar yang bisa kita tampilkan pada blog. Sebelumnya say sudah pernah memberikan tips mengenai efek gambar, tetapi agak berbeda dengan yang ini sobat blogger. Kalu tidak salah judul tipsnya adalah Membuat Foto/Gambar Bershadow di Blogspot.com. Nah sudah jelaskan bedanya sobat blogger?. Kalau tips kali ini, efeknya gambarnya adalah membesar saaat disorot dengan mouse.

Mungkin sobat blogger bisa lihat deh gambar yang di samping. Kira-kira seperti itulah sobat blogger tampilan dari efek gambar yang akan kita pelajari.

Untuk lebih cepatnya kita langsung ke TKP aja yah?.

Oke..sobat blogger saaynya kita belajar bagaimana cara membuat efek gambar membesar dengan menggunakan J-Query. Oke langsung step by step yah sobat blogger......

I. Menambahkan Kode Galery ke dalam Template Blog.
1. Login ke blogger.com dengan account anda
2. Pilih Edit HTML pada dashboard blog anda
3. Cari kode ]]></b:skin>.
4. Jika sudah ketemu, letakkan kode galery berikut di atas kode ]]></b:skin>.

/* Blogger Zoom Gallery By AllBlogTools.com */
ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative;  /* Set the absolute positioning base coordinate */
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px; /* Set the small thumbnail size */
-ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
}
ul.thumb li img.hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-lRQyJWdDrjd19HsuIQtrcYQ9ANMMn24i4By1CApSi0MF8Ozix2eNeey722B9z9-WVwCPprgxGlcRuuWm21I1sm4ExL9ALymXIgNlbIi8a8OivjNhB92gtYLfdJzV7ZNKr263qRu3XylA/) no-repeat center center;  /* Image used as background on hover effect
border: none; /* Get rid of border on hover */
}

5. Kemudian cari kode </head>.
6. Letakkan kodee bberikut di atas kode </head>.

<script src='http://code.jquery.com/jquery-latest.js'
type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){

//Larger thumbnail preview

$(&quot;ul.thumb li&quot;).hover(function() {
$(this).css({&#39;z-index&#39; : &#39;10&#39;});
$(this).find(&#39;img&#39;).addClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;-110px&#39;,
marginLeft: &#39;-110px&#39;,
top: &#39;50%&#39;,
left: &#39;50%&#39;,
width: &#39;174px&#39;,
height: &#39;174px&#39;,
padding: &#39;20px&#39;
}, 200);

} , function() {
$(this).css({&#39;z-index&#39; : &#39;0&#39;});
$(this).find(&#39;img&#39;).removeClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;0&#39;,
marginLeft: &#39;0&#39;,
top: &#39;0&#39;,
left: &#39;0&#39;,
width: &#39;100px&#39;,
height: &#39;100px&#39;,
padding: &#39;5px&#39;
}, 400);
});

//Swap Image on Click
$(&quot;ul.thumb li a&quot;).click(function() {

var mainImage = $(this).attr(&quot;href&quot;); //Find Image Name
$(&quot;#main_view img&quot;).attr({ src: mainImage });
return false; 
});

});
</script>

7. Kemudian SIMPAN TEMPLATE blog anda.

II. Menambahkan Galery ke dalam Template Blog.
Sekarang anda pergi ke Tata Letak ==> Tambah Gadget ==> HTML/JavaScript, lalu pastekan kode berikut ini.

<ul class="thumb">
<li><a href="#"><img src="picture 1 Link" alt="" /></a></li>
<li><a href="#"><img src="picture 2 Link" alt="" /></a></li>
<li><a href="#"><img src="picture 3 Link" alt="" /></a></li>
<li><a href="#"><img src="picture 4 Link" alt="" /></a></li>
</ul>

Perhatikan kode di atas:
Tulisan yang berwarna hijau adalah link dari gambar sobat, sedangkan tulisan # adalah link yang akan dituju, bisa diisi/tidak diisi.
Jika sobat ingin menambahkan gambar, sobat blogger cukup menambahkan kode berikut ini

<li><a href="#"><img src="picture  Link" alt="" /></a></li>

Kalau sudah selesai silahkan di SAVE.
Dan akhirnya selesai. Selamat mencoba dan semoga sukses....Amin
demikian tips yang dapat saya berikan, kiranya bermanfaat buat sobat blogger. (Jkt/2012)