Membuat Image Slider Sederhana dengan Jquery

Kali ini kita akan membuat Image Slider (Slider Gambar) Sederhana ala Jquery dengan Judul dan Caption yang transparan. Jquery marupakan plugin yang menarik dan tidak membuat blog anda menjadi berat. Slider ini sangat mudah untuk diinstal karena hanya membutuhkan 4 langkah sederhana: Menambahkan Kode CSS, menambahkan jquery plugin, manambahkan java script, dan terakhir menambahkan widget slider. Demo Image Slider dapat dilihat DISINI. Jika anda udah gak sabar untuk membuatnya mari kita simak caranya berikut ini:

1. Klik Dashboard >> Design >> Edit HTML
2. Cari kode berikut ini ]]></b:skin> , kopi kode dibawah ini sebelum kode ]]></b:skin>

#gallery {
position:relative;
height:320px; /* Set Height */
width:540px; /* Set Width */
overflow:hidden;
}
#gallery a {
float:left;
position:absolute;
}
#gallery a img {
border:none;
}
#gallery a.show {
z-index:500;
}
#gallery .caption {
z-index:600;
background-color:#000;
color:#ffffff;
height:100px;
width:100%;
position:absolute;
bottom:0;
}
#gallery .caption .content {
margin:5px;
}
#gallery .caption .content h3 {
margin:0;
padding:0;
color:#1DCCEF;
}

3. Tambahkan kode dibawah ini sebelum kode </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'></script>

4. Tambahkan lagi kode dibawah ini sebelum kode </head>

<script type="text/javascript">
//<!--
$(document).ready(function() {
slideShow();
});
function slideShow() {
var dur= 5000;
$('#gallery a').css({opacity: 0.0});
$('#gallery a:first').css({opacity: 1.0});
$('#gallery .caption').css({opacity: 0.7});
$('#gallery .caption').css({width: $('#gallery a').find('img').css('width')});
$('#gallery .content').html($('#gallery a:first').find('img').attr('rel'))
.animate({opacity: 0.7}, 400);
setInterval('gallery()', dur);
}
function gallery() {
var current = ($('#gallery a.show')? $('#gallery a.show') : $('#gallery a:first'));
var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first'));
var caption = next.find('img').attr('rel');
next.css({opacity: 0.0})
.addClass('show')
.animate({opacity: 1.0}, 1000);
current.animate({opacity: 0.0}, 1000)
.removeClass('show');
$('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 });
$('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: '100px'},500 );
$('#gallery .content').html(caption);
}
//-->
</script>

5. Simpan template anda.
6. Pilih Design -- Page Element, lalu tambahkan "HTML JavaScript", letakan kode dibawah ini:

<div id="gallery">

<!-- Image Slide 1 and must have a class='show' -->
<a href="Link url" class="show">
<img src="Image url here" alt="" width="540" height="320" title="" alt="" rel="<h3>This is Title</h3> This is Description "/>
</a>

<!-- Image Slide 2 -->
<a href="Link Url" >
<img src="Image url here" alt="" width="540" height="320" title="" alt="" rel="<h3>This is Title</h3> This is Description "/>
</a>

<!-- You can add more n more images as link above -->

<div class="caption"><div class="content"></div></div>
<div style='clear:both;'/>
</div>

Keterangan:
"Link Url" ganti dengan link url yang anda inginkan
"Image url" ini url gambar dan gantikan tinggi dan panjang gambar sesuai keinginan anda
"This is Title" ganti ini dengan judul
"This is Description" ganti ini dengan deskripsi judul

7. Simpan widget anda.

Selamat mencoba!