Cara Membuat Images Slideshow Pada Dokumen HTMLPada posting sebelumnya saya share'Cara Membuat Link Gambar Berjalan Pada Dokumen HTML', sekarang saya lanjutkan dengan share'Cara Membuat Images Slideshow Pada Dokumen HTML'.

Images Slideshowadalah sekumpulan images(file gambar)yang terdiri dari dua file gambar atau lebih yang dikombinasikan dengan penggunaanJavascriptserta CSS(cascading style sheet)sehingga membentuk sebuah tampilan gambar yang dapat berganti-ganti(slideshow)yang waktu pergantian dari gambar satu ke gambar berikutnya(timing)sesuai dengan yang telah di atur dalamscript'nya.

Baiklah berikut ini cara membuatImages Slideshowpada sebuah dokumenHTML.

Langkah-langkah:

Cara Membuat Images Slideshow Pada Dokumen HTML:1. Jalankan aplikasitext editorseperti'notepad'untuk menulis sebuah dokumenHTML. Mungkinnotepadbawaanwindowskurang begitu menarik, solusinya Anda dapat menggunakan aplikasinotepad++yang dapat Anda download disini.

2. Penting!simpan dokumenHTMLdengan format'Nama_File.html'tanpa tanda kutip, kemudian pada'Save as type'Anda pilih'All files'agar dokumen yang Anda simpan menjadi dokumenHTMLbukan dokumentext biasa.

3. Sekarang mari kita mulai untuk membuatImages Slideshowpada dokumenHTMLseperti pada kotak di bawah ini.

Script Code:

Cara Membuat Images Slideshow Pada Dokumen HTML

$(document).ready(function() {$('#slider').s3Slider({timeOut: 3000});});

Title text 1
Content text...

Title text 2
Content text...

Title text 3
Content text...

Title text 4
Content text...

Title text 5
Content text...

Keterangan

1. Ganticss/style.cssdengan url tempat Anda menyimpan file css images slideshow (sudah ada di dalam file example).2. Gantijs/jquery-min.jsdengan url tempat Anda menyimpan file jquery-min.js (sudah ada di dalam file example).3. Gantijs/s3slider.jsdengan url tempat Anda menyimpan file s3slider.js (sudah ada di dalam file example).4. Gantihttp://www.amirabella-zone.blogspot.comdengan url link Anda.5. Pada attribute target_blankartinya target link akan ditampilkan pada tab baru apabila Anda menginginkan targetnya pada halaman yang sama maka ganti valuenya dengan_self, atau dapat jg dengan menghapus attributetarget="_blank".6. Gantiimages/1.jpg,images/2.jpg,images/3.jpg,images/4.jpg,images/5.jpgdengan url file images (gambar) Anda.7. GantiTitle text 1,Title text 2,Title text 3,Title text 4,Title text 5dengan Title yang Anda inginkan.8. GantiContent text..., dengan content text Anda.