kali ini saya akan menulis tentang cara lain yang dapat digunakan untuk membuat text lebih lebih kelihatan menarik dengan membuat ‘Text Berjalan” (Marquee Text). Ada beberapa macam model marque text, berikut akan coba saya jelaskan beberapa diantaranya ;
Marquee text biasa. Contoh ; kode tag html yang ditulis
Ganti ‘http://www.artikelpedian.blogspot.com’ dengan text anda, maka hasilnya akan seperti ini ;
Jika ingin membuat text tebal, cetak miring, dan dengan garis bawah text tuliskan kodenya seperti ini ;
Hasilnya akan seperti ini ;
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 he..he..! 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 sehingga penulisan kodenya ;
'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 ;
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 penulisannya ;
Hasilnya akan seperti ini;
Hasil di atas dilihat sepertinya kurang rapi, anda dapat merapikannya dengan merubah menentukan lebarnya. Seperti ini penulisan kodenya (lebar saya rubah menjadi 270px) ;
Hasilnya seperti ini ;
Sedangkan penambahan kode => behaviour="slide" <= efek geraknya hanya satu kali, contoh penulisannya seperti ini ;
Hasilnya seperti ini ;
Kalau efek bolak balik (kayak orang bingung) contoh penulisannya seperti ini (isikan 'behavior' dengan 'alternate');
Hasilnya akan kelihatan seperti ini ;
Bagaimana jika ingin menambahkan url link pada text? Lihat penambahan kodenya di bawah ;
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 ;
Hasilnya seperti di bawah ;
OK. Jika link yang mau dibuat lebih dari satu, begini penulisan kodenya ;
Hasilnya seperti ini ;
Bisakah marquee digunakan untuk image (gambar)? Bisa, tulis kodenya seperti di bawah ;
Hasilnya akan seperti ini ato kyak punya qu;
Sekarang tinggal bagaimana cara menyesuaikan kecepatan scroll nya, lihat penulisan kode di bawah ;
Hasilnyaseperti ini ;
1 | <marquee>http://www.artikelpedian.blogspot.com</marquee> |
Jika ingin membuat text tebal, cetak miring, dan dengan garis bawah text tuliskan kodenya seperti ini ;
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 he..he..! 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 sehingga penulisan kodenya ;
1 | <span style="color:#ff0000;"> |
2 | <marquee bgcolor="#ffff00" direction="right"> |
3 | <B><U>http://www.artikelpedian.blogspot.com</U></B> |
4 | </marquee> |
5 | </span> |
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 penulisannya ;
1 | <span style="color:#ff0000;"> |
2 | <marquee bgcolor="#ffff00" direction="up" height="100"> |
3 | <B><U>http://www.artikelpedian.blogspot.com</U></B> |
4 | </marquee> |
5 | </span> |
Hasil di atas dilihat sepertinya kurang rapi, anda dapat merapikannya dengan merubah menentukan lebarnya. Seperti ini penulisan kodenya (lebar saya rubah menjadi 270px) ;
1 | <span style="color:#ff0000;"> |
2 | <marquee bgcolor="#ffff00" direction="up" height="100" width="270"> |
3 | <B><U>http://www.artikelpedian.blogspot.com</U></B> |
4 | </marquee> |
5 | </span> |
Sedangkan penambahan kode => behaviour="slide" <= efek geraknya hanya satu kali, contoh penulisannya seperti ini ;
1 | <span style="color:#ff0000;"> |
2 | <marquee bgcolor="#ffff00" direction="up" height="100" behavior="slide" width="270"> |
3 | <B><U>http://www.artikelpedian.blogspot.com</U></B> |
4 | </marquee> |
5 | </span> |
Kalau efek bolak balik (kayak orang bingung) contoh penulisannya seperti ini (isikan 'behavior' dengan 'alternate');
1 | <span style="color:#ff0000;"> |
2 | <marquee bgcolor="#ffff00" behavior="alternate" direction="up" height="100" width="270"> |
3 | <B><U>http://www.artikelpedian.blogspot.com</U></B> |
4 | </marquee> |
5 | </span> |
Bagaimana jika ingin menambahkan url link pada text? Lihat penambahan kodenya di bawah ;
1 | <span style="color:#ff0000;"> |
2 | <marquee bgcolor="#ffff00" behavior="alternate" direction="up" height="100" width="270"> |
3 | <a title="title tulis di sini" href="http://www.artikelpedian.blogspot.com"><B><U>http://www.artikelpedian.blogspot.com</U></B></a> |
4 | </marquee> |
5 | </span> |
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 ;
1 | <span style="color:#ff0000;"> |
2 | <marquee bgcolor="#ffff00" behavior="alternate" direction="up" height="100" width="270" OnMouseOver="this.stop()" OnMouseOut="this.start()"> |
3 | <a title="title tulis di sini" href="http://www.artikelpedian.blogspot.com"><B><U>http://www.artikelpedian.blogspot.com</U></B></a> |
4 | </marquee> |
5 | </span> |
OK. Jika link yang mau dibuat lebih dari satu, begini penulisan kodenya ;
1 | <span style="color:#ff0000;"> |
2 | <marquee bgcolor="#ffff00" behavior="alternate" direction="up" height="100" width="270" OnMouseOver="this.stop()" OnMouseOut="this.start()"><br> |
3 | <a title="title tulis di sini" href="http://tutorial.blogspot.com"><B><U>http://tutorial.blogspot.com</U></B></a><br> |
4 | <a title="title tulis di sini2" href="http://tutorial.blogspot.com"><B><U>http://tutorial.blogspot.com</U></B></a><br> |
5 | <a title="title tulis di sini3" href="http://tutorial.blogspot.com"><B><U>http://tutorial.blogspot.com</U></B></a> |
6 | </marquee> |
7 | </span> |
Bisakah marquee digunakan untuk image (gambar)? Bisa, tulis kodenya seperti di bawah ;
1 | <span style="color:#ff0000;"> |
2 | <marquee bgcolor="#ffff00" behavior="scroll" direction="left" height="100" width="500" OnMouseOver="this.stop()" OnMouseOut="this.start()"> |
3 | <a title="title tulis di sini" href=""></a> |
4 | </marquee> |
5 | </span> |
Sekarang tinggal bagaimana cara menyesuaikan kecepatan scroll nya, lihat penulisan kode di bawah ;
01 | <span style="color:#ff0000;"> |
02 | <marquee bgcolor="#ffff00" behavior="scroll" direction="right" width="500" scrollamount="5" OnMouseOver="this.stop()" OnMouseOut="this.start()"> |
03 | <a title="title tulis di sini" href="http://www.artikelpedian.blogspot.com"><B><U>lambat</U></B></a> |
04 | </marquee> |
05 | </span> |
06 |
07 | <span style="color:#ff0000;"> |
08 | <marquee bgcolor="#ffff00" behavior="scroll" direction="right" width="500" scrollamount="10" OnMouseOver="this.stop()" OnMouseOut="this.start()"> |
09 | <a title="title tulis di sini" href="http://www.artikelpedian.blogspot.com"><B><U>Lebih Cepat</U></B></a> |
10 | </marquee> |
11 | </span> |
12 |
13 | <span style="color:#ff0000;"> |
14 | <marquee bgcolor="#ffff00" behavior="scroll" direction="right" width="500" scrollamount="20" OnMouseOver="this.stop()" OnMouseOut="this.start()"> |
15 | <a title="title tulis di sini" href="http://www.artikelpedian.blogspot.com"><B><U>Lebih Cepat Lagi</U></B></a> |
16 | </marquee> |
17 | </span> |