Cara Membuat Efek Marquee atau Teks Berjalan di Blog

Assalamu’alaikum dunsanak....

Tutorial blog kali ini ini, awak akan berbagi cara tentang efek marquee.
Apa itu marquee?
Marquee merupakan salah satu kode dalam HTML untuk membuat teks atau gambar menjadi bergerak dan berjalan. Kode satu ini banyak digunakan dan dipakai oleh para perancang di dalam blognya karena berefek dinamis dan menarik untuk dilihat. Selain menarik, juga dapat menghemat tempat dan posisi pada halaman blog kita.

Dalam menggunakan kode marquee ini digunakan tag <marquee>....</marquee>.
Disamping hasilnya berjalan dan bergerak juga dapat dikombinasikan dengan menggunakan kode-kode lain, yaitu:

1. BGCOLOR="color" => Untuk mengatur warna background/latar belakang dari teks .
   
2. DIRECTION="left/right/up/down" => Untuk mengatur arah gerakan teks.
   
3. BEHAVIOR="scroll/slide/alternate" => Untuk mengatur perilaku gerakan.
   Scroll: teks bergerak atau berjalan penuh.
   Slide: teks bergerak sekali lalu berhenti.
   Alternate: teks bergerak dari kiri ke kanan kemudian berbalik kembali (bolak-balik).
   
4. TITLE="text" => Teks yang ditulis akan muncul ketika penunjuk mouse berada di atas teks yang berjalan tersebut.
   
5. SCROLLMOUNT="number" => Untuk mengatur kecepatan gerakan teks dalam satuan pixel. Semakin besar angka yang diatur, maka semakin cepat pula gerakannya
   
6. SCROLLDELAY="number" => Untuk mengatur waktu tunda gerakan dalam satuan mili detik.
   
7. LOOP="number|-1|infinite" => Untuk engatur jumlah loop.
   
8. WIDTH="lebar" => Untuk mengatur lebar blok yang akan dilewati teks dalam satuan pixel atau persen.

Berikut contohnya agar lebih jelas lagi bagi dunsanak:

1. Teks bergerak dari kanan ke kiri.
   <MARQUEE align="center" direction="left" height="" scrollamount="2" width="90%">
   Teks bergerak dari kanan ke kiri. http://dindrirahmad.blogspot.com</MARQUEE>
   Hasilnya:
   
   Teks bergerak dari kanan ke kiri. http://dindrirahmad.blogspot.com
   
   Untuk arah geraknya silahkan dunsanak ganti kata “left” sesuai keiinginan dunsanak, yaitu: “right” (dari kiri ke kanan), “up” (dari bawah ke atas), dan “down” (dari atas ke bawah).
   
2. Efek marquee sesuai perilaku gerakannya.
   <MARQUEE align="center" direction="left" height="" scrollamount="3" width="70%" behavior="alternate">Efek marquee sesuai perilaku gerakannya, yaitu berputar. http://dindrirahmad.blogspot.com</MARQUEE>
   Hasilnya:
   Efek marquee sesuai perilaku gerakannya, yaitu berputar. http://dindrirahmad.blogspot.com
   
3. Efek marquee dengan mengkombinasikan jenis huruf, cetak tebal, dan warna background.
   <MARQUEE bgcolor="black" width="70%"><span style="font-family: arial black; color:green"><u><b>DINDRI RAHMAD</b></u></span></MARQUEE>
   Hasilnya:
   DINDRI RAHMAD
   
4. Mouse over. Maksudnya, teks yang sedang berjalan akan berhenti ketika penunjuk mouse diletakkan di atasnya dan akan berjalan kembali jika penunjuk dipindahkan.
   <MARQUEE onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="50%" height="100" align="center">Silahkan dunsanak arahkan penunjuk mouse ke sini!</MARQUEE>
   Hasilnya:
   Silahkan dunsanak arahkan penunjuk mouse ke sini!
   
5. Efek marquee yang di dalamnya terdapat link.
   <MARQUEE onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="50%" height="100" align="center"><a href=”http://dindrirahmad.blogspot.com”>DindriRahmad.blogspot.com</a></MARQUEE>
   Hasilnya:
   DindriRahmad.blogspot.com

Itu beberapa contoh dari penggunaan efek marquee. Silahkan dunsanak tambahkan kode-kode lain sesuai keinginan dunsanak, misalnya memberikan garis bawah, ukuran huruf, dan lain sebagainya.

Makasii dunsanak, semoga bermanfaat, dan jangan lupa tinggalkan komentarnya ya... ^_^
Wassalamu’alaikum dunsanak....

Posted in: Efek Marquee , Tutorial , Tutorial Blog