Cara Membuat Gambar SlideShow di Blog / Website

Untuk beberapa kategori blog atau website, pemakaian gambar slide show pada blog / website sangat diperlukan, disamping untuk mempercantik penampilan blog / website itu sendiri, ada beberapa alasan kenapa gambar slide show sangat diperlukan dalam tampilan blog / website.

Untuk blog / kategory Movie misalnya, hal ini diperlukan, agar penyampaian isi konten dalam blog / website dapat tersampaikan kepada para pengunjung blog / web tersebut, begitu juga dengan blog / website dari sebuah perusahaan, penggunaan gambar slide show banyak diaplikasikan. Lalu bagaimana cara membuat  atau memasang gambar slide show di blog atau website? ada banyak cara diantaranya dengan menggunakan gambar dengan format Flash, bisa juga dengan menggunakan script / kode HTML / Javascript tertentu.

Kini HTML 5 telah mendukung penggunaan gambar slide show dengan menggunakan kode script tanpa harus menggunakan gambar dengan format file flash. Nah untuk kali ini saya akan berbagi panduan cara membuat gambar slide show dengan kode html / javascript pada blogger.

Langkah-langkahnya sebagai berikut :

1. Siapkan beberapa gambar dengan ukuran tertentu sesuai dengan kebutuhan anda.

2. Upload gambar-gambar tersebut di media penyimpanan online (anda dapat menyimpan gambar dipicasaweb.google.com).

3. Catat url link dari masing-masing gambar yang sudah anda upload tersebut.

4. Masuk / Login ke Blog anda. (Blogger)

5. Pilih "Template" >> Klik "Edit HTML" >> beri tanda centang pada "Expand Template Widget".

6. Untuk keamanan jika terjadi kesalahan sebaiknya anda "COPY" terlebih dahulu script HTML anda dan "PASTE" kan ke dalam NOTEPAD untuk backup.

7. Cari kode </head> pada bidang HTML template blog anda (gunakan tombol "Ctrl+F" untuk memudahkan pencarian)
8. Masukkan kode script berikut tepat diatas kode </head>

Kode Script-1 : 

<br />

<br />

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

<script type='text/javascript'>

//<![CDATA[

$(document).ready(function() {

//Execute the slideShow, set 6 seconds for each images

slideShow(3000);

});

function slideShow(speed) {

//append a LI item to the UL list for displaying caption

$('ul.slideshow').append('

<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container">

<h3>

</h3></div></li>

');

//Set the opacity of all images to 0

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

//Get the first image and display it (set it to full opacity)

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

//Get the caption of the first image from REL attribute and display it

$('#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});

//Call the gallery function to run the slideshow

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

//pause the slideshow on mouse over

$('ul.slideshow').hover(

        function () {

                clearInterval(timer);

        },

        function () {

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

        }

);

}

function gallery() {

//if no IMGs have the show class, grab the first image

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

//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().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));

//Get next image caption

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

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

//Set the fade in effect for the next image, show class has higher z-index

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

//Hide the caption first, and then set and display the caption

$('#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);

});

//Hide the current image

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

}

//]]>

</script><br />

<style type="text/css">

ul.slideshow {

list-style:none;

width:500px;        // ukuran lebar gambar

height:200px;       // ukuran tinggi gambar

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:500px;

height:200px;

border:none;

}

#slideshow-caption {

width:500px;

height:60px;

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><br />

<br />

9. "Simpan Template" blog anda.

10. Sekarang beralih ke menu "Tata Letak"

      >> Klik "Tata Letak" >> Klik "Tambahkan Widget" >> pilih "HTML / JAVASCRIPT".

11. Masukkan kode script berikut kedalam bidang widget "HTML / Javascript" tersebut.

Kode script -2

<br />

<br />

<ul class="slideshow"><li><a href="http://url link tujuan"><img src="http://Url gambar-1" title="Judul Slideshow 1" alt="Masukan Deskripsi Gambar-1 Slideshow Disini" /></a></li>

<li><a href="http://url link tujuan"><img src="http://Url gambar-2" title="Judul Slideshow 2" alt="Masukan Deskripsi Gambar-2 Slideshow Disini" /></a></li>

<li><a href="http://url link tujuan"><img src="http://Url gambar-3" title="Judul Slideshow 3" alt="Masukan Deskripsi Gambar-3 Slideshow Disini" /></a></li>

<li><a href="http://url link tujuan"><img src="http://Url gambar-4" title="Judul Slideshow 4" alt="Masukan Deskripsi Gambar-4 Slideshow Disini" /></a></li>

</ul><br />

<br />

Keterangan :

- Untuk kode script-2 silahkan atur size / ukuran gambar sesuai dengan ukuran gambar yang sudah anda   upload tadi.

- Untuk kode script-2 sulahkan atur Url link gambar sesuai dengan url masing-masing gambar anda yang sudah anda simpan di media penyimpanan online tadi.

Preview / Demo gambar slide show dapat anda lihat DISINI>>

Demikian tutorial cara membuat gambar slideshow pada blog, semoga bermanfaat.

Jangan lupa tinggalkan komentar anda untuk artikel ini dan komentar anda akan tampil di semua halaman pada side bar blog ini dan juga di HALAMAN INI >>
Jika ingin bertukar link dengan DEJAVANTA BLOG silahkan klik BACKLINKS GENERATOR >>
Website atau Blog anda juga akan tampil di DEJAVANTA BLOG seperti daftar nama-nama website dan Blog di HALAMAN INI >>

Lumayan kan bisa nambah rating blog anda !!!