Tutorial Lengkap Cara Membuat Text Berjalan (Marquee)

Adanya tulisan berjalan di blog mempercantik tampilan. Dengan alasan inilah banyak blog atau website yang menaruh tulisan di blognya, baik itu di homepage ataupun di postingan.

Di sini Saya akan menjelaskan secara singkat bagaimana cara membuat tulisan berjalan di blog dengan berbagai variasi. Ada yang berjalan ke atas, ke bawah, ke kiri, ke kanan. Ada yang berjalan zig-zag, ada yang berjalan memantul, ada yang jalannya berhenti ketika disorot mouse dan lanin-lain.

Kalian bisa mengeditnya sendiri untuk disesuaikan dengan blog atau website Sendiri. Dengan sedikit kemampuan edit HTML akan mempercantik tampilan tulisan berjalan Kalian.

Kode dasar untuk membuat marquee atau teks berjalan

<marquee>TULISAN INI AKAN BERGERAK</marquee>

Kode di atas akan terlihat seperti ini:

Tapi selain kode di atas ada beberapa tambahan kode yang bisa anda berikan untuk membuat variasi dari marquee. Di bawah ini kita akan berikan kodenya dan sekaligus mempraktikkan marquee tersebut....

kode direction="left/right/up/down" digunakan untuk mengatur arah pergerakan running text

Contoh kode:

<marquee direction="right">TULISAN INI AKAN BERGERAK KE KANAN</marquee><marquee direction="up">TULISAN INI AKAN BERGERAK KE ATAS</marquee>

Hasilnya akan terlihat seperti ini:

kode behavior="scroll/slide/alternate" digunakan untuk mengatur type pergerakan

1. Scroll jika ingin teks bergerak terus ke suatu sisi dan muncul dari sisi lain
2. Slide jika ingin teks bergerak sekali kemudian berhenti dan diulangi lagi
3. Alternate jika ingin teks terlihat memantul/bouncing dari ujung kembali ke ujung.
   
   Contoh kode:
   

   
   <marquee behavior="scroll">MARQUEE BERGERAK SCROLL</marquee><marquee behavior="alternate">MARQUEE BERGERAK BOLAK-BALIK</marquee>

   
   Hasilnya akan terlihat seperti ini:
   
   

kode scrollamount="angka" digunakan untuk mengatur kecepatan pergerakan tulisan semakin besar angkanya semakin kencang

Contoh kode:

<marquee scrollamount="20">MARQUEE SPEED 20!!!</marquee>

Hasilnya akan terlihat seperti ini:

kode bgcolor="warna" digunakan untuk memberikan warna latar pada marquee jika diperlukan

Contoh kode marquee:

<marquee bgcolor="DarkCyan">RUNNING TEXT LATAR DARK CYAN</marquee>

Hasilnya akan terlihat seperti ini:

kode scrolldelay="angka" digunakan untuk mengatur jeda dalam milidetik, jadi untuk jeda 1 detik masukkan nilai 1000

Contoh kode marquee:

<marquee scrolldelay="2000">RUNNING TEKS DELAY 2 DETIK</marquee>

Hasilnya akan terlihat seperti ini:

kode loop="angka|-1|infinite" digunakan untuk mengatur pengulangan atau repetisi dari marquee

Contoh kode marquee:

<marquee loop="25">MARQUEE BEROTASI HANYA 25 KALI</marquee>

Keterangan: Setelah 25 kali teks akan hilang.

Hasilnya akan terlihat ini:

kode title="pesan" digunakan untuk memunculkan pesan jika kursor mouse diletakkan di jalur teks berjalan tersebut.

Contoh kode:

<marquee title="INI PESANNYA">MARQUEE DENGAN PESAN</marquee>

Hasilnya akan terlihat seperti ini:

kode width="lebar" digunakan untuk mengatur lebar media teks berjalan, bisa dalam satuan pixel atau persen dari bidang yang ada

Contoh kode:

<marquee width="250px">MARQUEE LEBAR 250 PIXEL</marquee>

Hasilnya akan terlihat seperti ini:

kode onmouseover="this.stop()" onmouseout="this.start()" digunakan untuk membuat tulisan marquee berhenti jika dilintasi kursor mouse

Contoh kode:

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

Hasilnya akan terlihat seperti ini:

Cara Membuat Marquee Bergerak Zig-zag

<marquee behavior="alternate" direction="up" height="50px"><marquee direction="right">MARQUEE BERGERAK ZIG-ZAG</marquee></marquee>

Hasilnya akan terlihat seperti ini:

Cara Memberi Link Pada Marquee

Kode yang digunakan untuk memasukan link pada marquee

<marquee  behavior="alternate" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="10"><a href="https://ridwanpirmansah.blogspot.co.id/2017/02/cara-membuat-text-berjalan-marquee.html">CARA MEMBUAT TULISAN BERJALAN (MARQUEE)</a>
</marquee>

catatan :
ganti https://ridwanpirmansah.blogspot.co.id/2017/02/cara-membuat-text-berjalan-marquee.html dengan Url yang di inginkan.

Hasilnya akan terlihat seperti ini:

Cara Mengubah Huruf, Warna dan Ukuran Font Marquee

Untuk mengubah jenis huruf dan ukuran bisa menambahkan kode css style="font-family: verdana; font-size:25px; color: #FFFFFF;"

font-family: verdana; adalah kode untuk mengubah jenis huruf. Jika anda tidak suka dengan font impact, silahkan diganti dengan Arial, Times New Roman, atau yang lainnya
font-size:25px; adalah kode untuk mengatur ukuran huruf. Ubah nilai 24 sesuka hati anda. Semakin besar nilainya, maka semakin besar juga hurufnya.
color:#FFFFFF; adalah kode untuk mengatur warna huruf. Silahkan mengganti kode hex #FFFFFF dengan nilai hex yang anda suka.

Contoh kode:

<marquee bgcolor="#10BE73" style="font-family: impact; font-size:24px; color: #FFFFFF;">MARQUEE LATAR KEREN</marquee>

Dengan Hasil :


Sumber Referensi:
carakumembuat dan caramadia

Tweet

Sign up here with your email address to receive updates from this blog in your inbox.