Membuat Gallery Slideshow

 Kali ini saya akan menjelaskan tentang cara pembuatan Gallery Slideshow Dengan Javascript,

Oke..
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/AVvXsEj9Kw6YIseH7kMbLTM5u7e4ZYPsd9XP1NXdTRD8CdMdGRvHw9lm7RJUowZDXitkvGod-HJ14mIvMo2Fmoa7bsWgr3RNmk2Sjy94P7fUDOnA3Ks8CBViyD8ITCU1-EcJ24srHQinpNKiEFo/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/AVvXsEj_xK73puFhp7e8rW9-FaFlcUdvPlaqKa7SPrrcobMCAf1sEr0ALKXOhxUZaquQkDLE926SY8tlLt2zCnrOdkAcdr1q6nbfRaPou1V9w_mry5z_BMLFe4cEEdKwVEzeI9PciLEZHkhIPi0/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/AVvXsEgAh0Ht7FH0dt2CB16kspPGjNBMg8tuBZpzD6qX614fkmL4G8DefauYyIzZuvazu3Uqi-GjMJPvS4Cr1RvyuLg_YLHLJwTtNnGdvW5NC70zP3Xlnig3mn_jcWEu6VLGVUDnxttEn5-WNeM/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/AVvXsEiT1xQ1_ZOmymvAdsp0i2wruMHZbXCSUosex6gdAcP_hVgm1yrjnYkjBf5lLqetcf5h_9oex_Uv1O-r__TPwqbQz5HZxjvjYuhaYiFnokci17QdrLmWyX9svvDgfIafTC51D_DFbQz6pyQ/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

Selamat mencoba.....

• Cara Membuat ToolTips
• Buat Teks Neon
• Cara Pasang Loading Pda Blogger
• Buat Hujan Salju Dan Bunga Di Blog
• CARA BUAT TEXT AREA DI BLOG
• Cara Mengatur Huruf dan Warna
• Cara Setting Blog
• Cara Buat LINK
• Membuat Table Pada Blogger
• Cara Membuat Background Pada Judul Posting Ketika Label Di Klik
• Program Portable Untuk Laptop
• Mengembalikan FAT Setelah Di Format
• Efek Link Ditunjuk Membesar dan Berpijar
• Menambah Elemen Halaman Di Bawah Header Menjadi 3 Kolom
• Membuat Windows Sistem Menjadi Ali
• Memberi Efek Link Berwarna Warni
• Menghapus Data Virus Pada System Volume Information
• Cara Pasang Efek Kembang Api Di Blog
• Membuat Hujan Salju
• Membuat Crusor Di Ikuti Jam
• Membuat Animasi Flash di Blog
• Membuat Navigasi Bar
• Pasang Tombol Back To Top
• Membuat Gambar Melayang