Membuat Teks/tulisan dan Gambar Berjalan Dengan Scrip HTML (Marquee)

Bagaimana cara membuat teks/tulisan berjalan? teks atau teks berjalan atau running text ini biasa juga kita sebut marquee, karena untuk membuatnya menggunakan kode html marquee. Tulisan ini bisa membuat blog anda terlihat lebih menarik bagi pengunjung, untuk membuat tulisan berjalan atau Marquee ini sebenarnya sangat mudah. Kali ini kita akan mencoba membuat beberapa jenis marquee, agar lebih banyak variasi yang bisa anda pilih. Terlebih dulu kita akan belajar membuat kodenya, lalu belajar cara memasangnya pada blog, berikut kode dasar untuk membuat marquee atau teks berjalan adalah....

<marquee>CONTOH TULISAN BERJALAN</marquee>

Kode Diatas akan terlihat seperti ini:

CONTOH TULISAN BERJALAN

Tapi selain kode di atas ada beberapa tambahan kode yang bisa anda berikan untuk membuat variasi dari marquee. Di bawah ini kita akan berikan kodenya dan sekaligus mempraktikkan marquee tersebut....
kode scrolldelay="angka" digunakan untuk mengatur jeda dalam milidetik, jadi untuk jeda 1 detik masukkan nilai 1000
Contoh:

<marquee scrolldelay="500">TULISAN BERJALAN DELAY 0.5 DETIK</marquee>

Hasil dari kode diatas:

TULISAN BERJALAN DELAY 0.5 DETIK

Kode loop="angka|-1|infinite" digunakan untuk mengatur pengulangan atau repetisi dari marquee
Contoh:

<marquee loop="3">TULISAN BERJALAN BEROTASI 3X</marquee>

Hasil dari kode diatas:

TULISAN BERJALAN BEROTASI 3X

Keterangan : Setelah tiga kali berotasi teks akan berhenti/hilang.

Kode width="lebar" digunakan untuk mengatur lebar media teks berjalan, bisa dalam satuan pixel atau persen dari bidang yang ada
Contoh:

<marquee width="50%">TULISAN BERJALAN LEBAR 50%</marquee>

Hasil dari kode diatas:

TULISAN BERJALAN LEBAR 50%

Kode bgcolor="warna" digunakan untuk memberikan warna latar pada teks
Contoh:

<marquee bgcolor="blue">TULISAN BERJALAN LATAR BIRU</marquee>

Hasil dari kode diatas:

TULISAN BERJALAN LATAR BIRU

Kode title="pesan" digunakan untuk memunculkan pesan jika kursor mouse diletakkan di jalur teks berjalan
Contoh:

<marquee title="MUNCUL PESAN TEKS">TULISAN BERJALAN DENGAN PESAN</marquee>

Hasil dari kode diatas:

TULISAN BERJALAN DENGAN PESAN

Keterangan: Taruh kursor mouse pada jalur dan bukan pada teks untuk membaca pesan

Kode scrollamount="angka" digunakan untuk mengatur kecepatan pergerakan tulisan semakin besar angkanya semakin kencang
Contoh:

<marquee scrollamount="15">TULISAN BERJALAN KECEPATAN 15</marquee>

Hasil dari kode diatas:

TULISAN BERJALAN KECEPATAN 15

Kode direction="left/right/up/down" digunakan untuk mengatur arah pergerakan running text
Contoh kode:

<marquee direction="right">TULISAN BERJALAN KANAN</marquee>

Hasil dari kode diatas:

TULISAN BERJALAN KANAN

Kode behavior="scroll/slide/alternate" digunakan untuk mengatur type pergerakan Scroll jika ingin teks bergerak terus ke suatu sisi dan muncul dari sisi lain, Slide jika ingin teks bergerak sekali kemudian berhenti dan diulangi lagi, Alternate jika ingin teks terlihat memantul/bouncing dari ujung kembali ke ujung.
Contoh kode:

<marquee behavior="alternate">TULISAN BERJALAN BOLAK-BALIK</marquee>

Hasil dari kode diatas:

TULISAN BERJALAN BOLAK-BALIK

Sekarang kita akan coba membuat variasi dari kode di atas. Kita akan membuat teks ini bergerak turun dan oleh karena itu kita perlu menambah kode height untuk membuat ruang pergerakan teks;
Contoh kode:

<marquee direction="down" height="100">TULISAN BERGERAK KE BAWAH</marquee>

Hasil dari kode diatas:

TULISAN BERGERAK KE BAWAH

Membuat tulisan bisa berhenti jika dilintasi kursor/mouse
Anda dapat menambahkan scrip dibawah ini,

onmouseover="this.stop()" onmouseout="this.start()"

Contoh kodenya seperti berikut:

<marquee behavior="alternate" onmouseover="this.stop()" onmouseout="this.start()">TULISAN BERGERAK BOLAK-BALIK</marquee>

Hasil dari kode diatas:

TULISAN BERGERAK BOLAK-BALIK

Keterangan: Silahkan lintaskan kursor pada jalur ataupun teks untuk menghentikan pergerakan

Memberikan link pada tulisan berjalan
Anda bisa mengunakan kode berikut:
<marquee direction="down" height="100" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4">

TULISAN BERGERAK DENGAN LINK

</marquee>
Hasil dari kode diatas:

TULISAN BERGERAK DENGAN LINK

Mengubah Huruf, Warna dan Ukuran Huruf Teks Berjalan Marquee
Jenis huruf dan ukuran bisa diubah dengan menambahkan kode style="font-family: impact; font-size:24px; color: #cc0000;"

font-family: impact; adalah kode untuk mengubah jenis huruf. Jika anda tidak suka dengan font impact, silahkan diganti dengan Arial, Times New Roman, dan lain-lain

font-size:24px; adalah kode untuk mengatur ukuran huruf. Ubah nilai 24 sesuka hati anda. Semakin besar nilainya, maka semakin besar juga hurufnya.

color:#cc0000; adalah kode untuk mengatur warna huruf. Silahkan mengganti kode hex #cc0000 dengan nilai hex yang anda suka.
Contoh:
<marquee bgcolor="blue" style="font-family: impact; font-size:24px; color:#cc0000;" >TEKS  FONT FAMILY LATAR KUNING FONT 24</marquee>

Hasil dari kode diatas:
TEKS  FONT FAMILY LATAR KUNING FONT 24

Menggunankan marquee untuk gambar berjalan
Scrip yang digunakan sama dengan scrip tulisan berjalan hanya ada penambahan pada
Contoh:

<marquee direction="right"> <img src="http://www.4shared.com/download/gNnBM0Sjba/Blogger.jpg" /></marquee>

Keterangan: teks yang berwarna merah merupakan link dimana data/image tersimpan

Hasil dari kode diatas:

Demikian berbagai ragam cara untuk membuat teks dan gambar berjalan. Mudah-mudahan ini bisa menjadi alternatif bagi anda dalam menghias blog menjadi lebih menarik. Silahkan bereksperimen untuk meramu kode-kode di atas.