Cara Tambahkan Galeri Foto Widget Dengan jQuery Hover / Zoom Untuk Blogger Anda.

Nah ini nih widget keren menurutku sie. Nah penasaran kan macam apa jadinya. OK langsung lihat DEMONSTRASI ... UPs maaf maksudnya Demo Widget ini. Hem bentar - bentar .... .... ....
OK klik kanan Open Link In New Tab di sini .

Nah bijimana gan ??? dah liat keren kagak ?? hehehe ...

Melalui tutorial ini, hanya 3 langkah Anda akan mampu membuat widget galeri Anda sendiri dengan jQuery, untuk menambahkannya untuk blogger blog,

Anda menambahkan menambahkannya ke header, sidebar, di atas area posting, di footer kolom, dan setiap di mana lagi pada template Anda,

Jadi mari kita lihat langkah satu.

Langkah 1. Menambahkan Galeri Kode Untuk Template Anda.


Go To your blogger dashboard, layout >> Edit html >>
And find this code,
]]></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/AVvXsEhe7vBSdWsbVGFVB85O-mg-YYmZc1gl6i4irGbrPLm2fs-Fyy6BRJ3SylpwVTS6xvA70yrDjp-VUUpZxYZZ72Q0CkFD6vQIdy05xfpGJE5fgKCm3_W5XPEluqmp1Smfzb1aSsurZTL0AtSZ/) no-repeat center center; /* Image used as background on hover effect
border: none; /* Get rid of border on hover */
}

Kemudian Cari ini Tag

</head>

Dan tambahkan kode berikut sebelum itu tadi.

<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>


Sekarang kita selesai mengedit template, Klik Save template,

KEMON kita lihat langkah berikutnya.

Langkah 2. Menambahkan Galeri Untuk template Anda.

Pergi ke Layout>> elemen halaman dan pada template Anda sidebar, header atau footer Klik pada 'Tambah Gadget'.

kemudian Pilih HTML / Javascript

Sebuah jendela baru akan muncul, di kotak judul judul Ketik galeri Anda, dan di wilayah konten Copy dan Paste kode berikut :
<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>

Kemudian daripada Dari picture 4 Link Type Your Image Url,

dan jika Anda ingin membuat image link ke halaman lain atau url bukan # Tambahkan url target.

Setiap kali Anda ingin menambahkan foto baru ke galeri, ulangi saja kode ini.

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


Langkah ke 3 ------------------ SENYUM

Huft Mpe pusing palaku Postingnya hiks ....

sumber