Cara Membuat Tulisan Berjalan (Komplit)

Browse » Home » HTML Tutorials » Cara Membuat Tulisan Berjalan (Komplit)

Cara Membuat Tulisan Berjalan (Komplit)

Ditulis oleh Kang eNeS Sabtu, 13 Juni 2009. 12.56
Label: HTML Tutorials komentar (98)

Bloger yang doyan ngotak-ngatik blog-nya supaya tampil aktraktif, ciamik dan penuh daya tarik (tukang becak kali...), mungkin kepingin ada tampilan tulisan yang berkerak atau berjalan. Sebenarnya gampang saja kok membuat supaya tulisan tersebut bergerak/berjalan, kamu hanya cukup menambahkan perintah <marquee> di depan tulisan kamu dan menutupnya dengan perintah </marquee>, seperti contoh berikut:

<marquee>TULISAN BERJALAN</marquee>

Hasilnya akan nampak seperti ini:

TULISAN BERJALAN

Masih belum puas? Ok, berikut akan disajikan tulisan seputar "Tulisan Bergerak" secara komplit supaya kamu bener-bener ngerti dan merasa puas.

Mengatur tingkat kecepatan

Untuk mengatur tingkat kecepatan bergerak, kamu tinggal menambahkan perintah scrollamount setelah perintah marquee, dengan nilai scrollamount ≠ 0 (jika nol tidak akan bergerak), seperti contoh berikut:

<marquee scrollamount="2">TULISAN BERJALAN</marquee>
<marquee scrollamount="3">TULISAN BERJALAN</marquee>
<marquee scrollamount="4">TULISAN BERJALAN</marquee>

Hasilnya akan nampak seperti ini:

TULISAN BERJALAN
TULISAN BERJALAN
TULISAN BERJALAN

Semakin besar nilai scrollamount-nya, akan semakin cepat bergeraknya, demikian sebaliknya.

Mengatur arah pergerakan

Arah pergerakan marquee secara default akan bergerak dari kanan ke kiri (left). Kamu dapat mengatur arah pergerakannya dengan menambahkan perintah direction, seperti contoh berikut:

<marquee scrollamount="2" direction="right">TULISAN BERJALAN</marquee>
<marquee scrollamount="2" direction="up" width="100%" height="50">TULISAN BERJALAN</marquee>
<marquee scrollamount="2" direction="down" width="100%" height="50">TULISAN BERJALAN</marquee>

Hasilnya akan nampak seperti ini:

TULISAN BERJALAN
TULISAN BERJALAN
TULISAN BERJALAN

Khusus untuk perintah arah atas (up) dan bawah (down), sebaiknya kamu menambahkan perintah pengaturan lebar (width) dan tinggi (height) supaya tidak terlalu tinggi atau terlalu pendek.

Membuat tulisan bolak-balik

Bagaimana dengan tulisan bolak-balik? Untuk tulisan seperti ini kamu tinggal menambahkan behavior="alternate", seperti contoh berikut:

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

Hasilnya akan nampak seperti ini:

TULISAN BOLAK-BALIK

Kamu juga dapat melakukan pengaturan tingkat kecepatan dan arah pergerakan pada tulisan bolak-balik ini. Caranya seperti yang dijelaskan di atas.

Membuat tulisan bergerak menjadi diam dan bergerak lagi

Jika tulisan bergerak kamu ingin diam jika ditunjuk oleh pointer mouse dan bergerak lagi setelah pointer mouse itu dijauhkan maka kamu harus menambahkan onmouseover="this.stop()" (perintah supaya berhenti) dan onmouseout="this.start()" (perintah supaya bergerak lagi) pada perintah-perintah tadi, seperti contoh berikut:

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

Hasilnya akan nampak seperti ini (coba tunjuk oleh pointer mouse kamu):

TULISAN BOLAK-BALIK

Menambahkan background warna

Untuk menambahkan backgound pada tulisan, kamu cukup menambahkan perintah bgcolor="warna" (warna: red, blue, orange, green, dll) atau perintah bgcolor="#kode warna" (mengenai kode warna silahkan baca artikel ini) pada perintah-perintah tadi, seperti contoh berikut:

<marquee behavior="alternate" direction="left" bgcolor="orange">TULISAN BOLAK-BALIK</marquee>
<marquee behavior="alternate" direction="right" bgcolor="#FDEAE8">TULISAN BOLAK-BALIK</marquee>

Hasilnya akan nampak seperti ini:

TULISAN BOLAK-BALIK
TULISAN BOLAK-BALIK

Penambahan perintah dan penutup pada tulisan, supaya tercetak tebal. Jika kamu mau tulisan tercetak miring tambahkan , dan garis bawah tambahkan perintah .

Nah, sekarang sudah jelas kan? Kalo masih belum jelas, kebangetan tuh!!! Hehehe...
Ok deh, selamat mencobanya....

Cara Membuat Tulisan Berjalan (Komplit)

Artikel Terkait Dengan HTML Tutorials

98 komentar Posting Komentar

Tambahkan Komentar

10 Artikel Terbaru

10 Artikel Terpopuler

Blog Tutorials

Seputar SEO

HTML Tutorials

CSS dan Javascript

Komputer dan Internet

Agama

Politik

Sosial Budaya

Sekedar Coretan

Yang Baru Dari Sastra Culun

Direkomendasikan Teman Facebook

98 komentar
Posting Komentar