Cara Membuat Tulisan Berjalan Di Blog – Tulisan berjalan atau running text memang terlihat menarik, sehingga sering digunakan di blog untuk menarik perhatian pengunjung.
Tulisan berjalan juga sering disebut marquee, karena untuk membuatnya menggunakan kode marquee. Fungsi kode marquee tidak hanya digunakan pada teks saja, tetapi gambar juga bisa berjalan jika menggunakan kode tersebut.
Untuk membuat tulisan berjalan, caranya sangat mudah, cukup menambahkan kode marquee dan beberapa kode html tambahan untuk variasinya. Nah, bagi yang ingin tahu bagaimana cara membuat tulisan berjalan di blog, silahkan simak pembahasan berikut ini.
Cara Membuat Tulisan Berjalan Di Blog
Kode dasar untuk membuat tulisan berjalan atau marquee adalah sebagai berikut:
| <marquee>INI TULISAN BERJALAN</marquee> |
Sebagai kode dasar, teks secara default akan berjalan dari kanan ke kiri dan berulang terus-menerus. Kode dasar di atas akan terlihat seperti contoh berikut ini:
Selain kode di atas, terdapat beberapa kode tambahan yang bisa digunakan untuk membuat variasi dari marquee. Berikut merupakan daftar kode-kode marquee dan contoh penggunaannya.
Arah Gerak Marquee
Untuk mengatur arah gerak marquee, menggunakan kode direction=”left/right/up/down”. Penjelasannya adalah sebagai berikut:
- right untuk bergerak ke kanan
- left untuk bergerak ke kiri (default)
- up untuk bergerak ke atas
- down untuk bergerak ke bawah
Contoh penggunaan kode marquee direction:
<marquee direction=”right”>TULISAN BERGERAK KE KANAN</marquee>
Hasilnya akan terlihat seperti di bawah ini:
<marquee direction=”up” height=”100″>TULISAN BERGERAK KE ATAS</marquee>
Hasilnya akan terlihat seperti di bawah ini:
<marquee direction=”down” height=”100″>TULISAN BERGERAK KE BAWAH</marquee>
Hasilnya akan terlihat seperti di bawah ini:
Lebar Dan Tinggi Marquee
Untuk mengatur lebar marquee, menggunakan kode width=”angka “. Sedangkan untuk mengatur tingginya, menggunakan kode height=”angka”. Untuk satuannya bisa menggunakan px atau % dari bidang yang ada.
Contoh penggunaan kode marquee width/height:
<marquee width=”50%”>TULISAN BERJALAN LEBAR 50 PERSEN</marquee>
Hasilnya akan terlihat seperti di bawah ini:
<marquee direction=”down” height=”150″>TULISAN BERJALAN TINGGI 150 PX</marquee>
Hasilnya akan terlihat seperti di bawah ini:
Jeda Waktu Marquee
Untuk mengatur jeda waktu pada marquee, menggunakan kode scrolldelay=”angka”. Angka disini menggunakan hitungan milidetik. Jadi, untuk jeda 1 detik menggunakan angak 1000.
Berikut merupakan contoh penggunaan kode marquee scrolldelay:
<marquee scrolldelay=”500″>INI TULISAN BERJALAN DELAY 0,5 DETIK</marquee>
Hasilnya akan terlihat seperti di bawah ini:
Kecepatan Gerak Marquee
Untuk mengatur kecepatan gerak marquee, menggunakan kode scrollamount=”angka”. Semakin besar angkanya, maka akan semakin cepat.
Contoh penggunaan kode marquee scrollamount:
<marquee scrollamount=”10″>TULUSAN BERJALAN SPEED 10</marquee>
Hasilnya akan terlihat seperti di bawah ini:
Pengulangan Marquee
Untuk mengatur pengulangan pada marquee, menggunakan kode loop=”angka”. Angka di sini menentukan banyak perulangan yang dilakukan marquee.
Contoh penggunaan kode marquee loop:
<marquee loop=”3″>TULISAN HANYA BERJALAN 3 KALI SAJA</marquee>
Hasilnya akan terlihat seperti di bawah ini:
Keterangan:
Angka 3 menunjukkan jumlah perulangan, setelah berjalan 3 kali, teks tidak akan muncul lagi atau hilang.
Bergerak Memantul
Untuk mengatur type pergerakan memantul pada marquee, menggunakan kode kode behavior=”scroll/slide/alternate”. Berikut merupakan type pergerakan marquee yang bisa digunakan:
- scroll untuk bergerak terus ke suatu sisi dan muncul dari sisi lain
- slide untuk bergerak sekali, kemudian berhenti dan diulangi lagi
- alternate untuk bergerak memantul dari ujung ke ujung
Contoh penggunaan kode marquee behavior:
<marquee behavior=”alternate”>TULISAN BERJALAN MEMANTUL</marquee>
Hasilnya akan terlihat seperti di bawah ini:
Warna Background Marquee
Untuk memberi background atau warna latar pada marquee, menggunakan kode bgcolor=”warna”. Pilih warna favorit menggunakan kode html.
Contoh penggunaan kode marquee bgcolor:
<marquee bgcolor=”#FFD700″>TULISAN BERJALAN BACKGROUND KUNING</marquee>
Hasilnya akan terlihat seperti di bawah ini:
Jenis, Ukuran Dan Warna Font Marquee
Untuk mengatur jenis, ukuran dan warna font marquee, menggunakan kode style=”font-family:?; font-size:?px; color:#?;”. Berikut penjelasannya:
- font-family untuk jenis font
- font-size untuk ukuran font
- color untuk warna font
Contoh penggunaan kode marquee style:
<marquee style=”font-family:arial; font-size:20px; color:#FF0000;”>TULISAN BERJALAN / FONT ARIAL 20 PX MERAH</marquee>
Hasilnya akan terlihat seperti di bawah ini:
Keterangan font:
font-family: arial
font-size: 20px
color: merah
Memberi Title Marquee
Untuk menampilkan judul atau pesan jika kursor diletakkan di jalur marquee, menggunakan kode title=”pesan”.
Contoh penggunaan kode marquee title:
<marquee title=”INI PESAN RAHASIA”>TULISAN BERJALAN DENGAN PESAN</marquee>
Hasilnya akan terlihat seperti di bawah ini:
Keterangan:
Hentikan kursor pada jalur lintasan (bukan pada tulisan berjalan) untuk membaca pesan.
Berhenti Ketika Dilewati Kursor
Untuk menghentikan marquee ketika dilintasi kursor, menggunakan kode onmouseover=”this.stop()” onmouseout=”this.start()”.
Contoh penggunaan kode marquee onmouseover:
<marquee behavior=”alternate” onmouseover=”this.stop()” onmouseout=”this.start()”>TULISAN BERHENTI JIKA DILEWATI KURSOR</marquee>
Hasilnya akan terlihat seperti di bawah ini:
Keterangan:
Arahkan kursor pada jalur ataupun teks untuk menghentikan pergerakan marquee.
Membuat Link Pada Marquee
Untuk membuat link pada marquee, cukup menambahkan <a href=”link/”>JUDUL LINK</a> di dalam kode dasar marquee.
Contoh membuat link pada marquee:
<marquee behavior=”alternate” onmouseover=”this.stop()” onmouseout=”this.start()” scrollamount=”4″><a href=”https://cilacapklik.com/2023/05/cara-membuat-tulisan-berjalan-di-blog.html/”>CARA MEMBUAT TULISAN BERJALAN</a>
</marquee>
Hasilnya akan terlihat seperti di bawah ini:
Membuat Gambar Berjalan
Untuk membuat gambar berjalan, cukup masukkan kode <img src=”link gambar”/> di dalam kode dasar marquee.
Contoh membuat gambar berjalan:
<marquee><img src=”https://cilacapklik.com/wp-content/uploads/2020/12/Logopit_cilacapklik-picsay.png”/></marquee>
Hasilnya akan terlihat seperti di bawah ini:
Cara Memasang Kode Marquee
Untuk memasang kode marquee, setidaknya terdapat dua cara yang dapat digunakan, yaitu menggunakan widget dan artikel.
Memasang Kode Marquee Di Blogger
Cara memasang kode marquee pada widget blogger, langkah-langkahnya adalah sebagai berikut:
- Buka menu Tata Letak
- Klik Tambah Gadget
- Pilih gadget HTML/JavaScript
- Masukkan kode marquee yang sudah dibuat
- Klik Simpan
Cara memasang kode marquee pada artikel di blogger, langkah-langkahnya adalah sebagai berikut:
- Saat menulis artikel, masuk ke mode HTML
- Masukkan kode marquee ketika berada di mode ini
- Kembali ke mode Compose (Menulis)
- Klik pratinjau untuk melihatnya
Memasang Kode Marquee Di WordPress
Cara memasang kode marquee pada widget wordPress, langkah-langkahnya adalah sebagai berikut:
- Masuk ke dashboard wordPress
- Pilih menu Appearance
- Pilih Widgets
- Pilih Header/Footer
- Klik tanda Plus (+)
- Cari HTML dan Klik
- Letakan kode marque yang sudah dibuat
- Klik Update
Cara memasang kode marquee pada artikel di wordPress, langkah-langkahnya adalah sebagai berikut:
- Saat menulis artikel, pilih options
- Kemudian pilih Code editor
- Masukkan kode marquee ketika berada di mode ini
- Jika sudah, klik Exit code editor
- Klik preview untuk melihatnya
Demikianlah tutorial cara membuat tulisan berjalan/marquee/running text di blog. Semoga bermanfaat.
Baca Juga :
