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:
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:
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:
kode HTML:
<marquee behavior="slide">slide kanan ke kiri</marquee>
- berjalan cepat
contoh:
kode HMTL:
<marquee scrollamount="10">text ini berjalan cepat</marquee>
- berjalan lambat
contoh:
kode HTML:
<marquee scrolldelay="200">teks ini berjalan lambat</marquee>
- background berwarna
contoh:
kode HMTL:
<marquee bgcolor="#ffbcac">running text ini berwarna</marquee>
- lebar separuh
contoh:
kode HTML:
<marquee width="50%">lebar running text hanya 50%</marquee>
- fixed position
contoh:
“Cari sendiri ya, ada di atas dan di bawah kok”
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.