Selasa, 04 Agustus 2009

Membuat teks berjalan (marquee)

Jika anda sering jalan-jalan untuk melihat blog orang lain (blog walking), pasti anda sering melihat terdapat teks atau gambar yang berjalan. nah, itulah yang akan saya bahas kali ini.
caranya cukup mudah. Jika anda ingin membuat teks berjalan, yang diperlukan hanya tag <marquee> dan tag penutupnya, yaitu </marquee>, --> <marquee>teks anda</marquee>.

contoh:
<marquee>Teks Berjalan</marquee>

Teks berjalan

Jika anda ingin memodifikasinya, anda dapat menambahkan
beberapa efek pada tag marquee nya. Beberapa kode yang umum dipakai adalah:
  • Untuk menentukan arah gerak:
Direction="left / right / up / down"
left: teks bergerak ke kiri
right: teks bergerak ke kanan
up: teks bergerak ke atas
down: teks bergerak ke bawah
  • Untuk mengatur perilaku gerakan:
    behavior="scroll / slide / alternate"
    scroll: teks bergerak berputar
    slide: teks bergerak satu kali lalu berhenti
    alternate: teks bergerak bolak-balik
    • Untuk mengubah warna background tempat teks berjalan:
    bgcolor="kode warna"
Kode warna dapat anda lihat disini



  • Untuk mengatur kecepatan gerakan:





  • scrollamount="angka"
    semakin besar angkanya, maka semakin cepat pula gerakannya.
    • Untuk mengatur waktu tunda gerakan:
    scrolldelay="angka"
    waktu tunda dalam milidetik
    • Untuk mengatur lebar tinggi kotak(lintasan teks):
    width="angka%"
    height="angka%"
    • efek tambahan:
    onmouseover="this.stop()" onmouseout="this.start()" ==>untuk membuat teks berhenti bergerak ketika kursor berada diatasnya.
    Daripada kelamaan bingung, nih saya kasih contoh-contohnya:
    • Marquee biasa:
    <marquee&ltgt;Marquee Biasa</marquee>
    Marquee biasa
    • Marque dengan efek arah geraknya:
    <marquee direction="left">Marquee bergerak ke kiri</marquee>
    Marquee bergerak ke kiri
    marquee bergerak ke kiri adalah default, jika anda tidak menambahkan kode direction="left", teks tetap bergerak ke kiri
    <marquee direction="right">Marquee bergerak ke kanan</marquee>
    Marquee bergerak ke kanan
    <marquee direction="up">Marquee bergerak ke atas</marquee>
    Marquee bergerak ke atas
    <marquee direction="down">Marquee bergerak ke bawah</marquee>
    Marquee bergerak ke bawah

    • Marquee dengan efek perilaku gerakannya:
    <marquee behavior="scroll" >Marquee bergerak berputar&lt/marquee>
    Marquee bergerak berputar
    marquee bergerak berputar adalah default. jika anda tidak menambahkan kode behavior="scroll", teks tetap bergerak berputar.
    <marquee behavior="slide">teks bergerak sekali lalu berhenti</marquee>
    teks bergerak sekali lalu berhenti
    <marquee behavior="alternate">teks bergerak bolak-balik&lt/marquee>
    teks bergerak bolak-balik
    • marquee dengan warna background yang berbeda:
    <marquee bgcolor#ff00ff">marquee dengan warna background berbeda</marquee>
    marquee dengan warna background berbeda
    • marquee dengan kecepatan gerakan yang berbeda:
    <marquee scrollamount="10">teks dengan kecepatan gerakan berbeda</marquee>
    teks dengan kecepatan gerakan berbeda
    • marquee dengan perubahan lebar bloks
    <marquee width="50%">lebar bloks=50%</marquee>
    lebar bloks=50%
    • marquee berhenti ketika kursor mouse berada di atasnya:
    <marquee onmouseover="this.stop()" onmouseout="this.start()">arahkan mouse ke sini</marquee>
    arahkan mouse ke sini
    • marquee dengan penggabungan efek:
    anda dapat menggabungkan beberapa atau semua efek menjadi satu.
    contoh:
    &ltmarquee bgcolor="#ff00ff" scrollamount="12" direction="right" behavior="alternate" onmouseover="this.stop()" onmouseout="this.start()" width="80%">marquee dengan penggabungan efek</marquee>
    marquee dengan penggabungan efek
    nah, sekarang anda sudah dapat berkreasi sendiri dengan teks anda.
    huh..cape juga..he2x

    2 komentar:

    1. sapa za nyang pnya blog ni....
      pliiz di perjelas tntang bkin read more...
      sya bingung...!@#$%^&*()_+-={}[]:';'<>?,./`~

      BalasHapus
    2. maaf..
      bingung yang mananya y??
      ok..akan saya cek lg..

      BalasHapus