Sunday, March 10, 2013

Cara Membuat Images Slideshow Pada Dokumen HTML

6:38 AM    No comments

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 (file gambar) yang terdiri dari dua file gambar atau lebih yang dikombinasikan dengan penggunaan Javascript serta 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 dalam script'nya.

Artikel terkait: Cara Membuat Images Slider Tanpa Jquery

Baiklah berikut ini cara membuat Images Slideshow pada sebuah dokumen HTML.


Langkah-langkah:

Cara Membuat Images Slideshow Pada Dokumen HTML:

  1. Jalankan aplikasi text editor seperti 'notepad' untuk menulis sebuah dokumen HTML. Mungkin notepad bawaan windows kurang begitu menarik, solusinya Anda dapat menggunakan aplikasi notepad++ yang dapat Anda download di sini.

  2. Penting! simpan dokumen HTML dengan format 'Nama_File.html' tanpa tanda kutip, kemudian pada 'Save as type' Anda pilih 'All files' agar dokumen yang Anda simpan menjadi dokumen HTML bukan dokumen text biasa.

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

    4. Script Code:
    <!DOCTYPE html>

    <html>

    <head>
    <title> Cara Membuat Images Slideshow Pada Dokumen HTML </title>

    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <script src="js/jquery-min.js" type="text/javascript"></script>
    <script src="js/s3slider.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    $('#slider').s3Slider({
    timeOut: 3000
    });
    });
    </script>

    </head>

    <body>

    <!-- start images slideshow -->

    <div id="slider">
    <ul id="sliderContent">
    <li class="sliderImage">
    <a href="http://www.amirabella-zone.blogspot.com" target="_blank" style="outline:none;"><img src="images/1.jpg" alt="1" style="border:0;"/></a>
    <span class="top"><strong>Title text 1</strong><br />Content text...</span>
    </li>
    <li class="sliderImage">
    <a href="http://www.amirabella-zone.blogspot.com" target="_blank" style="outline:none;"><img src="images/2.jpg" alt="2" style="border:0;" /></a>
    <span class="top"><strong>Title text 2</strong><br />Content text...</span>
    </li>
    <li class="sliderImage">
    <a href="http://www.amirabella-zone.blogspot.com" target="_blank" style="outline:none;"><img src="images/3.jpg" alt="3" style="border:0;" /></a>
    <span class="bottom"><strong>Title text 3</strong><br />Content text...</span>
    </li>
    <li class="sliderImage">
    <a href="http://www.amirabella-zone.blogspot.com" target="_blank" style="outline:none;"><img src="images/4.jpg" alt="4" style="border:0;" /></a>
    <span class="bottom"><strong>Title text 4</strong><br />Content text...</span>
    </li>
    <li class="sliderImage">
    <a href="http://www.amirabella-zone.blogspot.com" target="_blank" style="outline:none;"><img src="images/5.jpg" alt="5" style="border:0;" /></a>
    <span class="top"><strong>Title text 5</strong><br />Content text...</span>
    </li>
    <div class="clear sliderImage"></div>
    </ul>
    </div>

    <!-- // end images slideshow -->

    </body>
    </html>

    Keterangan

    1. Ganti css/style.css dengan url tempat Anda menyimpan file css images slideshow (sudah ada di dalam file example).
    2. Ganti js/jquery-min.js dengan url tempat Anda menyimpan file jquery-min.js (sudah ada di dalam file example).
    3. Ganti js/s3slider.js dengan url tempat Anda menyimpan file s3slider.js (sudah ada di dalam file example).
    4. Ganti http://www.amirabella-zone.blogspot.com dengan url link Anda.
    5. Pada attribute target _blank artinya 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 attribute target="_blank".
    6. Ganti images/1.jpg, images/2.jpg, images/3.jpg, images/4.jpg, images/5.jpg dengan url file images (gambar) Anda.
    7. Ganti Title text 1, Title text 2, Title text 3, Title text 4, Title text 5 dengan Title yang Anda inginkan.
    8. Ganti Content text..., dengan content text Anda.

     

    Baca juga: Cara Memasukkan Playlist Lagu Pada Dokumen HTML

    Screenshot Images Slideshow

    Download Example Here


Nb. Silahkan beri feed back pada kotak komentar di bawah!


Bagikan posting ini di:
Comments
0 Comments

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)

 
Related Posts Amirabella-Zone