Sunday, October 7, 2012

Kode HTML Untuk Marquee (Teks Berjalan)

Ngeblog atau mengelola blog bisa menjadi aktivitas yang mengasyikan. Apalagi jika kita mulai tertarik untuk mengutak-atik blog agar tampil lebih menarik.
Salah satu cara agar tampilan blog tampak menarik adalah dengan menampilkan marquee atau teks berjalan.
Secara umum marquee dapat dibuat dengan kode HTML:
<marquee>Kata yang ingin anda tampilkan</marquee>
Hasilnya seperti ini:
Kata yang ingin anda tampilkan


Secara default marquee bergerak dari kanan ke kiri. Anda dapat mengubah arahnya dengan menambahkan kode direction="right", direction="left", direction="up", atau direction="down".
Sehingga kode HTML yang anda tulis menjadi seperi ini:
<marquee direction="right">Kata yang ingin anda tampilkan</marquee>
Anda ubah "right" dengan "left", "up" atau "down"
    Hasilnya adalah seperti ini:
    Kata yang ingin anda tampilkan
    Kata yang ingin anda tampilkan
    Kata yang ingin anda tampilkan
    Kata yang ingin anda tampilkan

    Selain arah gerakan, Anda juga bisa menambahkan perilaku marquee dengan kode behavior="scroll", behavior="alternate", behavior="slide". "scroll" untuk perilaku normal bergerak dari satu arah ke arah yang lain, "alternate" untuk perilaku bergerak dari satu arah ke arah lain dan kembali ke arah semula, "slide" untuk perilaku bergerak dari satu arah ke arah yang lain dan berhenti.
    Kode yang Anda buat seperti ini:
    <marquee behavior="scroll">Kata yang ingin anda tampilkan</marquee>
    <marquee behavior="alternate">Kata yang ingin anda tampilkan</marquee>
    <marquee behavior="slide">Kata yang ingin anda tampilkan</marquee> 

    Hasilnya seperti ini:
    Kata yang ingin anda tampilkan
    Kata yang ingin anda tampilkan
    Kata yang ingin anda tampilkan

    Selain arah dan perilaku, Anda juga bisa menambahkan hal-hal berikut pada marquee:

    1. Kecepatan dengan menambahkan kode scrollamount="2". Angka 2 bisa anda ganti dengan angka lain. Semakin besar angka, semakin cepat berjalannya teks.
    2. Lebar lintasan marquee dengan menambahkan kode width="70%" (menggunakan prosentase halaman blog/web) atau width="150" (menggunakan ukuran pixel).
    3. Tinggi lintasan dengan kode height="100". Angka 100 silakan anda ganti dengan angka lain dan lihat efeknya.
    4. Warna latar dengan kode bgcolor="red". Warnanya bisa diganti dengan warna lain. Silakan langsung praktek.
    5. Warna dan jenis huruf bisa anda gunakan kode <font face="arial" color="blue"><marquee>Kata yang ingin anda tampilkan</font></marquee>
    Sebagai hasil perpaduan kode tersebut misalnya seperti ini:
    <marquee bgcolor="black" scrollamount="6" width="100%" behavior="alternate"><font face="verdana" color="magenta">Silakan praktekkan sendiri</font></marquee>

    Dan ini hasilnya:
    Silakan praktekkan sendiri

    No comments:

    Post a Comment