Wednesday, March 6, 2013

Cara Membuat Link Gambar Berjalan Pada Dokumen HTML

Cara Membuat Link Gambar Berjalan Pada Dokumen HTML

Pada posting sebelumnya saya share 'Adobe Creative Suite CS2 Full Serial', sekarang saya lanjutkan dengan share 'Cara Membuat Link Gambar Berjalan Pada Dokumen HTML'.

Link Gambar Berjalan adalah sebuah link dalam bentuk gambar yang dikombinasikan dengan 'tag marquee' sehingga membentuk sebuah link yang berupa gambar berjalan (Images Link with Marquee). Fungsi dari Link Gambar Berjalan ini yaitu untuk membuat atau menyusun beberapa link agar tampak lebih menarik. Tujuannya adalah untuk mendapatkan perhatian orang yang melihatnya sekaligus mempercantik tampilan (layout) dokumen HTML yang kita buat.

Baiklah berikut ini cara membuat Link Gambar Berjalan pada sebuah dokumen HTML.


Langkah-langkah:

Cara Membuat Link Gambar Berjalan 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 Link Gambar Berjalan pada dokumen HTML seperti pada kotak di bawah ini.

  4. Script Code:
    <!DOCTYPE html>

    <html>

    <head>
    <title> Cara Membuat Link Gambar Berjalan Pada Dokumen HTML </title>
    </head>

    <body>

    <!-- Di bawah ini adalah script link gambar berjalan -->
    <marquee behavior="alternate" direction="left" scrollamount="3" onmouseover="stop();" onmouseout="start();">
    <span style="padding: 0px;">
    <a href="Link_1" target="_blank" style="text-decoration:none;outline:none;" title="Title_1">
    <img src="Gambar_1" border="0">
    </a>
    </span>
    <span style="padding: 0px;">
    <a href="Link_2" target="_blank" style="text-decoration:none;outline:none;" title="Title_2">
    <img src="Gambar_2" border="0">
    </a>
    </span>
    <span style="padding: 0px;">
    <a href="Link_3" target="_blank" style="text-decoration:none;outline:none;" title="Title_3">
    <img src="Gambar_3" border="0">
    </a>
    </span>
    </marquee>
    <!-- // Akhir dari script link gambar berjalan -->

    </body>
    </html>

    Keterangan

    1. Ganti Link_1, Link_2, dan Link_3 dengan 'link' Anda.
    2. Ganti Title_1, Title_2, dan Title_3 dengan 'Title' Anda.
    3. Ganti Gambar_1, Gambar_2, dan Gambar_3 dengan 'File Gambar' Anda.
    4. Pada attribute behavior, Anda dapat merubahnya dengan 'scroll atau slide'.
    5. Pada attribute direction, Anda dapat merubahnya dengan 'right, down', atau up'.
    6. Pada attribute scrollamount, Anda dapat merubah value'nya dengan angka yang Anda inginkan.

    Contoh Link Gambar Berjalan

    Download Example Here


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


Bagikan posting ini di:
Comments
2 Comments

2 comments:

  1. Trim's yah kebetulan aku lagi cari cara buat slide berjalan kesamping, aku coba dulu yah & mohon izin copy scripnya.

    ReplyDelete

 
Related Posts Amirabella-Zone