Mudhofar
Just a blogger who lives with curiosity

Cara Membuat Running Text (Teks Berjalan) dengan HTML

Pemilik situs terkadang membutuhkan running text atau teks berjalan dalam situs untuk memberikan informasi atau pengumuman penting. Untungnya, cara membuat running text sangatlah mudah.

Kamu hanya membutuhkan kode HTML yang bisa kamu pasang di situs Blogger atau WordPress kamu baik dalam post atau pun widget. Yang kamu butuhkan hanyalah kode HTML dengan markup ‘marquee‘.

Agar lebih mudah, silahkan pahami kode-kode berikut dengan running text yang kamu butuhkan:

Running text dari kanan ke kiri

contohnya seperti di bawah ini:

Teks ini bergerak dari kanan ke kiri

Kode HTML yang digunakan untuk membuat running text dari kanan ke kiri sebagai berikut:

<marquee>Teks ini bergerak dari kanan ke kiri</marquee>

Running text dari kiri ke kanan

contohnya seperti di bawah ini:

Teks ini bergerak dari kiri ke kanan

Kode HTML yang digunakan untuk membuat running text dari kanan ke kiri sebagai berikut:

<marquee behavior="scroll" direction="right">Teks ini bergerak dari kiri ke kanan</marquee>

Running text dengan attribute custom

Berikut ini adalah kode HTML running text yang bisa kamu kreasikan sendiri:

  • slide

contoh:

slide kanan ke kiri

kode HTML:

<marquee behavior="slide">slide kanan ke kiri</marquee>
  • berjalan cepat

contoh:

text ini berjalan cepat

kode HMTL:

<marquee scrollamount="10">text ini berjalan cepat</marquee>
  • berjalan lambat

contoh:

teks ini berjalan lambat

kode HTML:

<marquee scrolldelay="200">teks ini berjalan lambat</marquee>
  • background berwarna

contoh:

running text ini berwarna

kode HMTL:

<marquee bgcolor="#ffbcac">running text ini berwarna</marquee>
  • lebar separuh

contoh:

lebar running text hanya 50%

kode HTML:

<marquee width="50%">lebar running text hanya 50%</marquee>
  • fixed position

contoh:

“Cari sendiri ya, ada di atas dan di bawah kok”

running text fixed position yang kamu cari running text fixed position yang kamu cari

kode HTML:

<marquee style="position: fixed; top: 50px; align: center; z-index: 99;">running text fixed position yang kamu cari</marquee>
<marquee style="position: fixed; bottom: 15px; align: center; z-index: 99;" bgcolor="#ffbcac">running text fixed position yang kamu cari</marquee>

Itu dia Cara Membuat Running Text (Teks Berjalan) dengan HTML.

Kode-kode di atas masih bisa kamu kreasikan lagi dengan menggabung-gabungkannya. Bahkan, kamu bisa menambahkan kode CSS dengan memberikan ‘class name’ di dalam markup ‘<marquee>’.

Sekian dan terima kasih.