Membuat Teks dan Banner Berjalan (Marquee)

Tips kali ini berawal ketika saya ingin meringkas widget banner exchange dan link exchange. Semakin banyaknya teman yang bertukar link, membuat space widget tersebut jadi sangat panjang dan tidak sedap dipandang mata. Terus ada ide dibikin crawling aja ya?? alias teks atau banner dibikin berjalan, lha pie carane cah?? Inilah caranya:

Untuk membuat teks berjalan caranya sangat mudah, dalam bahas HTML disebut Marquee. Kalau saya baca artikelnya pak hakiemtea memang benar arti kata marquee sama sekali tidak ada hubungannya dengan teks berjalan, saya cari dikamus artinya adalah 'marquee kb. tempat berteduh seperti atap dimuka pintu masuk sebuah gedung'. Namu apalah artinya sebuah nama? he.. he.. Berikut macam-macam dan contoh dari marquee teks:

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 keistimewaannya jika Anda arahkan mouse pada teks tersebut maka dia akan istirahat dan berhenti.

Tag Html:
<marquee onmouseover="this.stop()" onmouseout="this.start()">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:

onmouseout="this.start()">TEKS ANDA</marquee>
Motion#3 dengan style teks berhenti jika mouse diarahkan:

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


Motion#4 dengan style teks berhenti jika mouse diarahkan:

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

Motion#5 dengan style teks berhenti jika mouse diarahkan:

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


Mengatur Kecepatan Motion
Untuk mengatur kecepatan motion kita dapat menggunakan perintah berikut:
scrollamount="18"

Kita bisa mengatur kecepatan motion teks kita dengan mengganti angka pada bertanda petik diatas ("18"), 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

Ok sampai disini sudah mengerti semua kan?? kamu juga bisa mengatur kecepatan ini pada motion yang lain. Masih bingung?? Tulis di kolom komentar aj yach???

Mengatur Batas Ruang Motion
Untuk mengatur batas ruang motion kita menggunakan perintah:
width="100%" height="100"

Untuk mengatur batas kanan-kiri/lebar motion kita bisa mengaturnya dengan mengganti nilai persentase pada width (untuk motion #1, #2, dan #3) dan untuk mengatur batas atas bawah/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

Ok, kawan selamat mengutak-utik ya??

Tweet

Sign up here with your email address to receive updates from this blog in your inbox.