Cara Membuat Tulisan Berjalan (Marquee) di Blog

Bismillahirrahmanirrahim... 

Marquee adalah elemen HTML yang dapat membuat teks ataupun gambar menjadi bergerak ke arah tertentu.  Tujuan penggunaannya adalah selain untuk menghemat ruang pada halaman blog, efek marquee ini akan lebih menarik perhatian pengunjung blog, terlebih jika ingin menampilkan pengumuman atau semacam pemberitahuan kepada pengunjung blog, penayangan iklan atau penayangan daftar link yang cukup panjang dan lain sebagainya.

Kode yang mengatur animasi dan tampilan marquee ini, terdiri dari beberapa attribute, di bawah ini beberapa attribute yang sering digunakan dalam marquee :

• Behavior : mengatur tipe gerakan.  Terdiri dari 3 jenis; alternate : Teks bergerak bolak-balik.  slide : Teks bergerak sekali saja.  Scroll : Teks bergerak ke satu arah secara terus-menerus.
• Direction : mengatur arah gerakan teks.  Terdiri dari 4 arah gerakan; up : Teks bergerak dari bawah ke atas.  down : Teks bergerak dari atas ke bawah.  left : Teks bergerak dari kanan ke kiri.  right : Teks bergerak dari kiri ke kanan.
• Face : mengatur font (jenis huruf), anda dapat menggunakan jenis huruf misalnya arial, verdana, times new roman dan sebagainya.
• Color : mengatur warna teks, anda dapat menggunakan jenis warna dalam bahasa inggris, misalnya "green", "white", "red", "yellow" dan sebagainya, atau dapat juga menggunakan kode warna heksadesimal seperti, "#ffffff", "#ff5a00", "#abb0b5" dan sebagainya untuk mengetahui kode warna heksadesimal bisa melalui aplikasi seperti Adobe Photoshop atau anda bisa menggunakan tool HEX Color Generator yang terdapat pada side bar blog ini.
• Width : mengatur panjang area marquee dalam satuan pixel
• Height : mengatur tinggi area marquee dalam satuan pixel
• Bgcolor : mengatur warna background pada arean marquee, anda dapat menggunakan nama warna dalam Bahasa Inggris atau menggunakan kode heksadesimal, jika ingin menggunakan warna transparan gunakan kode "transparent"
• Scrolldelay : mengatur waktu tunda gerakan dalam satuan mili detik (0.001 detik)
• Scrollamount : mengatur kecepatan gerakan dalam satuan pixel, gerakan paling lambat menggunakan nilai 1.
• Loop : mengatur jumlah pengulangan gerakan.

Di bawah ini beberapa contoh efek marque beserta kodenya.

Tulisan warna hitam di atas background warna oranye, bergerak dari kiri ke kanan bolak-balik terus-menerus :

<font face="arial" color="black" size="4"><marquee direction="right" behavior="alternate" direction="right" scrollamount="2" height="20px" scrolldelay="10" bgcolor="orange" width="475px">TULISAN YANG DITAMPILKAN</marquee></font>

TULISAN YANG DITAMPILKAN

Tulisan warna orange, tanpa background, bergerak dari kanan ke kiri sebanyak tiga kali :

<font face="times" color="orange" size="4"><marquee direction="left" behavior="scroll" scrollamount="3" height="20px" scrolldelay="10" bgcolor="transparent" loop="3" width="450px"><a href="http://www.binsis.com target="new">TULISAN YANG DITAMPILKAN</a></marquee></font>

TULISAN YANG DITAMPILKAN


Tulisan warna orange serta sebagian ditebalkan dan mengandung link bergerak dari kanan ke kiri terus-menerus,  jika pointer mouse di arahkan ke area marquee tulisan akan berhenti bergerak :

<font face="arial" color="orange" size="4"><marquee direction="left" onmouseover=this.stop() onmouseout=this.start() scrollamount="2" scrolldelay="10">Artikel Tentang <a href="http://kisahkisahislami.blogspot.com" target="_blank"><strong>KISAH KISAH ISLAMI</strong></a> Penggugah Jiwa Meningkatkan Taqwa.</marquee></font>

Artikel Tentang KISAH KISAH ISLAMI Penggugah Jiwa Meningkatkan Taqwa.


Marquee Efek Bounce pada gambar dan teks :

<font face="comic sans ms" color="orange" size="4"><marquee scrolldelay="10" behavior="alternate" direction="up" width="450px" scrollamount="2" height="100px" bgcolor="black"><marquee scrolldelay="10" behavior="alternate" direction="left" scrollamount="2">TULISAN YANG DITAMPILKAN
<a href="https://lh4.googleusercontent.com/-XuBtnj2CYxM/Txypf7XU37I/AAAAAAAAAkk/i5m7TtfftwU/s128/favorites.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img src="https://lh4.googleusercontent.com/-XuBtnj2CYxM/Txypf7XU37I/AAAAAAAAAkk/i5m7TtfftwU/s128/favorites.png" border="0" height="65" width="228" /></a></marquee></marquee></font>

TULISAN YANG DITAMPILKAN 


Marquee yang di dalamnya terdapat teks yang bergerak dari atas ke bawah terus menerus :

<marquee scrollamount="2" direction="down" width="50%" height="200" align="center">
<br />TULISAN YANG DITAMPILKAN
<br />
<br />TULISAN YANG DITAMPILKAN
<br />
<br />TULISAN YANG DITAMPILKAN
<br />
<br />TULISAN YANG DITAMPILKAN
<br />
<br />TULISAN YANG DITAMPILKAN
</marquee>

TULISAN YANG DITAMPILKAN

TULISAN YANG DITAMPILKAN

TULISAN YANG DITAMPILKAN

TULISAN YANG DITAMPILKAN

TULISAN YANG DITAMPILKAN 


Marquee yang di dalam nya terdapat link dari bawah ke atas terus menerus. Berhenti jika mouse di dalam area marquee, dilanjutkan jika mouse di luar area marquee : 

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="100" align="center">
<br /><a href=”http://www.formulabisnisclickbank.com/?id=rulsze08” target=”new”> Formula Bisnis Clickbank - Rahasia sukses bisnis clickbank</a>
<br />
<br /><a href=”http://www.milyarderclub.com/?id=owner” target=”new”> Milyarder Club - Bisnis Online Terbaik #1</a>
<br />
<br /><a href=”http://infodahsyat.com/owner” target=”new”> INFO DAHSYAT - Rahasia Melipat Gandakan Saldo Tabungan dengan Internet</a>
<br /></marquee>

Formula Bisnis Clickbank - Rahasia sukses bisnis clickbank

Milyarder Club - Bisnis Online Terbaik #1

INFO DAHSYAT - Rahasia Melipat Gandakan Saldo Tabungan dengan Internet

Alhamdulillah... silahkan anda bereksperimen, karena apa yang ditampilkan di atas hanyalah sebagai contoh, kreatifitas anda akan menghasilkan yang lebih baik dan lebih sempurna....