Tutorial Mudah Dan Lengkap Cara Membuat Tulisan Berjalan Di Blog

Cara Membuat Tulisan Berjalan di Blog "Marquee" Lengkap - Seringkali kita melihat pada acara berita yang disiarkan di televisi, terdapat potongan informasi yang disampaikan dengan running text atau teks berjalan.

Di dunia HTML, teks berjalan lebih dikenal dengan nama marquee, dan lingkupnya bukan hanya teks, gambar pun bisa dibuat berjalan.

Marquee dapat dibuat dengan mudah dengan kode HTML. di kesempatan ini saya akan berbagi kode-kode HTML pembuat marquee lengkap dengan variasi dan atribut-atributnya.

Cara Membuat Tulisan Berjalan di Blog "Marquee" Lengkap

1. Kode Dasar Marquee

<marquee>Cara Membuat Teks Berjalan</marquee>
Cara Membuat Teks Berjalan

Sebagai dasar, teks secara default akan berjalan dari kanan ke kiri dan berulang terus menerus.

2. Loop atau Perulangan Marquee

<marquee loop="10">Teks Berjalan berulang 10 kali</marquee>
Teks Berjalan berulang 5 kali

Loop menentukan banyak perulangan yang dilakukan marquee. Angka 10 menunjukkan jumlah perulangan, setelah berjalan 10nkali marquee tidak akan muncul lagi

3. Jeda Waktu Marquee

<marquee scrolldelay="300">Teks Berjalan dengan delay 0,4 detik</marquee>
Teks Berjalan dengan delay 0,4 detik

Scroll delay menunjukkan jeda waktu marquee. Angka 300 memiliki satuan milidetik, jadi sama dengan 0,4 detik. Teks akan berjalan setiap 0,4 detik.

4. Memberi Title Marquee

<marquee title="pesan tersembunyi">Teks Berjalan</marquee>
Teks Berjalan

Title memuat pesan, title akan aktif ketika kursor diarahkan ke marquee.

5. Warna Background Marquee

<marquee bgcolor="42bafc">Teks Berjalan dengan warna latar belakang Biru</marquee>
Teks Berjalan dengan warna latar belakang Biru

Bgcolor mengatur warna background marquee. FFF300 menunjukkan kode warna HTML untuk warna biru, dapat diganti dengan warna dasar red, green, blue, atau yellow.

6. Kecepatan Gerak Marquee

<marquee scrollamount="50">Teks Berjalan dengan kecepatan 50</marquee>
Teks Berjalan dengan kecepatan 50

Scrollamount mengatur kecepatan gerak marquee. Angka 50 menunjukkan kecepatannya 50, kecepatan normal adalah 6.

7. Arah Gerak Marquee

<marquee direction="right">Teks Berjalan ke arah kanan</marquee>
Teks Berjalan ke arah kanan

<marquee direction="down" height="90">Teks Berjalan ke arah bawah</marquee>
Teks Berjalan ke arah kanan
Teks Berjalan ke arah kanan

Teks Berjalan ke arah bawah

Direction akan mengatur arah gerak marquee. Right menunjukkan arah pergerakan marquee ke kanan. Ada empat arah yang bisa Anda gunakan :

• UP untuk gerak ke atas

• Right untuk gerak ke kanan

• Down untuk gerak ke bawah

• Left untuk gerak ke kiri (default)

8. Lebar dan Tinggi Marquee

<marquee width="300">Lebar Teks Berjalan 300px</marquee>
Lebar Teks Berjalan 300px
<marquee height="100">Tinggi Teks Berjalan 100px</marquee>
Tinggi Teks Berjalan 100px

Width untuk mengatur lebar marquee, dan height untuk mengatur tinggi marquee. Masing-masing menggunakan px sebagai satuan.

9. Mengatur Jenis, Ukuran, dan Warna Font Marquee

<marquee style="font-family:arial; font-size:20px; color:#ffffff;">Jenis ukuran dan warna font pada Teks Berjalan</marquee>
Jenis ukuran dan warna font pada Teks Berjalan

Kita dapat mengatur jenis, ukuran, dan warna font menggunakan style.

• Font-family untuk jenis font

• Font-size untuk ukuran font

• Color untuk warna font

10. Sifat Marquee

<marquee behavior="alternate">Teks Berjalan memantul</marquee>
Teks Berjalan memantul

Behavior akan mengatur sifat marquee. Anda dapat mengatur marquee dengan tiga nilai :

• Scroll : Berguna ketika marquee menghilang ketika menabrak sisi kiri (default)

• Slide : Berguna ketika ,marquee berhenti ketika menabrak sisi kiri

• Alternate : marquee akan memantul ketika menabrak sisi

11. Membuat Link pada Marquee

<marquee><a href="http://zagan19.com">Cara Membuat Tulisan Berjalan</a></marquee>
Cara Membuat Tulisan Berjalan

Untuk membuat link pada teks yang berjalan, cukup dengan memasukkan kode HTML pembentuk link di dalam kode dasar marquee.

12. Membuat Gambar Berjalan

<marquee><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih9MKHcq3H2HorG3CXLB2TYNbDTu6eJx-o8JosZ-kz362fxVgRqnczoTY-AmCFj_3vBmiuGhhotFbRk2TVzqKdKIpomxfPKRGrWLv-WzMtAwQU8jpgtK2wrHlCmpYzu3xwiQZRl5Zimc4/s1600/zagan19.com.png" /></marquee>

Untuk membuat link pada teks yang berjalan, cukup dengan memasukkan kode HTML pembentuk link di dalam kode dasar marquee.

13. Membuat Teks Berjalan Zig Zag

<marquee direction="up" scrollamount="2" align="center" behavior="alternate">
<marquee direction="right" behavior="alternate" height="30">Teks Berjalan Zig Zag
</marquee>
</marquee>

Teks Berjalan Zig Zag

Teks yang berjalan zig zag dapat dilakukan dengan menggabungkan dua atribut direction (arah) dengan cara memasukkan teks berjalan diantara dua marquee yang memiliki atribut arah berbeda. Dalam contoh, gunakan arah UP dan right sehingga membentuk zig zag.

14. Kombinasi Atribut Marquee

<div style="text-align: center;">
<span style="font-size: x-large;">
<marquee bgcolor="black" style="color: red;" direction="left" width="130">
<b>&lt;&lt;</b><b> SANAH SINIH SONOH &gt;&gt;</b>
</marquee>
<marquee bgcolor="black" style="color: blue;" direction="right" width="130">
<b>&lt;&lt; SANAH SINIH SONOH &gt;&gt;</b>
</span>
</marquee>
</div>

<< SANAH SINIH SONOH >>


<< SANAH SINIH SONOH >>

Itulah beberapa cara membuat tulisan berjalan di blog, selamat mencoba .

Share this post