Membuat Marquee Text

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.linggih.com</marquee>

Ganti http://www.linggih.com dengan text anda & lihat hasilnya pada web browser. Jika ingin membuat text tebal, cetak miring, dan dengan garis bawah text tuliskan kodenya seperti ini;
<marquee> <B><U><I>http://linggih.com/internet/blog/webblog-accessories/blinking-textblogspot/</I></U></B> </marquee>

Simpan dan lihat hasilnya.

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.linggih.com</U></B> </marquee>

http://www.linggih.com | Membuat Marquee Text

Membuat Marquee Text

</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. Simpan dan lihat hasilnya. 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.linggih.com</U></B> </marquee> </span>

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.linggih.com</U></B> </marquee> </span>

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.linggih.com</U></B> </marquee> </span>

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">

http://www.linggih.com | Membuat Marquee Text

Membuat Marquee Text

<B><U>http://www.linggih.com</U></B> </marquee> </span>

Simpan dan lihat hasilnya.

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.linggih.com"><B><U>http://www.linggih.com</U></B></a> </marquee> </span>

Simpan dan lihat hasilnya.

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.linggih.com"><B><U>http://www.linggih.com</U></B></a> </marquee> </span>

Simpan dan lihat hasilnya

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://tutorial.blogspot.com"><B><U>http://tutorial.blogspot.com</U></B></a><br>

http://www.linggih.com | Membuat Marquee Text

Membuat Marquee Text

<a title="title tulis di sini2" href="http://tutorial.blogspot.com"><B><U>http://tutorial.blogspot.com</U></B></a><br> <a title="title tulis di sini3" href="http://tutorial.blogspot.com"><B><U>http://tutorial.blogspot.com</U></B></a> </marquee> </span>

Simpan dan lihat hasilnya.

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://tutorial.blogspot.com">Have A Nice Day<img src="http://4.bp.blogspot.com/_S3jZICdfXuI/Sd4bbKbX9I/AAAAAAAAAUU/Ins9sNQQyP8/s320/have-a-nice-day.gif"></a> </marquee> </span>

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.linggih.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.linggih.com"><B><U>Lebih Cepat</U></B></a> </marquee> </span>

http://www.linggih.com | Membuat Marquee Text

Membuat Marquee Text

<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.linggih.com"><B><U>Lebih Cepat Lagi</U></B></a> </marquee> </span>

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

Article Source:

http://linggih.com/internet/blog /webblog- accessories/membuat-m arque -text/

http://www.linggih.com | Membuat Marquee Text