Cara Membuat Images Slideshow Pada Dokumen HTML

Pada 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 Slideshow adalah sekumpulan images !ile gambar" yang terdiri dari dua file gambar atau lebih yang dikombinasikan dengan penggunaan #a$as%ri&t serta CSS %as%ading st'le 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 dalam s%ri&t'n'a. Baiklah berikut ini cara membuat Images Slideshow pada sebuah dokumen HTML.

Langkah-langkah:
Cara Membuat Images Slideshow Pada Dokumen HTML:

1.

Jalankan

aplikasi te(t

editor seperti 'note&ad' untuk

menulis

sebuah

dokumen HTML.

ungkin note&ad bawaan windows kurang begitu menarik, solusinya !nda dapat menggunakan aplikasi note&ad)) yang dapat !nda download di sini.

".

Penting! simpan dokumen HTML dengan format 'Nama_File.html' tanpa tanda kutip, kemudian pada 'Sa$e as t'&e' !nda pilih '*ll !iles' agar dokumen yang !nda simpan menjadi dokumen HTML bukan dokumen te(t biasa.

#.

Sekarang mari kita mulai untuk membuat Images Slideshow pada dokumen HTML seperti pada kotak di bawah ini.

Script Code:
$%&'C()P* $html+ $head+ $title+ Cara html+

embuat

,mages

Slideshow

Pada

&okumen

-( . $/title+

$link rel01stylesheet1 $script src01js/j3uery-min.js1 $script src01js/s#slider.js1 $script

type01te2t/css1 href01css/style.css1 /+ type01te2t/ja4ascript1+$/script+ type01te2t/ja4ascript1+$/script+ type01te2t/ja4ascript1+

56document7.ready6function67 569:slider97.s#Slider68 time'ut; =7> =7> $/script+ $/head+ $body+ $%-- start images slideshow --+ $di4

8 #<<<

id01slider1+

$ul id01sliderContent1+ $li class01slider,mage1+ $a href01http;//www.amirabella-?one.blogspot.com1 target01@blank1 style01outline;none>1+$img src01images/A.jpg1 alt01A1 style01border;<>1/+$/a+ $span class01top1+$strong+(itle te2t A$/strong+$br /+Content te2t...$/span+ $/li+ $li class01slider,mage1+ $a href01http;//www.amirabella-?one.blogspot.com1 target01@blank1 style01outline;none>1+$img src01images/".jpg1 alt01"1 style01border;<>1 /+$/a+ $span class01top1+$strong+(itle te2t "$/strong+$br /+Content te2t...$/span+ $/li+ $li class01slider,mage1+ $a href01http;//www.amirabella-?one.blogspot.com1 target01@blank1 style01outline;none>1+$img src01images/#.jpg1 alt01#1 style01border;<>1 /+$/a+ $span class01bottom1+$strong+(itle te2t #$/strong+$br /+Content te2t...$/span+ $/li+ $li class01slider,mage1+ $a href01http;//www.amirabella-?one.blogspot.com1 target01@blank1 style01outline;none>1+$img src01images/B.jpg1 alt01B1 style01border;<>1 /+$/a+ $span class01bottom1+$strong+(itle te2t B$/strong+$br /+Content te2t...$/span+ $/li+ $li class01slider,mage1+ $a href01http;//www.amirabella-?one.blogspot.com1 target01@blank1 style01outline;none>1+$img src01images/C.jpg1 alt01C1 style01border;<>1 /+$/a+ $span class01top1+$strong+(itle te2t C$/strong+$br /+Content te2t...$/span+ $/li+ $di4 class01clear slider,mage1+$/di4+ $/ul+ $/di4+

$%-- // end images slideshow --+ $/body+ $/html+

Keterangan +, ., Ganti %ss-st'le,%ss dengan url tem&at *nda men'im&an !ile %ss images slideshow sudah ada di dalam !ile e(am&le", Ganti js-j/uer'0min,js dengan url tem&at *nda men'im&an !ile j/uer'0min,js sudah ada di dalam !ile e(am&le", Ganti js-s1slider,js dengan url tem&at *nda men'im&an !ile s1slider,js sudah ada di dalam !ile e(am&le", 2, 5, Ganti htt&3--www,amirabella04one,blogs&ot,%om dengan url link *nda, Pada attribute target 6blank artin'a target link akan ditam&ilkan &ada tab baru a&abila *nda menginginkan targetn'a &ada halaman 'ang sama maka ganti $aluen'a dengan 6sel!7 atau da&at jg dengan mengha&us attribute target896blank9, Ganti images-+,j&g7 images-.,j&g7 images-1,j&g7 images-2,j&g7images-5,j&g den gan url !ile images gambar" *nda, Ganti Title te(t +7 Title te(t .7 Title te(t 17 Title te(t 27 Title te(t 5dengan Title 'ang *nda inginkan, Ganti Content te(t,,,7 dengan %ontent te(t *nda,

1,

:,

;,

<,