Cara buat gallery dengan efek hover zooming

Cara buat gallery dengan efek hover zooming

ARTIKEL TERKAIT:

Cara buat gallery dengan efek hover zooming ini saya sangat terkesan sekali saat mencobanya, karena seperti sedang bermain puzzle geser sana geser sini. penasaran kan silakan dicoba sendiri saja.

caranya:
1. Login ke blogger kamu.
2. Klik Template.
3. Dan KLik tab Edit HTML.
4. Cari kode </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>

Catatan : Pada kode diatas terdapat kode javascript jQuery.

6. Simpan Template

Langkah selanjutnya kamu 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 kamu ingin menampilkan Gallery pada sidebar blog kamu. kamu tinggal menambah gadget. Perhatikan langkah berikut :

1. Klik Tata letak

2. Tambah Gadget

3. Pada jendela baru, kamu 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="URL ARTIKEL"><img src="URL GAMBAR" alt="" /></a></li>  <li><a href="URL ARTIKEL"><img src="URL GAMBAR" alt="" /></a></li>  <li><a href="URL ARTIKEL"><img src="URL GAMBAR" alt="" /></a></li>  <li><a href="URL ARTIKEL"><img src="URL GAMBAR" alt="" /></a></li>  <li><a href="URL ARTIKEL"><img src="URL GAMBAR" alt="" /></a></li>  <li><a href="URL ARTIKEL"><img src="URL GAMBAR" alt="" /></a></li> </ul>

Catatan :
•Silahkan kamu ganti Teks kapital tersebut URL ARTIKEL & URL GAMBAR pada kode HTML diatas.
•Setiap baris tag <li> adalah untuk satu gambar. Bila kamu ingin menambah satu gambar, kamu tinggal menambah  satu baris tag <li>.
5. Simpan.

Selamat mencoba dan Semoga bermanfaat....