Cara Buat Gallery Dengan Efek Zooming

Gallery yang ini lebih menarik dan cara kerjanya juga lebih enak dipandang. Cara membuatnya, selain menggunakan fitur Css dan beberapa Html juga menggunakan jQuery. Untuk cara penerapannya juga sangat mudah, anda tinggal ikuti langkah -langkah mudah yang ada dibawah, Dan bila anda ingin menambahkan jumlah gambar pada gallery ini, anda tinggal menambahkannya pada bagian Html.

• target="_blank">
• target="_blank">
• 
• target="_blank">
• target="_blank">
• 
• target="_blank">
• 
• 

Bila anda berminat memasang gallery ini, silahkan ikuti langkah - langkah dibawah ini. Tapi ingat, gadget ini juga menggunakan jQuery ya.... :
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>

Catatan : Pada kode diatas terdapat kode javascript jQuery.

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.