Membuat Keterangan Pada Gambar Dengan JQuery ~ http://syamsudinnamaku.blogspot.com

Maksud dari tutorial kali ini adalah membuat keterangan
pada gambar yang kita tampilan. Manakala cursor
diletakkan tepat di atas gambarnya, maka akan muncul
deretan tulisan di bagian atas dan bawah gambar tersebut
sebagai penjelasan dari gambar yang dimaksud. Dengan
adanya efek transparan pada background tulisan
keterangannya, membuat gambar dan tulisannya semakin
menarik untuk dilihat dan menjadi suatu perpanduan
gambar dan tulisan yang kontras.
Untuk DEMOnya bisa anda lihat di sini.

Untuk membuatnya, langkahnya adalah :

1.   Rancangan -> Tambah Gadget ->
      pilih HTML/JavaScript.

2.   Letakkan ke dalam kontennya,
    kode berikut ini :

KETERANGAN :

Gantilah gambarnya dengan gambar milik anda.

Sesuai juga ukuran gambar anda tersebut pada kode

width="360px" height="270px"

Ganti juga tulisan keterangan atas & bawahnya
dengan kalimat yang anda inginkan.

3.   Lalu masuklah ke Edit HTML

4.   Cari kode </b:skin>

5.   Letakkan di atas kode </b:skin> ini
    kode yang di bawah ini :

Copy Kode

.img {
/* relative position, so that objects in it can be positioned inside this container */
position:relative;
font-family:arial;   
/* hide those extra height that goes beyong the size of this container */
overflow:hidden;
border:5px solid #000000;
width:360px;
height:270px;
}   
.img .heading, 
.img .caption {
/* position inside the container */
position:absolute;
background:#0000ff;
height:50px;
width:360px;
/* transparency for different browsers */
/* i have shared this in my CSS tips post too */
opacity:0.8;
filter:alpha(opacity=80); 
-moz-opacity:0.8;   
-khtml-opacity: 0.8; 

}
.img .heading {
/* hide it with negative value */
/* it's the height of heading class */
top:-50px;
}

.img .caption {        
/* hide it with negative value */
/* it's the height of bottom class */
bottom:-50px;       
}

/* styling of the classes*/
.img .heading span {

color:#00ffff;   
top:-50px;
font-weight:bold;
align:center;
display:block;
padding:5px 0 0 10px;
}
.img .caption span{
color:#ffffff;   
font-size:12px;
align:center;
display:block;
padding:5px 10px 0 10px;
}

KETERANGAN :

Ubah ukuran gambarnya, sesuaikan
dengan ukuran gambar anda pada kode :

width:360px;

height:270px;

Ubah juga warna, tinggi & lebar background
transparantnya pada kode :

background:#0000ff;

height:50px;

width:360px;

4.   Cari lagi kode </head>

5.   Letakkan di atas kode </head> ini
    kode yang berikut ini,
    lalu simpan template anda.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript">
</script>

<script>
$(document).ready(function () {

// transition effect
style = 'easeOutQuart';

// if the mouse hover the image
$('.img').hover(
function() {
//display heading and caption
$(this).children('div:first').stop(false,true).animate({top:0},{duration:200, easing: style});
$(this).children('div:last').stop(false,true).animate({bottom:0},{duration:200, easing: style});
},

function() {
//hide heading and caption
$(this).children('div:first').stop(false,true).animate({top:-50},{duration:200, easing: style});
$(this).children('div:last').stop(false,true).animate({bottom:-50},{duration:200, easing: style});
}
);

});
</script>

Selamat mencoba, good luck!