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>
<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>
Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
