Mempercantik blog dengan Kode Marquee

Marquee adalah suatu program HTML untuk membuat teks bisa bergerak atau berjalan. Kode marquee ini banyak digunakan oleh para blogger karena sifatnya yang dinamis serta menarik untuk dilihat sekaligus untuk menghemat tempat pada halaman blog.

Marquee ini bisa di buat dengan menggunakan tag <marquee>TEXT</marquee>. Kata “TEXT” tinggal anda ganti dengan tulisan yang mau ditampilkan.


Atribut marquee adalah sebagai berikut :

1. BGCOLOR="warna" → Untuk mengatur warna background (latar belakang) teks
2. DIRECTION="left/right/up/down" → Mengatur arah gerakan teks
3. BEHAVIOR="scroll/slide/alternate" → Untuk mengatur perilaku gerakan
4. Scroll → teks bergerak berputar
5. Slide → teks bergerak sekali lalu berhenti
6. Alternate → teks bergerak bolak-balik
7. TITLE='pesan" → Pesan akan muncul saat mouse berada di atas teks
8. SCROLLMOUNT="angka" → mengatur kecepatan gerakan dalam pixel, semakin besar angka semakin cepat gerakannya.
9. SCROLLDELAY="angka" → Untuk mengatur waktu tunda gerakan dalam mili detik
10. LOOP="angka|-1|infinite" → Mengatur jumlah loop
11. WIDTH="lebar" → Mengatur lebar blok teks dalam pixel atau persen

Contoh efek marquee dengan arah gerakan

Teks bergerak ke kanan

<marquee direction="right">Teks bergerak ke kanan</marquee>

Teks bergerak ke atas

<marquee direction="right">Teks bergerak ke kanan</marquee>

Contoh efek marquee dengan perilaku gerakan

Teks bergerak bolak-balik

<marquee direction=”left” behaviour="alternate">Teks bergerak bolak-balik</marquee>

Teks bergerak bolak-balik

<marquee direction=”up” behaviour="alternate">Teks bergerak bolak-balik</marquee>

Zig-zag 1

<marquee behavior="alternate" direction="up" width="80%"><marquee direction="right">Zig-zag 1</marquee></marquee>

Zig-zag 2

<marquee behavior="alternate" direction="up" width="80%"><marquee direction="right" behavior="alternate">Zig-zag 2</marquee></marquee>

>>Highlight Text<<

<marquee behavior="alternate" width="10%">>></marquee>Highlight Text<marquee behavior="alternate" width="10%"></marquee>

Hiding Marquee

<marquee behavior="alternate"><marquee width="150">Hiding Marquee</marquee></marquee>

Contoh efek marquee dengan warna tulisan dan latar belakang

Background biru tulisan putih

<font color="#FFFFFF"><marquee direction="left" style="background:BLUE">Background biru tulisan putih</marquee></font>

Border solid tebal 2px

<marquee style="border:BLUE 2px SOLID"> Border solid tebal 2px </marquee>

Marquee dengan variasi warna dan gerakan

<div align="left"><font face="georgia" color="White"><b><marquee BGCOLOR="RED" width="70%" scrollamount="3" behavior="alternate">Marquee dengan variasi warna dan gerakan</marquee></b></FONT></div>

Untuk kode warna silahkan lihat di sini

Contoh efek marquee dengan pengaruh mouse
Ketika mouse sedang berada di area marquee teks akan berhenti dan ketika mouse digeser kembali ke tempat lain maka teks akan bergerak kembali


Arahkan mouse ke tulisan ini

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="50%" height="200" align="center">Arahkan mouse ke tulisan ini</marquee>

Contoh efek marquee untuk membuat daftar link


Polnes

Politeknik Surabaya

Binus University

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="150" align="center">
<a href="http://polnes.ac.id" target="new">Polnes</a><br/>
<a href="http://eepis-its.edu" target="new">Politeknik Surabaya</a><br/>
<a href="http://www.binus.ac.id" target="new">Binus University</a><br/>
</marquee>

Walah... panjang betul yach sampe capek nulisnya ... nyruput dulu ah ..

Insya Allah nanti akan kita lanjutkan ke materi selanjutnya