Thursday, June 11, 2009

Membuat Marquee pada Blog

Untuk beberapa orang yang suka otak-atik blog/website, teknik marquee tentulah bukan suatu hal yang jarang didengar. Marquee sendiri adalah suatu kode HTML yang digunakan untuk membuat suatu objek bergerak. Marquee adalah suatu teknik yang begitu popular di kalangan blogger. Kode Marquee terdiri dari <marquee> ... </marquee>.

Atribut dari tag marquee terdiri dari :
1. BGCOLOR="warna" --> digunakan untuk mengatur warna background dari sebuah objek baik itu teks,image, dsb.

2. DIRECTION="left/right/up/down" --> digunakan untuk mengatur arah pergerakan objek

3. BEHAVIOUR="scroll/slide/alternate" --> digunakan untuk mengatur tingkah laku dari pergerakan objek.
- Scroll = pergerakan objek secara scroll
- Slide = pergerakan objek sesekali dan kemudian berhenti
- Alternate = pergerakan objek dari kiri ke kanan dan kemudian kembali lagi

4. TITLE="pesan" --> menampilkan suatu pesan jika mouse didekatkan ke objek marquee

5. SCROLLAMOUNT="angka" --> mengatur kecepatan marquee (semakin besar semakin cepat)

6. SCROLLDELAY="delay" --> mengatur waktu delay (satuan detik)

7. LOOP="angka|-1|infinite --> mengatur jumlah perulangan

8. WIDTH="angka" --> mengatur lebar objek marquee (satuannya bisa pixel(px) atau persentase (%))

Contoh 1:
Teknik marquee dasar
<marquee align="center" direction="left" height="200" scrollamount="2" width="100%" behavior="alternate">
Teks ini akan berjalan dari kiri ke kanan dengan kecepatan yang lebih cepat dan berulang-ulang
</marquee>

Hasilnya :

Teks ini akan berjalan dari kiri ke kanan dengan kecepatan yang lebih cepat dan berulang-ulang


Contoh 2:
Pada bagian ini objek marquee akan berhenti jika mouse diarahkan kepadanya dan akan kembali bergerak jika mouse tidak berada di atasnya lagi.

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="down" width="100%" height="100" align="center">

Arahkan mouse ke sini dan lihat hasilnya

</marquee>

Hasilnya :


Arahkan mouse ke sini dan lihat hasilnya



Contoh 3 :
Pada bagian ini, objek marquee adalah link dari suatu website/blog. Perhatikan kode berikut:
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="3" direction="up" width="100%" height="100" align="center">

<a href="http://usaha-onlines.blogspot.com/" target="new">Belajar SEO</a><br />
<a href="http://r083rt-blog.blogspot.com/" target="new">My Blog </a><br />
<a href="http://www.zumin-ads.com/index.php?ref=r083rt" target="new">The Best PTC </a><br />

</marquee>

Hasilnya adalah :


Belajar SEO


My Blog


The Best PTC




Gimana? Mudah bukan bermain dengan marquee ? Selamat bereksperimen.



No comments: