Membuat Marquee Text

Jika pada artikel sebelumnya saya menulis tentang bagaimana "Membuat Blinking Text (Text Berkedip) di Blog," kali ini tentang cara lain yang dapat digunakan untuk membuat text lebih kelihatan menarik dengan membuat 'Text Berjalan" (Marquee Text). Ada beberapa macam model marque text, berikut beberapa contoh diantaranya;

Marquee text biasa. Contoh;

<marquee>http://www.linggihnote.blogspot.com</marquee>

Ganti 'http://www.linggihnote.blogspot.com' dengan text anda, maka hasilnya akan seperti ini;

http://www.linggihnote.blogspot.com

Jika ingin membuat text tebal, cetak miring, dan dengan garis bawah text tuliskan kodenya seperti ini;

<marquee>
<B><U><I>http://www.linggihnote.blogspot.com</I></U></B>
</marquee>

Hasilnya akan seperti ini;

http://www.linggihnote.blogspot.com

Jika masih kurang puas, ingin merubah arah text ataupun ingin menambahkan warna bachground text ikuti cara berikut ini;

Untuk merubah arah text, tambahkan kode berikut ini => direction="tentukan arah text pilihan anda". Ganti text "tentukan arah text pilihan anda" dengan 'left, right, up, down, atau alternate'. 'left' mengarahkan text ke kiri, 'right' ke kanan, 'up' ke atas', 'down' ke bawah, 'alternate' bolak balik kayak orang bingung ha..ha..! Atau jika ingin efek geraknya hanya satu kali setelah itu berhenti, tambahkan kode ini ==> behavior="slide" <==. Lihat kode dan contohnya di bawah. Saya akan coba membuat marquee text dengan ketentuan text mengarah ke kanan, background warna kuning, teks warna merah, tetapi efek teks miring saya hilangkan;

<span style="color:#ff0000;">
<marquee bgcolor="#ffff00" direction="right">
<B><U>http://www.linggihnote.blogspot.com</U></B>
</marquee>
</span>

'bgcolor' (warna background) saya pilih warna kuning, bisa anda tuliskan dengan kode warna seperti contoh di atas '#ffff00', atau cukup dengan menuliskan 'yellow', begitu juga dengan warna teksnya, hasilnya sama saja. Text yang muncul jadinya seperti ini;

http://www.linggihnote.blogspot.com

Merubah arah teks ke atas atau ke bawah, caranya sama seperti di atas. Tetapi barangkali anda ingin menyesuaikan ukuran tingginya, Maka tambahkan kode ini ==> height="100" <== artinya mempunyai tinggi 100px (pixel). Contoh;

<span style="color:#ff0000;">
<marquee bgcolor="#ffff00" direction="up" height="100">
<B><U>http://www.linggihnote.blogspot.com</U></B>
</marquee>
</span>

Hasilnya akan seperti ini;

http://www.linggihnote.blogspot.com

Hasil di atas dilihat sepertinya kurang rapi, anda dapat merapikannya dengan merubah menentukan lebarnya. Lebar ditentukan 270px;

<span style="color:#ff0000;">
<marquee bgcolor="#ffff00" direction="up" height="100" width="270">
<B><U>http://www.linggihnote.blogspot.com</U></B>
</marquee>
</span>

Hasilnya seperti ini;

http://www.linggihnote.blogspot.com

Sedangkan penambahan kode => behaviour="slide" <= efek geraknya hanya satu kali, contoh penulisannya seperti ini;

<span style="color:#ff0000;">
<marquee bgcolor="#ffff00" direction="up" height="100" behavior="slide" width="270">
<B><U>http://www.linggihnote.blogspot.com</U></B>
</marquee>
</span>

Hasilnya seperti ini;

http://www.linggihnote.blogspot.com

Kalau efek bolak balik contoh penyisipan codenya seperti ini (isikan 'behavior' dengan 'alternate');

<span style="color:#ff0000;">
<marquee bgcolor="#ffff00" behavior="alternate" direction="up" height="100" width="270">
<B><U>http://www.linggihnote.blogspot.com</U></B>
</marquee>
</span>

Hasilnya akan kelihatan seperti ini;

http://www.linggihnote.blogspot.com

Bagaimana jika ingin menambahkan url link pada text?

<span style="color:#ff0000;">
<marquee bgcolor="#ffff00" behavior="alternate" direction="up" height="100" width="270">
<a title="title tulis di sini" href="http://www.linggihnote.blogspot.com"><B><U>http://www.linggihnote.blogspot.com</U></B></a>
</marquee>
</span>

Lihat hasilnya;

http://www.linggihnote.blogspot.com

Sulit sekali klik linknya jika bergerak terus, bagaimana caranya supaya apabila mouse diarahkan ke link teksnya berhenti. Tambahkan kode ini => OnMouseOver="this.stop()" OnMouseOut="this.start()" <= Lihat di bawah;

<span style="color:#ff0000;">
<marquee bgcolor="#ffff00" behavior="alternate" direction="up" height="100" width="270" OnMouseOver="this.stop()" OnMouseOut="this.start()">
<a title="title tulis di sini" href="http://www.linggihnote.blogspot.com"><B><U>http://www.linggihnote.blogspot.com</U></B></a>
</marquee>
</span>

Hasilnya seperti di bawah;

http://www.linggihnote.blogspot.com

Bagaimana jika link yang mau dibuat lebih dari satu?

<span style="color:#ff0000;">
<marquee bgcolor="#ffff00" behavior="alternate" direction="up" height="100" width="270" OnMouseOver="this.stop()" OnMouseOut="this.start()"><br>
<a title="title tulis di sini" href="http://linggihnote.blogspot.com"><B><U>http://linggihnote.blogspot.com</U></B></a><br>
<a title="title tulis di sini2" href="http://linggihnote.blogspot.com"><B><U>http://linggihnote.blogspot.com</U></B></a><br>
<a title="title tulis di sini3" href="http://linggihnote.blogspot.com"><B><U>http://linggihnote.blogspot.com</U></B></a>
</marquee>
</span>

Hasilnya seperti ini;

http://linggihnote.blogspot.com
http://linggihnote.blogspot.com
http://linggihnote.blogspot.com

Bagaimana cara menyisipkan image (gambar)?

<span style="color:#ff0000;">
<marquee bgcolor="#ffff00" behavior="scroll" direction="left" height="100" width="500" OnMouseOver="this.stop()" OnMouseOut="this.start()">
<a title="title tulis di sini" href="http://linggihnote.blogspot.com">Have A Nice Day<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBAe_hkpTeTFKf6ga-EJ2eqIOdsioOIZ34R8Faj1YGyDlM21CbWcwQKA5spB-VirQml4fLkAX7y4Ndxo4KfxThC5E_oqjD60uzN835zGYOm7jPspPpiOTEQ0awhETCGSUwo67NsHcMg1A/s320/have-a-nice-day.gif"></a>
</marquee>
</span>

Hasilnya akan seperti ini;

Have A Nice Day

Sekarang tinggal bagaimana cara menyesuaikan kecepatan scroll nya, lihat kode di bawah;

<span style="color:#ff0000;">
<marquee bgcolor="#ffff00" behavior="scroll" direction="right" width="500" scrollamount="5" OnMouseOver="this.stop()" OnMouseOut="this.start()">
<a title="title tulis di sini" href="http://www.linggihnote.blogspot.com"><B><U>lambat</U></B></a>
</marquee>
</span>

<span style="color:#ff0000;">
<marquee bgcolor="#ffff00" behavior="scroll" direction="right" width="500" scrollamount="10" OnMouseOver="this.stop()" OnMouseOut="this.start()">
<a title="title tulis di sini" href="http://www.linggihnote.blogspot.com"><B><U>Lebih Cepat</U></B></a>
</marquee>
</span>

<span style="color:#ff0000;">
<marquee bgcolor="#ffff00" behavior="scroll" direction="right" width="500" scrollamount="20" OnMouseOver="this.stop()" OnMouseOut="this.start()">
<a title="title tulis di sini" href="http://www.linggihnote.blogspot.com"><B><U>Lebih Cepat Lagi</U></B></a>
</marquee>
</span>

Hasilnyaseperti ini;

lambat
Lebih Cepat
Lebih Cepat Lagi

Seberapa cepat scroll amount nya terserah anda, tinggal edit nilai (value) 'scrollamount'. Semakin banyak semakin cepat.

Have fun...
:D