Kode HTML Membuat Tulisan Berjalan (Marquee)

Marquee adalah suatu perintah dalam HTML untuk membuat teks bisa bergerak atau berjalan. Kalau pada kehidupan sehari-hari dapat kita lihat pada papan LED Running Text yang umum ada di Counter HP berisi Tulisan informasi yang bergerak statis secara beraturan.

Berikut beberapa jenis Marquee atau Running Text yang dapat diaplikasikan pada laman postingan atau sebagai Widget pada blog :

1. Marquee ini tipe Standar, dimana hanya berisikan tulisan yang berjalan statis secara berkala.

TULISAN BERJALAN

<marquee>TULISAN BERJALAN</marquee>

2. Marquee jenis ini berbeda sedikit dengan yang pertama, dimana setelah 2 kali tampilan maka tulisan akan tidak muncul lagi. Hitungan dapat diubah dengan menggantikan angka 2 pada "loop="2" dengan angka yang diinginkan.

MARQUEE AKAN BERPUTAR 2 KALI LALU MENGHILANG

<marquee loop="2">MARQUEE AKAN BERPUTAR 2 KALI LALU MENGHILANG</marquee>

3.Jika teks bergerak terlalu cepat, marquee jenis ini yang sesuai dengan keinginan kita. Marquee ini diatur untuk teks dapat berjalan lebih lambat dari semestinya dengan mengubah nilai "scrolldelay" dengan angka yang diingikan. Satuannya dalam mili detik sehingga semakin besar angkanya maka akan semakin lambat teks nya berjalan.

TEKS BERJALAN DAN DELAY SELAMA 1 DET

<marquee scrolldelay="1000">TEKS BERJALAN DAN DELAY SELAMA 1 DET</marquee>

4. Marquee ini merupakan marquee jenis standar dengan tambahan latar belakang berwarna dijalur teks berjalan. Warna nya dapat disesuaikan dengan mengganti "bgcolor" dengan warna yang diinginkan.

TEXT DENGAN BACKGROUND KUNING

<marquee bgcolor="yellow">TEXT DENGAN BACKGROUND KUNING</marquee>

5. Marquee ini kebalikan dengan jenis yang ketiga, jika sebelumnya diperlambat, maka disini dapat diatur menjadi lebih cepat dari semestinya, dengan mengubah angka "scrollamount" dengan angka yang diingikan. Dimana semakin besar angka nya, maka teks bergerak menjadi lebih cepat.

Kecepatan Tulisan berjalan 100

<marquee scrollamount="100">Kecepatan Tulisan berjalan 100</marquee>

6. Marquee ini kebalikan dari marquee jenis standar dimana perbedaan terletak pada arah pergerakan tulisannya. Jika pada tipe standar bergerak dari kanan ke kiri. Maka dengan penambahan kode "Direction" ke kanan, tulisan menjadi bergerak dari kiri ke kanan.

TEKS BERJALAN KE KANAN

<marquee direction="right">TEKS BERJALAN KE KANAN</marquee>

7. Masih hampir sama dengan marquee yang sebelumnya, dengan menggantikan arah menjadi "UP" maka tulisan berubah gerakannya menjadi dari bawah ke atas.

TEKS BERJALAN KE ATAS

<marquee direction="up">TEKS BERJALAN KE ATAS</marquee>

8. Marquee jenis ini merupakan marquee standar yang luas pergerakannya dibatasi menjadi 50% dari luas halaman yang tersedia. Luas nya dapat diubah dengan menggantikan angka 50% pada "Width" dengan angka yang diinginkan.

LEBAR MEDIA 50 %

<marquee width="50%">LEBAR MEDIA 50 %</marquee>

9. Marquee ini sedikit modifikasi dari marquee standar dimana dapat disematkan pesan pada tulisan yang bergerak. Pesan dapat dimunculkan dengan mengarahkan kursor pada tulisan yang bergerak tersebut.

MARQUEE berisi pesan tertentu

<marquee title="M Dermawan S Blog | Semangat !!!">MARQUEE berisi pesan tertentu</marquee>

10. Marquee ini diatur agar pergerakannya dapat memantul atau berpindah statis dari kiri ke kanan dan sebaliknya ketika sampai pada sisi kanan dan kiri batas. Tidak menghilang dan muncul seperti jenis standarnya.

MARQUEE MEMANTUL

<marquee behavior="alternate">MARQUEE MEMANTUL</marquee>

11. Marquee jenis ini modifikasi dari MARQUEE MEMANTUL dimana dengan penambahan "onmouseover="this.stop()" onmouseout="this.start()" maka tulisan akan berhenti ketika kursor mengenai tulisan yang bergerak tersebut dan bergerak kembali ketika kursor dipindahkan dari tulisan.

TULISAN BOLAK BALIK

<marquee behavior="alternate" onmouseover="this.stop()" onmouseout="this.start()">TULISAN BOLAK BALIK</marquee>

12. Marquee ini modifikasi dari marquee sebelumnya dengan penambahan tautan link. Dimana link laman tujuan dapat disesuaikan dengan mengisi "href="" dengan link yang diinginkan.

TEST LINK DENGAN KLIK DISINI

<marquee behavior="alternate" onmouseover="this.stop()" onmouseout="this.start()"><a href="https://muhammaddermawansusanto.blogspot.com/">TEST LINK DENGAN KLIK DISINI</a></marquee>

13. Marquee jenis ini adalah tipe yang agak kompleks, dimana kita dapat menyesuaikan warna latar belakang, jenis huruf, ukuran huruf, serta warna huruf sesuai dengan yang diinginkan.

TEKS BERJALAN WARNA LATAR BIRU

<marquee bgcolor="blue" style="font-family:arial; font-size:20px; color:#ffffff;">TEKS BERJALAN WARNA LATAR BIRU</marquee>

Masih banyak lagi jenis Marquee yang dapat dibuat dengan menyatukan beberapa bagian dari jenis-jenis marquee yang sudah ada diatas, karena pada dasarkan Marquee adalah perintah HTML yang tiap kode berfungsi untuk tugasnya masing-masing maka dengan kombinasi kode yang sesuai akan kita temukan jenis marquee lainnya.

Selamat Mencoba !!!