Cara Membuat Efek Tulisan Berjalan Di Blog

Blog yang terlihat cantik tentu saja juga akan membuat pengunjung betah berlama-lama di blog kita. Oleh karena itu, selain isi konten blog yang berkualitas, tampilan blog yang cantik juga secara tidak langsung mempengaruhi pengunjung.

Dalam kesempatan ini, saya akan berbagi ilmu untuk mempercantik blog dengan membuat tulisan berjalan agar blog bisa terlihat lebih cantik.

Untuk membuat tulisan berjalan, dapat dengan menggunakan kode Marquee, mungkin ada beberapa dari Anda yang telah mengetahui tentang penggunaan kode Marquee pada pengkodean CSS HTML. Dan mungkin saja banyak yang sudah sangat menguasai kode tersebut.

Dalam penulisannya, diawali dengan menulis <marquee> di awal teks dan diakhiri dengan menulis </marquee> di akhir teks.

Langsung saja kita lihat seperti beberapa contoh dibawah ini :

CONTOH CONTOH
MARQUEE

1. Jika kode marquee digunakan tanpa atribut, sebagai berikut :

          <marquee> Text ini akan terus berjalan </marquee>

dan hasilnya akan seperti di bawah ini

Text ini akan terus berjalan

2. Jika kode marquee digunakan dengan atribut, sebagai berikut :

• atribut scrollamount, digunakan untuk mengatur kecepatan teks yang berjalan
• atribut direction, digunakan untuk menentukan dari arah atas, bawah, kiri atau kanan
• atribut behavior, digunakan untuk menampilkan efek gerakan yaitu scroll, slide dan alternate
• atribut bgcolor, digunakan untuk memberikan warna pada latar belakang teks
• atribut width, digunakan untuk menentukan lebar area untuk menampilkan teks
• atribut height, digunakan untuk menentukan tinggi area tampilan teks
• atribut align, digunakan untuk mengatur posisi teks dari kiri, kanan atau tengah
• atribut onmouseover, digunakan untuk efek berhenti jika disorot mouse pointer
• atribut onmouseout, digunakan untuk efek lanjut setelah tidak disorot mouse pointer

Nah jika diterapkan atribut-atribut tersebut, maka hasilnya adalah seperti dibawah ini :

Contoh marquee dengan atribut direction up, down, left dan right beserta atribut scrollmount :

<marquee direction="right" scrollmount="2"> Contoh Marquee dari kiri ke kanan, dengan kecepatan 2px </marquee>

Contoh Marquee dari kiri ke kanan, dengan kecepatan 2px

<marquee direction="left" scrollmount="2"> Contoh Marquee dari kanan ke kiri, dengan kecepatan 2px </marquee>

Contoh Marquee dari kanan ke kiri, dengan kecepatan 10px

<marquee direction="up" scrollmount="2"> Contoh Marquee dari bawah ke atas, dengan kecepatan 2px </marquee>

Contoh Marquee dari bawah ke atas, dengan kecepatan 2px

<marquee direction="down" scrollmount="5"> Contoh Marquee dari atas ke bawah, dengan kecepatan 5px </marquee>

Contoh Marquee dari atas ke bawah, dengan kecepatan 5px

Contoh marquee dengan atribut behavior scoll, slide dan alternate :

<marquee behavior="alternate" scrollamount="15">TEKS INI AKAN BERJALAN DENGAN EFEK MEMANTUL</marquee>

TEKS INI AKAN BERJALAN DENGAN EFEK MEMANTUL

<marquee behavior="scroll" scrollamount="15">TEKS INI AKAN BERJALAN DENGAN EFEK SCROLL</marquee>

TEKS INI AKAN BERJALAN DENGAN EFEK SCROLL

<marquee behavior="slide" scrollamount="15">TEKS INI AKAN BERJALAN DENGAN EFEK SLIDE</marquee>

TEKS INI AKAN BERJALAN DENGAN EFEK SLIDE

Contoh marquee dengan atribut bgcolor :

<font color="white"><marquee direction="right" scrollamount="2" bgcolor="blue"> Contoh Marquee dengan menggunakan background biru dan warna font putih </font></marquee>

Contoh Marquee dengan menggunakan background biru dan warna font putih

Contoh marquee dengan atribut onmouseover dan onmouseout :

<marquee onmouseover="this.stop()" onmouseout="this.start()"&gtTEKS INI AKAN BERHENTI JIKA DISOROT MOUSE</marquee>

TEKS INI AKAN BERHENTI JIKA DISOROT MOUSE

Nah demikian contoh penerapan kode marquee dengan penggabungan beberapa atribut, sebenarnya masih banyak lagi penerapan-penerapan dengan menggunakan kode marquee. Semoga bisa bermanfaat, walaupun hanya sedikit contoh yang baru bisa saya bagikan, mungkin dilain waktu akan saya lanjutkan dengan beberapa contoh penerapan yang lainnya.

Related Posts:

Tweet