Sabtu, 23 April 2011

Membuat Efek Marquee alias Teks Berjalan

Banyak diantara blogger yang suka menampilkan sesuatu yang menurutnya unik, lucu, atau beda di blog mereka, salah satunya teman saya yang nanya "ia gimana sih cara bikin tulisan yang jalan-jalan di blog?". Mungkin maksudnya marquee, dari situ saya pikir diposting aja deh soalnya ribet juga kalau harus dijelasin apalagi saya sama temen saya ini susah banget mau ketemu.

Pada dasarnya membuat marquee ini gampang, hanya menggunakan tag <marquee> .... </marquee>

Atribut-atribut yang sering digunakan adalah:
BGCOLOR = "warna" -->untuk mengatur warna background teks
DIRECTION = "left/right/up/down" --> pilih salah satu sebagai arah gerakan teks
BEHAVIOR = "scroll/slide/alternate" --> pilih salah satu sebagai perilaku teks
scroll-->teks bergerak memutar
slide-->teks bergerak sekali terus berhenti
alternate-->teks bergerak bolak balik kanan-kiri

TITLE="pesan" --> Pesan akan muncul saat mouse berada di atas teks
SCROLLMOUNT="angka" --> mengatur kecepatan gerakan dalam pixel, semakin besar angka semakin cepat gerakannya.
SCROLLDELAY="angka" --> Untuk mengatur waktu tunda gerakan dalam mili detik
LOOP="angka|-1|infinite" --> Mengatur jumlah loop

WIDTH="lebar" --> Mengatur lebar blok teks dalam pixel atau persen

Untuk lebih jelasnya akan saya kasih contoh :

<marquee align="center" direction="right" height="100" scrollamount="2" width="90%">
TEKS BERGERAK DARI KANAN KE KIRI</marquee>


TEKS BERGERAK DARI KANAN KE KIRI

Dan ini contoh lainnya:

Contoh marquee dengan warna latar (background):
<div align="left"><FONT FACE="georgia" color="White"><b><MARQUEE BGCOLOR="RED" width="90%" scrollamount="3" behavior="alternate">
</MARQUEE></b></FONT></div>

teks marquee denganbackground

Satu lagi contoh buat yang marqueenya bisa diganti sama link, dan teks akan berhenti kalau di lewati oleh kursor mouse.Ini bisa juga dipakai buat gadget blog lho....buat link list gitu...

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="100" align="center">
<a href="http://riariaan.blogspot.com" target="new">My Simple Thought</a><br/>
<a href="http://akunkompi5a07.blogspot.com" target="new">Perkembangan TIK </a><br/>
<a href="http://kolom-iklan.blogspot.com" target="new">Kolom iklan </a><br/></marquee>


My Simple Thought

Perkembangan TIK

Kolom iklan


Segitu dulu deh postingan kali ini, kalau ada yang kurang jelas atau salah bisa tinggalin komen..

Tidak ada komentar:

Posting Komentar