1 Cara buat gallery dengan efek hover zooming

Cara buat gallery dengan efek hover zooming 

Caranya Sebagai berikut :
 1. Login ke blogger dengan ID anda.
 2. Klik Rancangan.
 3. Dan KLik tab Edit HTML.
 4. Cari kode di bawah ini atau yang mirip dengan kode ini  </head>
 5. Copy kode di bawah ini dan taruh sebelum kode </head>

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

//Larger thumbnail preview

$("ul.thumb li").hover(function() {
 $(this).css({'z-index' : '1000'});
 $(this).find('img').addClass("hover").stop()
  .animate({
   marginTop: '-90px',
   marginLeft: '-90px',
   top: '50%',
   left: '50%',
   width: '174px',
   height: '174px',
   padding: '1px'
  }, 200);

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

//Swap Image on Click
 $("ul.thumb li a").click(function() {
 
  var mainImage = $(this).attr("href"); //Find Image Name
  $("#main_view img").attr({ src: mainImage });
  return false; 
 });

});
</script>
<style type="text/css">
body {
 font: Arial, Helvetica, sans-serif normal 10px;
 margin: 0; padding: 0;
}
* {margin: 0; padding: 0;}
img {border: none;}

ul.thumb {
 float: left;
 list-style: none;
 margin: 20; padding: 20px;
 width: 360px;
}
ul.thumb li {
 margin: 0; padding: 5px;
list-style:none;
 float: left;
 position: relative;
 width: 110px;
 height: 110px;
}
ul.thumb li img {
 width: 100px; height: 100px;
 border: 1px solid #ddd;
 padding: 5px;
 background: #f0f0f0;
 position: absolute;
 left: 0; top: 0;
 -ms-interpolation-mode: bicubic;
}
ul.thumb li img.hover {
 background:url(thumb_bg.png) no-repeat center center;
 border: none;
z-index: 1500;
}
#main_view {
 float: left;
 padding: 9px 0;
 margin-left: -10px;
}
</style>
6. Simpan Template

Langkah selanjutnya anda tinggal menambahkan kode dibawah ini pada saat menulis artikel, jangan lupa tambahkan kode pada bagian Edit HTML . Cara ini bila gallery akan ditampilkan pada halaman posting. 

Tapi bila anda ingin menampilkan Gallery pada sidebar blog anda. Berrarti anda tinggal menambah gadget. Perhatikan langkah berikut :

  1. Klik Rancangan dan pilih Elemen Laman

  2. Tambah Gadget

  3. Pada jendela baru anda Anda pilih gadget HTML/JavaScript

  4. Copy dan paste kode dibawah ini pada gadget tersebut :

        <ul class="thumb">

 <li><a href="ULR ARTIKEL"><img src="ULR GAMBAR" alt="" /></a></li>

 <li><a href="ULR ARTIKEL"><img src="ULR GAMBAR" alt="" /></a></li>

 <li><a href="ULR ARTIKEL"><img src="ULR GAMBAR" alt="" /></a></li>

 <li><a href="ULR ARTIKEL"><img src="ULR GAMBAR" alt="" /></a></li>

 <li><a href="ULR ARTIKEL"><img src="ULR GAMBAR" alt="" /></a></li>

<li><a href="ULR ARTIKEL"><img src="ULR GAMBAR" alt="" /></a></li>

<li><a href="ULR ARTIKEL"><img src="ULR GAMBAR" alt="" /></a></li>

<li><a href="ULR ARTIKEL"><img src="ULR GAMBAR" alt="" /></a></li>

 <li><a href="ULR ARTIKEL"><img src="ULR GAMBAR" alt="" /></a></li>

</ul>

Catatan :

• Silahkan anda ganti Teks berwarna MERAH dan BIRU pada kode HTML diatas.
• Setiap baris tag <li> adalah untuk satu gambar. Bila anda ingin menambah satu gambar, anda tinggal menambah  satu baris tag <li>

 5. Simpan.

Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

Date	: 06.13
Category	:
Author	: BINTANG PDG
Share	: Tweet Print
Responds	: 1 Comment

Ditulis Oleh : BINTANG PDG ~ Indahnya Berbagi

Anda sedang membaca sebuah artikel yang berjudul Cara buat gallery dengan efek hover zooming, Semoga artikel tersebut bermanfaat untuk anda .... Mohon beritahu saya jika anda menemukan ada link yang erorr pada blog ini Terima kasih..

:: Thank you for visiting ! ::

Artikel Terkait :