Friday, July 19, 2013

Bagaimana Cara Membuat Teks Berjalan Di Blog

Maksudnya seperti ini:

Halo saya teks berjalan...

Kita bisa menambahkan latarbelakang dengan warna lainnya, contohnya seperti berikut:

Teks berjalan dengan latar biru

Kodenya:

<marquee bgcolor="blue">Teks berjalan dengan latar biru</marquee>

Jika ingin dengan warna latarbelakang yang berbeda, ganti nilai bgcolor dengan nama warna lainnya, misal black, white, green, orange, pink, dll.

Kita juga bisa mengganti dengan warna teks lainnya, contohnya seperti berikut:

Teks putih berjalan dengan latar biru

Kodenya:

<marquee bgcolor="blue" style="color:white;font-size:20px;">Teks putih berjalan dengan latar biru</marquee>

Jika ingin warna teks yang lain ganti nilai color dengan nama warna lainnya. Untuk ukuran hurufnya bisa ganti nilai font-size, misal 40px, 15px, dll.

Jika ingin berapa kali saja teks berjalan ditampilkan (misalnya hanya 10 kali), kita bisa tambahkan loop, seperti berikut:

<marquee loop="10">Teks berjalan hanya ditampilkan 10 kali</marquee>

Tampilan:

Teks berjalan hanya ditampilkan 10 kali

Jika ingin lebih banyak, berikan nilai loop dengan nilai yang lebih besar. Atur kecepatan pergerakan teksnya juga bisa, tambahkan scrollamount, seperti berikut:

<marquee scrollamount="200">Teks berjalan dengan kecepatan</marquee>

Tampilan:

Teks berjalan dengan kecepatan

Semakin besar nilai yang diberikan untuk scrollamount, akan semakin cepat pergerakannya.

Sekarang bagaimana agar teks berjalan dari atas ke bawah, tambahkan direction="down" ke marquee, seperti berikut:

<marquee direction="down" height="100">Teks berjalan ke bawah</marquee>

Tampilan:

Teks berjalan ke bawah

Jangan lupa tambahkan height-nya yah.

Ingin sebaliknya seperti di atas, ganti nilai direction ke up, hingga jadi direction="up". Kita bisa tambahkan behavior ke marquee, tiga nilai yang boleh di berikan untuk behavior=["scroll" | "slide" | "alternate"].

Contoh scroll:

<marquee behavior="scroll">Teks berjalan... dengan scroll</marquee>

Tampilan:

Teks berjalan... dengan scroll

Contoh slide:

<marquee behavior="slide">Teks berjalan... dengan slide</marquee>

Tampilan:

Teks berjalan... dengan slide

Contoh alternate:

<marquee behavior="alternate">Teks berjalan... dengan alternate</marquee>

Tampilan:

Teks berjalan... dengan alternate

Selain untuk blog, gunanya bisa juga untuk mengajarkan anak kita belajar membaca running text. Semoga ada manfaat.