Home » Blog » Cara Membuat Tulisan Berjalan Di Blog

Cara Membuat Tulisan Berjalan Di Blog

cara+membuat+tulisan+berjalan+di+blog
Cara Membuat Tulisan Berjalan

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:

INI TULISAN BERJALAN

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:

TULISAN BERGERAK KE KANAN

<marquee direction=”up” height=”100″>TULISAN BERGERAK KE ATAS</marquee>

Hasilnya akan terlihat seperti di bawah ini:

TULISAN BERGERAK KE ATAS

<marquee direction=”down” height=”100″>TULISAN BERGERAK KE BAWAH</marquee>

Hasilnya akan terlihat seperti di bawah ini:

TULISAN BERGERAK KE BAWAH

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:

TULISAN BERJALAN LEBAR 50%

<marquee direction=”down” height=”150″>TULISAN BERJALAN TINGGI 150 PX</marquee>

Hasilnya akan terlihat seperti di bawah ini:

TULISAN BERJALAN TINGGI 150 PX

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.

Baca Lainnya :   Optimasi SEO Gambar Blog Agar Muncul Di Mesin Pencari

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:

INI TULISAN BERJALAN DELAY 0,5 DETIK

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:

TULUSAN BERJALAN SPEED 10

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:

TULISAN HANYA BERJALAN 3 KALI SAJA

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:

TULISAN BERJALAN MEMANTUL

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:

TULISAN BERJALAN BACKGROUND KUNING

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:

TULISAN BERJALAN / FONT ARIAL 20 PX MERAH

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”.

Baca Lainnya :   Cara Setting WordPress Ketika Awal Membuat Blog

Contoh penggunaan kode marquee title:

<marquee title=”INI PESAN RAHASIA”>TULISAN BERJALAN DENGAN PESAN</marquee>

Hasilnya akan terlihat seperti di bawah ini:

TULISAN BERJALAN DENGAN PESAN

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:

TULISAN BERHENTI JIKA DILEWATI KURSOR

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:

CARA MEMBUAT TULISAN BERJALAN

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 :

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top