Cara Membuat Galery Slideshow di Blog

Hallo apa kbr shobat semua?? kali ini Kak Imam akan menjelaskan tentang cara pembuatan Gallery Slideshow Dengan Javascript. Apa itu  Slideshow??
Oke.. untuk melihat contohnya silahkan klik disini 
Langsung saja ke proses pembuatan




Langkah Pembuatan :

1. Masuk Ke akun Blogger Anda
2. Klik Rancangan Pilih Edit Html
3. Cari Kode </head>
4. Lalu Copy Paste Kode Dibawah Ini Dan Letakan  Tepat diatas kode  </head>

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

<script type='text/javascript'>

//<![CDATA[

$(document).ready(function() {

slideShow(3000);

});

function slideShow(speed) {

$('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>');

//Script by www.kikiyo.co.cc

$('ul.slideshow li').css({opacity: 0.0});

$('ul.slideshow li:first').css({opacity: 1.0});

$('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title'));

$('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt'));

//Display the caption

$('#slideshow-caption').css({opacity: 0.7, bottom:0});

var timer = setInterval('gallery()',speed);

$('ul.slideshow').hover(

function () {

clearInterval(timer);

},

function () {

timer = setInterval('gallery()',speed);

}

);

}

function gallery() {

var current = ($('ul.slideshow li.show')? $('ul.slideshow li.show') : $('#ul.slideshow li:first'));

var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));

var title = next.find('img').attr('title');

var desc = next.find('img').attr('alt');

next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);

$('#slideshow-caption').animate({bottom:-70}, 300, function () {

//Display the content

$('#slideshow-caption h3').html(title);

$('#slideshow-caption p').html(desc);

$('#slideshow-caption').animate({bottom:0}, 500);

});

current.animate({opacity: 0.0}, 1000).removeClass('show');

}

//]]>

</script>

<style type='text/css'>

ul.slideshow {

list-style:none;

width:800px;

height:240px;

overflow:hidden;

position:relative;

margin:0;

padding:0;

font-family:Arial,Helvetica,Trebuchet MS,Verdana;

;

}

ul.slideshow li {

position:absolute;

left:0;

right:0;

}

ul.slideshow li.show {

z-index:500;

}

ul img {

width:800px;

height:240px;

border:none;

}

#slideshow-caption {

width:800px;

height:70px;

position:absolute;

bottom:0;

left:0;

color:#fff;

background:#000;

z-index:500;

}

#slideshow-caption .slideshow-caption-container {

padding:5px 10px;

z-index:1000;

}

#slideshow-caption h3 {

margin:0;

padding:0;

font-size:16px;

}

#slideshow-caption p {

margin:5px 0 0 0;

padding:0;

}

</style>

ket : Angka yang berwarna biru adalah ukuran permanen gambar, anda dapat menggantinya sesuai dengan ukuran tata letak web anda.

5. Klik Save
6. Selanjutnya klik Rancangan klik Tambah Gadget
7. Pilih HTML/Javascript lalu masukan script kode dibawah ini

<center>

<ul class="slideshow">

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUmDsm-gRzUPN-V-AA1c1b1fwvHVM9WYSYp3SIxOUjJeEurHAiOuvph-h_KblWjUiwSWKS2qhu-co4zQ9kXpV4incf_kA5t_Xe1CpuoeTuGiDcwG-Kce_aDf7KfgCFCTtz0HsPn1incmM/s1600/1.jpg" title="Gambar Slideshow 1" alt="Penjelasan Artikel Pada Gambar 1" /></a></li>

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOySPIUqZjZzv8GbMu0RE5YQR7n9iF_NaDSL88WTejF9tbq6gYv2I5_jXtvA3DApM6tc0HugIYrlG2OrKa7mE23vGTZoBrh2gDsn1xdEdTk6A3NVpuL_UGH13hLSWi3iKS0AQ-CdT4ML0/s1600/2.jpg" title="Gambar Slideshow 2" alt="Penjelasan Artikel Pada Gambar 2" /></a></li>

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMrW0bZpbR4SyTie8MAp059I0STl4Xn5BrxZVSCUroORNqwY2Mzg50lKbCQS99OPeCqmotwAJXCOshHq1U_c-VV-9qnZlgBxM_iBKUkfI0PolIgBl3kkyAOXOiet30kBmkpXKZmyFbD78/s1600/3.jpg" title="Gambar Slideshow 3" alt="Penjelasan Artikel Pada Gambar 3" /></a></li>

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-ERh5n2asnqnEYqzhgGQoBbNjxh37vxhB4PNTESQdrsjASHGgMlgm3kVUOWH5CEQet62fXGSV4wtClmooPr8dXpWieuBfgkoCUSLyiEoDVWarMTAja0Gjca0szPpX-mP7QG630K0o6-I/s1600/4.jpg" title="Gambar Slideshow 4" alt="Penjelasan Artikel Pada Gambar 4" /></a></li>

</ul>

<center/></center></center>

Huruf yang berwarna merah dapat anda ganti dengan alamat URL gambar anda
Huruf yang berwarna biru dapat anda ganti sesuai keterangan gambar

8. Klik Save
9. Dan Lihat hasilnya

Semoga Tutorial Blog Kak Imam Bermanfaat..