Tutorial Lengkap Cara Membuat Text Berjalan (Marquee)

Cara membuat teks berjalan html di notepad – 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.

Tutorial Lengkap Cara Membuat Text Berjalan (Marquee)

Kode dasar untuk membuat marquee atau teks berjalan

<marquee>TULISAN INI AKAN BERGERAK</marquee>

Kode di atas akan terlihat seperti ini:

TULISAN INI AKAN BERGERAK

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:

TULISAN INI AKAN BERGERAK KE KANANTULISAN INI AKAN BERGERAK KE ATAS

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:

MARQUEE BERGERAK SCROLLMARQUEE BERGERAK BOLAK-BALIK

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:

MARQUEE SPEED 20!!!

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:

RUNNING TEXT LATAR DARK CYAN

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:

RUNNING TEKS DELAY 2 DETIK

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:

MARQUEE BEROTASI HANYA 25 KALI

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:

MARQUEE DENGAN PESAN

kode MARQUEE DENGAN PESAN 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:

MARQUEE LEBAR 250 PIXEL

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:

MARQUEE BERGERAK BOLAK-BALIK

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:

MARQUEE BERGERAK ZIG-ZAG

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://ridpir.com”>CARA MEMBUAT TULISAN BERJALAN (MARQUEE)</a>
</marquee>

catatan :
ganti https://ridpir.com dengan Url yang di inginkan.

Hasilnya akan terlihat seperti ini:

CARA MEMBUAT TULISAN BERJALAN (MARQUEE)

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:

MARQUEE LATAR KEREN

Itulah Cara membuat teks berjalan (marquee) baik di notepad, di blog (website) ataupun ditempat coding lainnya yang bisa Anda praktikkan dengan sangat mudah

Sumber Referensi:
carakumembuat dan caramadia

Jika MARQUEE Tidak Bergerak, Silakan Klik Tautan Berikut ini Untuk Melihat Tutorial Cara Membuat Marquee

Respon (12)

  1. Assalamualaikum, saya ingin nyoba di blogger tapi bagaimana cara memulainya ??? bole ngasih panduannya mas..??

    1. Waalaikumussalam, Ikuti aja panduan artikel diatas. Dulu saya praktik juga di blogger kok. Kakaknya bisa menyisipkan skrip marquee dibagian HTML ya

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *