Cara Membuat Simple JQuery Image Slide Show dengan Semi Transparent Caption 3

Image slide show adalah sebuah komponen dalam web desain yang cukup terkenal,dimana banyak website atau blog yang menampilkan berita utama dalam sebuah slide show untuk menarik perhatian pengunjung, tentu saja dengan caption atau kutipan.Ini adalah sebuah metode yang cukup bagus, bukan hanya untuk menarik minat pengunjung melainkan untuk membuat website atau blog menjadi lebih hidup.Nah jika anda tertarik untuk membuat slide show dengan caption atau kutipan (Simple JQuery Image Slide Show dengan Semi Transparent Caption) ikutilah langkah-langkah di bawah ini :

1. Seperti biasa anda harus log in dulu ke blogger
2. Pilih layout
3. Kemudian pilih edit HTML
4. Centang Expand Widget Templates dan backup dulu templete anda (untuk menghindari apabila terjadi kesalahan)
5. Copy code dibawah ini dan pastekan diatas code </head> atau di bawah code ]]></b:skin>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'> </script>
<script type='text/javascript'>
$(document).ready(function() {
//Execute the slideShow
slideShow();
});
function slideShow() {
//Set the opacity of all images to 0
$(&#39;#gallery a&#39;).css({opacity: 0.0});
//Get the first image and display it (set it to full opacity)
$(&#39;#gallery a:first&#39;).css({opacity: 1.0});
//Set the caption background to semi-transparent
$(&#39;#gallery .caption&#39;).css({opacity: 0.7});
//Resize the width of the caption according to the image width
$(&#39;#gallery .caption&#39;).css({width: $(&#39;#gallery a&#39;).find(&#39;img&#39;).css(&#39;width&#39;)});
//Get the caption of the first image from REL attribute and display it
$(&#39;#gallery .content&#39;).html($(&#39;#gallery a:first&#39;).find(&#39;img&#39;).attr(&#39;rel&#39;))
.animate({opacity: 0.7}, 400);
//Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
setInterval(&#39;gallery()&#39;,6000);
}
function gallery() {
//if no IMGs have the show class, grab the first image
var current = ($(&#39;#gallery a.show&#39;)? $(&#39;#gallery a.show&#39;) : $(&#39;#gallery a:first&#39;));
//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().hasClass(&#39;caption&#39;))? $(&#39;#gallery a:first&#39;) :current.next()) : $(&#39;#gallery a:first&#39;));
//Get next image caption
var caption = next.find(&#39;img&#39;).attr(&#39;rel&#39;);
//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0})
.addClass(&#39;show&#39;)
.animate({opacity: 1.0}, 1000);
//Hide the current image
current.animate({opacity: 0.0}, 1000)
.removeClass(&#39;show&#39;);
//Set the opacity to 0 and height to 1px
$(&#39;#gallery .caption&#39;).animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: &#39;1px&#39;}, { queue:true, duration:300 });
//Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
$(&#39;#gallery .caption&#39;).animate({opacity: 0.7},100 ).animate({height: &#39;100px&#39;},500 );
//Display the content
$(&#39;#gallery .content&#39;).html(caption);
}
</script>

6. Untuk css code anda bisa menggunakan code css di bawah ini copy dan pastekan diatas
]]></b:skin>

body{
font-family:arial
}
.clear {
clear:both
}
#gallery {
position:relative;
height:360px
}
#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;
}

Edit css kode di atas sesuai dengan yang anda inginkan jika perlu..
7. Dan untuk kode html,letakan kode html dibawah ini dimana anda ingin menampilkan slideshow tersebut.

<div id="gallery" >
<a href="http://cilimoes.blogspot.com/2009/01/cibulan_29.html#.UKwoGYesiSo" target="_top" class="show" >
<img src="http://my-slideshow.googlecode.com/files/cibulan.jpg" alt="Cibulan" width="580" height="360" title="" alt="Cibulan" rel="<h4>Cibulan</h4>Wisata Kolam Pemandian Yang Di Dalam Kolam Tersebut Terdapat Ikan Kancra Dewa Yang Konon Memiliki Unsur Mistis Dan 7 Sumur Yang Di yakini Airnya Bisa memeberikan Kesehatan Dan Keselamata. "/>
</a>
<a href="http://cilimoes.blogspot.com/2009/01/sangkan-hurip_29.html" target="_top">
<img src="http://my-slideshow.googlecode.com/files/air-panas-sankanhurip-alami-cilimes-blogspot.jpg" alt="Sangkanhurip_Alami" width="580" height="360" title="" alt="" rel="<h4>Sangkan Hurip Alami</h4>Pemandian Air Panas Di daerah sangkanHurip Cilimus Kuningan"/>
</a>
<a href="http://cilimoes.blogspot.com/2009/01/curug-sidomba.html" target="_top" >
<img src="http://my-slideshow.googlecode.com/files/curug-putri-cilimoes-blogspot.jpg" alt="Curug_putri" width="580" height="360" title="" alt="" rel="<h4>Curug Putri.</h4>Objek Wisata Air Terjun Didaerah Kuningan Jawabarat"/>
</a>
<a href="http://cilimoes.blogspot.com/2009/02/ciremai-butuh-5-miliar.html" target="_top">
<img src="http://my-slideshow.googlecode.com/files/ciremai-cilimoes-blogspot.jpg" alt="Gunung_Ciremai" width="580" height="360" title="" alt="" rel="<h4>Gunung Ciremai</h4>Gunung Yang Tertinggi Di Jawabarat Yang Sebagian Kakinya Berada Di Daerah Cilimus Kuningan Jawa barat."/>
</a>
<a href="http://cilimoes.blogspot.com/2009/01/cibulan_29.html" target="_top">
<img src="http://my-slideshow.googlecode.com/files/cibulan.jpg" alt="Cibulan" width="580" height="360" title="" alt="Cibulan" rel="<h4>Cibulan</h4>Wisata Kolam Pemandian Yang Di Dalam Kolam Tersebut Terdapat Ikan Kancra Dewa Yang Konon Memiliki Unsur Mistis Dan 7 Sumur Yang Di yakini Airnya Bisa memeberikan Kesehatan Dan Keselamata. "/>
</a>
<div class="caption"><div class="content"></div></div>
</div>
<div class="clear"></div>

Keterangan:
1.Ganti tulisan yang berwarna hijau dengan alamat Url Yang anda inginkan
2.Ganti tulisan yang berwarna orange denagan alamat Url dimana anda menyimpan file gambar anda
3.Ganti tulisan yang berwarna ungu dengan kata kata yang anda inginkan

Demo slide show disini

Selamat mencoba dan semoga bermanfaat...