tutorial-tips-trik-internet-komputer: Trik Membuat Teks Berjalan (marquee)

Rabu, 06 Juli 2011

Trik Membuat Teks Berjalan (marquee)

20.03 |

Diposting oleh Halaman Tutorial |

Edit Entri

Marquee merupakan kumpulan kode HTML yang jika diterjemahkan dalam bahasa web browser akan membentuk suatu animasi berupa teks atau image yang bergerak atau berjalan. Ketika kamu sedang melakukan silaturahim ke blog lain, tidak jarang kamu akan menemui blog yang menggunakan marquee ini. Tentunya hal tersebut mungkin akan menimbulkan satu pertanyaan tentang "bagaimana cara membuatnya?". Karena pokok bahasannya adalah "marquee", maka kode HTML-nya pun ikut-ikutan marquee, yakni ... .
Untuk lebih memahami tentang marquee (teks bergerak atau berjalan), mari bersama-sama kita telusuri trik blogger dengan menggunakan kode HTML marquee tersebut.

Berikut beberapa contoh dan manfaat dari kode teks berjalan (marquee) :

Teks ini menggunakan marquee default

Teks ini menggunakan marquee default

direction="right">Teks bergerak ke kanan

Teks bergerak ke kanan

Catatan : "direction" merupakan kode yang berfungsi untuk menentukan arah gerakan teks atau image. Atributnya adalah left, right, up, dan down.

direction="up" height="50" width="50%">Teks berjalan ke atas yang dibatasi area tertentu

Teks berjalan ke atas & dibatasi area tertentu

Catatan : "height" dan "width" berfungsi untuk menentukan tinggi serta lebar area marquee yang digunakan oleh teks, atributnya berupa nilai angka atau prosen (%).

bgcolor="#f2f5a9" scrolldelay="2000" direction="down" scrollmount="2" height="50" width="75%">Teks di kiri berjalan ke bawah dgn waktu tunda 2 detik, berkecepatan tertentu yang dibatasi area tertentu pula

Teks di kiri berjalan ke bawah dgn waktu tunda 2 detik, berkecepatan tertentu yang dibatasi area tertentu pula

Catatan : "scrolldelay" berfungsi mengatur waktu tunda, atributnya adalah angka per-mili detik. Sedangkan "scrollmount" digunakan untuk mengatur kecepatan gerakan teks, atributnya berupa angka. Semakin besar angka, maka semakin cepat gerakannya.

bgcolor="#cecef6" scrollmount="2">Teks berkecepatan tertentu dengan menggunakan latar warna biru muda

Teks berkecepatan tertentu dengan menggunakan latar warna biru muda

Catatan : "bgcolor" mempunyai fungsi memberikan warna latar teks, atributnya adalah kode warna.

bgcolor="#f2f5a9" loop="4">Teks 4x berjalan, kemudian hilang

Teks 4x berjalan, kemudian hilang

bgcolor="#cecef6" loop="4" behavior="slide">Teks 4x berjalan, kemudian berhenti

Teks 4x berjalan, kemudian berhenti

Catatan : "loop" mempunyai fungsi mengatur jumlah gerakan, atributnya adalah angka. Semakin besar nilainya, maka semakin banyak pula gerakannya. Biasanya kode loop diikuti dengan kode behavior="slide", agar teks tidak hilang.

hspace="25" width="25%" bgcolor=yellow>Teks berjalan
dan berjarak horizontal

Teks berjalan
dan berjarak horizontalMarquee!

vspace="25" width="25%" bgcolor=yellow>Teks berjalan
dan berjarak vertikal

Marquee!
Teks berjalan
dan berjarak vertikal
Marquee!!

Catatan : "hspace" berguna mengatur jarak marquee dengan teks atau tepi elemen secara horizontal, atributnya adalah angka. Sedangkan "vspace" berfungsi untuk mengatur jarak marquee dengan teks atau tepi elemen secara vertikal, atributnya angka juga. Semakin besar nilainya, maka semakin besar jaraknya.

behavior="alternate">Teks ini akan berjalan bolak-balik

Teks ini akan berjalan bolak-balik

Catatan : "behavior" berfungsi untuk mengatur perilaku gerakan teks dgn atribut yang mengikutinya seperti scroll (gerakan default ke kiri), slide (bergerak sekali lalu berhenti), dan alternate (bolak-balik).

Nah, sekarang bagaimana jika kamu ingin memasukkan jenis huruf (font-family) dan warna huruf (color). Kamu tinggal menambahkan kode ... diantara kode marquee, singkat kodenya seperti di bawah ini.

style="font-family:arial;color:#0000ff;">bgcolor="#f2f5a9" direction="down" behavior="alternate" scrollamount="10" height="100" width="50&">Teks arial warna biru

Teks arial warna biru

Selain itu terdapat variasi lain yang apabila mouse didekatkan, maka teks akan berhenti. Dan akan bergerak kembali ketika mouse dipindahkan ke area lain.

onmouseover="this.stop()" onmouseout="this.start()" bgcolor="#cecef6" scrollamount="2" direction="up" width="75%" height="100" align="left">
Optimasi Kualitas Link dalam Blog
Gratis 7 SEO Tool
Optimasi Posting Blog
Optimasi Judul Blog dalam Title Tag
Optimasi Blog
Optimasi Blog lewat Kata Kunci
Apa itu SEO?

Optimasi Kualitas Link dalam Blog
Gratis 7 SEO Tool
Optimasi Posting Blog
Optimasi Judul Blog dalam Title Tag
Optimasi Blog
Optimasi Blog lewat Kata Kunci
Apa itu SEO?

Kalau kamu ingin yang berjalan bukan teks, melainkan image maka tinggal mengganti teks yang berwarna merah dengan alamat penyimpanan file gambar kamu.

Catatan : Kode warna merah merupakan teks yang dimasukkan dalam kode marquee.

Dan masih banyak lagi variasi kode yang dapat kamu optimasi, sehingga sesuai dengan tipe dan karakteristik elemen di blog kamu. Point pentingnya adalah jangan tidak pernah mencoba, karena kamu nanti tidak akan pernah pula tahu arti dan maknanya.

Selamat mencoba marquee menurut versi kamu...