Cara Membuat Text dan Banner Berjalan

Untuk membuat teks berjalan caranya sangat mudah, dalam bahasa HTML code text berjalan disebut marquee. Tutorial ini berlaku untuk semua situs, baik itu blogger atau blogspot, wordpress, e-commerce, web forum dan lain-lainnya. Berikut macam-macam dan contoh dari marquee:

Marquee Teks Motion#1

Format yang ini merupakan marquee standar agar teks Anda bisa berjalan secara default (dari kanan ke kiri).

Tag Html:

<marquee>TEKS ANDA</marquee>

Contoh:

teks berjalan dari kanan ke kiri

Marquee Teks Motion#2

Format ini kebalikan dari format yang pertama yaitu membuat teks berjalan dimulai dari kiri ke kanan, ini sangat berguna jika anda menulis dalam teks:

Tag Html:

<marquee direction="right">TEKS ANDA</marquee>

Contoh:

بِسْمِ اللهِ الرَّحْمنِ الرَّحِيمِِ

Marquee Teks Motion#3

Format ini membuat teks berjalan bolak-balik memantul kiri ke kanan dan kanan ke kiri, wah... pusing ya?? he.. he..

Tag Html:

<marquee behavior="alternate">TEKS ANDA</marquee>

Contoh:

teks berjalan bolak-balik memantul kiri ke kanan dan kanan ke kiri

Marquee Teks Motion#4

Format ini membuat teks anda berjalan dari bawah ke atas.

Tag Html:

<marquee direction="up">TEKS ANDA</marquee>

Contoh:

teks berjalan dari bawah ke atas

Marquee Teks Motion#5

Format ini juga kebalikan dari versi sebelumnya yaitu membuat teks anda berjalan dari atas ke bawah.

Tag Html:

<marquee direction="down">TEKS ANDA</marquee>

Contoh:

teks berjalan dari atas ke bawah

Marquee dengan Style Jika mengarahkan Mouse maka Teks Akan Berhenti

Format yang ini adalah pengembangan dari motion diatas dengan keistimewaannya jika Anda arahkan mouse pada teks tersebut maka dia akan istirahat dan berhenti.

Tag Html:

<marquee onmouseout="this.start()" onmouseover="this.stop()">TEKS ANDA</marquee>

Contoh:

arahkan mouse disini dan teks akan berhenti

Note:
Anda bisa menerapkan format ini pada ke 4 motion diatas dengan menambahkan kode Html pada tag pembuka:

onmouseover="this.stop()" onmouseout="this.start()"

Contohnya:
Motion#2 dengan style teks berhenti jika mouse diarahkan:

<marquee direction="right" onmouseover="this.stop()"
onmouseout="this.start()">TEKS ANDA</marquee>

Motion#3 dengan style teks berhenti jika mouse diarahkan:

<marquee behavior="alternate" onmouseover="this.stop()"
onmouseout="this.start()">TEKS ANDA</marquee>

Motion#4 dengan style teks berhenti jika mouse diarahkan:

<marquee direction="up" onmouseover="this.stop()"
onmouseout="this.start()">TEKS ANDA</marquee>

Motion#5 dengan style teks berhenti jika mouse diarahkan:

<marquee direction="down" onmouseover="this.stop()"
onmouseout="this.start()">TEKS ANDA</marquee>

Mengatur Kecepatan Motion

Untuk mengatur kecepatan motion kita dapat menggunakan perintah berikut:

scrollamount="angka kecepatan"

Kita bisa mengatur kecepatan motion teks kita dengan mengganti angka pada bertanda petik diatas ("angka kecepatan"), semakin kecil nilai yang kamu tulis maka motion akan semakin lambat dan semakin besar nilai yang kamu buat juga semakin cepat motion teks yang akan muncul.

Tag Html:

<marquee scrollamount="2">TEKS ANDA</marquee>

Contohnya:

TEKS ANDA

Mengatur Batas Ruang Motion

Untuk mengatur batas ruang motion kita menggunakan perintah:

width="100%" height="100"

Untuk mengatur batas kanan-kiri atau lebar motion kita bisa mengaturnya dengan mengganti nilai persentase pada width (untuk motion #1, #2, dan #3) dan untuk mengatur batas atas bawah atau ketinggian motion kita bisa mengaturnya dengan mengganti nilai height (untuk motion #4 dan #5, dan yang ini bukan porsentase ya??

Tag Html
<marquee direction="up" width="100%" height="20">Teks Anda</marquee>

contoh:
Teks Anda

Catatan: Tulisan TEXT ANDA juga dapat diganti dengan code image banner

Sumber: http://indotopten.blogspot.com/