Membuat Efek Teks Berjalan dengan Fungsi Dasar Marquee

Membuat Teks Berjalan di blog merupakan suatu "kesenangan" tersendiri bagi para blogger, termasuk aku. Teks berjalan biasa digunakan untuk menyajikan sebuah informasi singkat dengan cara yang berbeda. Berbagai Informasi dapat ditampilkan dengan teks berjalan, seperti introduction (pengenalan), greeting (sapaan), advertisment (iklan), atau dipakai untuk news update (berita terkini), dan lain sebagainya.

Lalu bagaimana caranya membuat teks berjalan di halaman blog agar bisa menampilkan beberapa informasi singkat layaknya Headline News di televisi?

Efek dari Teks berjalan ini merupakan hasil dari fungsi elemen Marquee dalam HTML, dengan anchor tag sebagai berikut:

<marquee>LETAKKAN TEKS ANDA DISINI</marquee>

Hasilnya :

LETAKKAN TEKS ANDA DISINI

Dari anchor tag dasar Marquee ini, Anda dapat memodifikasinya menjadi lebih menarik. Misalnya dalam hal ukuran, bentuk huruf, warna dan bagaimana efek dari teks itu saat bergerak.

Berikut beberapa hasil dari modifikasi kode HTML <marquee>, yang saya pelajari dari berbagai blogger senior, termasuk dari Kang Rohman di http://kolom-tutorial.blogspot.com:

1. Marquee dengan Background Color

<marquee bgcolor="f9fc23">LETAKKAN TEKS ANDA DISINI</marquee>

Hasilnya:
LETAKKAN TEKS ANDA DISINI

2. Marquee dengan Efek Berhenti Saat Kursor Melewati Teks

<marquee onmouseover="this.stop()" onmouseout="this.start()">LETAKKAN TEKS ANDA DISINI</marquee>

Hasilnya:
LETAKKAN TEKS ANDA DISINI

3. Marquee memiliki Judul/Title Saat Kursor Melewati Teks

<marquee title="Blog Anak Bangsa">LETAKKAN TEKS ANDA DISINI</marquee>

Hasilnya:
LETAKKAN TEKS ANDA DISINI

4. Marquee dengan Lebar Jalur Teks

<marquee width="50%">LETAKKAN TEKS ANDA DISINI</marquee>

Hasilnya:
LETAKKAN TEKS ANDA DISINI

Catatan: Anda dapat mengatur lebar jalur yang akan dilewati teks dengan satuan persen (%) atau nilai atribut lebar elemen dalam piksel, sesuai dengan selera dan tampilan halaman blog.

5. Marquee dengan Tinggi Bidang Teks

<marquee height="70">LETAKKAN TEKS ANDA DISINI</marquee>

Hasilnya:
LETAKKAN TEKS ANDA DISINI

6. Marquee dengan efek Arah Teks

<marquee direction="down" height="100">LETAKKAN TEKS ANDA DISINI</marquee>

Hasilnya:
LETAKKAN TEKS ANDA DISINI

Catatan : Untuk menentukan efek arah teks, Anda dapat merubah kode/nilai pada marquee direction sebagai berikut:

• up = Efek Ke atas
• down = Efek Ke bawah
• left = Efek Ke kiri
• right = Efek Ke kanan

7. Marquee dengan Efek Kecepatan Teks

<marquee scrollamount="30">LETAKKAN TEKS ANDA DISINI</marquee>

Hasilnya:
LETAKKAN TEKS ANDA DISINI

Catatan : Anda dapat menggunakan nilai bebas tanpa perlu memberikan satuan, misalnya pakai angka 15 atau 25. Semakin besar angkanya maka semakin cepat efek teks bergerak.

8. Marquee dengan Efek Delay

<marquee scrolldelay="1000">LETAKKAN TEKS ANDA DISINI</marquee>

Hasilnya:
LETAKKAN TEKS ANDA DISINI

Catatan: Delay dalam marquee diset dengan tag "scrollamount", Efek ini berarti memperlambat efek tulisan yang ditampilkan. Untuk Delay sebesar 1 detik dapat memasukkan nilai 1000, untuk 2 detik nilainya 2000, dan seterusnya sesuai kebutuhan Anda.

9. Marquee dengan Efek Behavior

<marquee behavior="alternate">LETAKKAN TEKS ANDA DISINI</marquee>

Hasilnya:
LETAKKAN TEKS ANDA DISINI

Catatan: Terdapat 3 kode nilai pada behavior ini, nilai-nilai tersebut adalah:

• scroll = Efek yang menampilkan teks berjalan atau bisa dikatakan ini bentuk default dari marquee;
• slide = Efek yang menampilkan teks berjalan dan akan berhenti diujung batas yang telah dibuat
• alternate = Efek yang menampilkan teks bouncing atau memantul dari kanan ke kiri atau sebailknya

10. Marquee dengan foto atau gambar

<marquee>URL LINK FOTO</marquee>

Untuk menampilkan efek gambar agar lebih menarik, maka gunakanlah kombinasi dari beberapa kode diatas, contoh:

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

<img src="LINK-FOTO" height="130" width="190" />
<br/><br/>
<img src="LINK-FOTO" height="130" width="190" />

</marquee>

Hasilnya:




Ada yang mau menambahkan kode dasar marquee ini, silakan komentar. Semoga bermanfaat.


Referensi: kolom-tutorial.blogspot.com