Cara Membuat Teks Berjalan

Mau tampilan blog Anda tampil meriah, salah satunya bisa dengan adanya teks yang berjalan. Teks berjalan dalam bahasa HTML nya disebut marquee.
Dalam penggunaannya teks berjalan dipakai untuk link, pesan atau banner iklan yang mana diperuntukan menarik perhatian pengunjung blog.

Berikut beberapa kode HTML untuk teks berjalan dengan variasinya:

1. Teks berjalan dari kanan ke kiri
Kode

<marquee> Teks berjalan dari kanan ke kiri </marquee>

Hasil

Teks berjalan dari kanan ke kiri

2. Teks berjalan dari kiri ke kanan
Kode

<marquee behavior="scroll" direction="right" height="50" width="auto">Teks berjalan dari kiri ke kanan</marquee>

Hasil

Teks berjalan dari kiri ke kanan

3. Teks bergerak dengan mengatur kecepatannya (scrollamount)
Anda bisa mengubah angka 30 pada scrollamount="30"
Kode

<marquee behavior="scroll" direction="left" scrollamount="5">Teks bergerak lambat</marquee> <marquee behavior="scroll" direction="left" height="100" scrollamount="30" width="auto">Teks bergerak lebih cepat</marquee>

Hasil

Teks bergerak lambat Teks bergerak lebih cepat

4. Teks bergerak bolak balik / memantul saat tiba di tepi kiri atau kanan
Kode

<marquee behavior="alternate">Teks berjalan bolak balik</marquee>

Hasil

Teks berjalan bolak balik

5. Teks berjalan dengan background
Untuk mengganti background (warna latar belakang-nya) bisa ganti kata "green" pada kode bgcolor="green" , warna lain bisa dilihat disini
Kode

<marquee bgcolor="green" height="50" width="auto"> Teks berjalan dengan background green </marquee>

Hasil

Teks berjalan dengan background biru

6. Teks bergerak dari bawah ke atas
Kode

<marquee behavior="scroll" direction="up" height="200" width="auto"> Teks bergerak dari bawah ke atas </marquee>

Untuk mengubahnya menjadi bergerak dari atas ke bawah ganti kode direction="up" menjadi direction="down"

Hasil

Teks bergerak dari bawah ke atas

7. Teks bergerak dari bawah ke atas (di dalam kotak teks)
Kode

<div style="border: 1px solid rgb(202, 61, 217); height: 180px; overflow: auto; padding: 5px;"> <b> <marquee behavior="scroll" scrollamount="3" direction="up"></br> <a href="http://www.aqipulsa.blogspot.com/">Aya-Aya WE</a></br> <a href="http://agoeng-adzi.blogspot.com/">BLOGKOE</a></br> <a href="http://www.aapulsa.blogspot.com/">Blog Serba Ada</a></br> <a href="http://laptonews.blogspot.com/">Repair Manual Laptop</a></br> </marquee> </b> </div>

Hasil

Aya-Aya WE
BLOGKOE
Blog Serba Ada
Repair Manual Laptop

Anda bisa merubah kecepatannya dengan scrollamount="7" , arahnya ke bawah direction="down"

Aya-Aya WE
BLOGKOE
Blog Serba Ada
Repair Manual Laptop

8. Teks bergerak dari bawah ke atas, memantul dan berhenti jika penunjuk mouse berada di atas teks area.
Tambahkan kode: onmouseout="this.start()" onmouseover="this.stop()
Kode

<marquee align="center" behavior="alternate" direction="up" height="300" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" width="100"> Teks 1 Teks 2 Teks 3 </marquee>

Hasil

Teks 1 Teks 2 Teks 3

9. Anda bisa mengatur ukuran font atau teks dan warna teks berjalan Anda
Kode

<marquee><font size='3' face='georgia' color=green> Selamat Datang Di Blog Saya </font></marquee>

Keterangan:
a. font size='3' , angka 3 adalah ukuran font bisa diubah sesuai kebutuhan
b. face='georgia' , georgia jenis huruf
c. color=green , green adalah warna teks.

Hasil

Selamat Datang Di Blog Saya

Bisa juga Anda memasukkan kode-kode di atas pada teks editor blogspot,

Atau pada gadget html/javascript

Sekian tutorial hari ini, semoga bisa membantu.