Anto Tunggal

Ilmu Komputer dan Desain Grafis

August 14, 2016

Cara Membuat Tulisan Berjalan Dengan HTML

Tulisan yang berjalan akan menarik perhatian para pembaca karena biasanya berisi informasi-informasi. Seperti halnya pada Televisi, pasti Anda sudah pernah melihat tulisan berjalan di bagian bawah. Dan teks yang berjalan di televisi itu berisi informasi yang sedang naik daun dan banyak yang mencarinya. Jadi, tulisan berjalan ini bisa dijadikan sebagai salah satu aksesoris iklan agar banyak yang minat.

Cara Membuat Tulisan Berjalan di HTML

Gambar di bawah adalah sebagai contoh dari tulisan yang berjalan. Teks yang berjalan memang bisa lebih berpeluang menarik perhatian di bandingkan dengan teks yang diam. Teks yang berjalan memiliki kesan lebih hidup dan enak dipandang.

Dalam HTML, kode yang digunakan untuk membuat teks berjalan adalah Marquee. Jadi, kita cukup menggunakan tag marquee saja untuk membuat teks/tulisan yang berjalan.

Tulisan berjalan ini bisa diterapkan pada website atau blog, dengan syarat mendukung html. Namun saya yakin, semua penyedia layanan blog sudah menyisipkan html dalam platform tersebut. Jadi pasti sudah support html semua.

Cara membuat tulisan berjalan dengan html

Teks yang berjalan sendiri banyak ragamnya. Untuk cara membuatnya bisa simak cara berikut.

1. Marquee (Dasar)
Kode paling dasar yang digunakan untuk tulisan berjalan adalah <marquee>Teks Disini</marquee>. Silahkan copy kode di bawah ini, lalu masukkan pada web html Anda.
Kodenya ini:
<marquee>Cara Membuat Tulisan Berjalan (Dasar)</marquee>
 Maka akan jadi seperti ini:
Cara Membuat Tulisan Berjalan (Dasar)
Tulisan berjalan diatas adalah yang paling dasar dan mudah. Saya yakin semua bisa mempraktekkannya.

2.  Scrolldelay (Mengatur delay tulisan)
Untuk yang kedua ini adalah membuat teks berjalan dan mengatur delay. kode/tag untuk mengatur delay tulisan adalah scrolldelay="Angka yang diinginkan". Hitungan ini 1 detiknya adalah 1000. Jadi jika ingin membuat 3 detik maka 3000. Semakin besar angkanya, maka akan semakin lama laju dari tulisan. Untuk lebih jelasnya, lihat contoh.
Kodenya ini:
<marquee scrolldelay="300">Cara Membuat Tulisan Berjalan (Dengan Delay 0.3 Detik)</marquee>
Maka akan jadi seperti ini
Cara Membuat Tulisan Berjalan (Dengan Delay 0.3 Detik)
Terlihat bedanya kan dengan yang diatas.

3. Scrollamount (Mengatur kecepatan tulisan)
Ini adalah kebalikan dari scrolldelay. Kalai yang ini adalah untuk mengatur kecepatan laju tulisan. Tag yang digunakan adalah scrollamount="angka yang diinginkan". Semakin besar angkanya, maka akan semakin cepat lajunya.
Kodenya ini:
<marquee scrollamount="10">Cara Membuat Tulisan Berjalan (Dengan kecepatan 10 angka)</marquee>
Maka akan jadi seperti ini:
Cara Membuat Tulisan Berjalan (Dengan kecepatan 10 angka)

4. BGColor (Memberi warna background)
Yang ketiga adalah membuat tulisan berjalan dengan warna background (latar belakang). Kodenya adalah bgcolor="warna". Untuk warnanya, Anda bisa menggunakan kode warna html ataupun dengan menyebutkan nama warna (dalam bahasa inggris).
Kodenya ini:
<marquee bgcolor="orange">Cara Membuat Tulisan Berjalan (Dengan Warna Background)</marquee> 
Maka akan jadi seperti ini:
Cara Membuat Tulisan Berjalan (Dengan Warna Background)
5. Behavior (Membuat tulisan memantul ke kanan lalu ke kiri)
Dengan menggunakan tag ini, maka kita akan membuat tulisan yang berjalan, setelah mengenai/sampai di tepi maka akan kembali lagi, begitu seterusnya. Kode dari tag ini adalah behavior="alternate". Lihat contoh.
Kodenya ini:
<marquee behavior="alternate">Cara Membuat Tulisan Berjalan (Memantul)</marquee>
Maka akan jadi seperti ini:
Cara Membuat Tulisan Berjalan (Memantul)
Nah, itulah beberapa model dari tulisan yang berjalan. Sebenarnya masih banyak model-model yang lainnya. Namun, dengan model tersebut Anda bisa mengkombinasikannya. Misal, model yang memantul dengan yang berlatar belakang.

Semoga artikel tutorial membuat tulisan berjalan dengan html ini bermanfaat.
Terima kasih.
Rekomendasi Untuk Anda × +
0 Komentar untuk "Cara Membuat Tulisan Berjalan Dengan HTML"

Silahkan berkomentar

Contact Form

Name

Email *

Message *

Back To Top