Cara Buat Text Atau Tulisan Berjalan ( Marquee )

Text atau tulisan berjalan / bergerak ada beberapa macam jenisnya, dari yang paling sederhana yaitu text bergerak dari kanan ke kiri,  gerakan text bolak-balik, atau gerakan text ke atas dan ke bawah dan masih banyak variasi yang bisa Anda buat nanti. Baiklah kita langsung saja ikuti  panduan dibawah :

Text Berjalan Dari Kanan Ke Kiri

Kode perintah HTML :

• <marquee>Text Anda Disini</marquee>

Hasilnya akan seperti ini :

Text Anda Disini

Apabila Anda membuatnya dalam widget adalah sama perintahnya, hanya textnya diganti dengan kode yang ada pada widget tersebut.

• <marquee>kode widget</marquee>

Text Berjalan Dari Kiri Ke Kanan

Kode perintah HTML :

• <marquee direction="right"> <b>Text Anda Disini </b></marquee>
• penambahan kode "<b>....</b>" untuk membuat huruf tebal

Hasilnya akan seperti ini :

Text Anda Disini

Text Berjalan Dari  Ke Atas atau Ke Bawah

Kode perintah HTML :

• <marquee direction="up"> <b>Text Anda Disini </b></marquee>
• <marquee direction="down"> <b>Text Anda Disini </b></marquee>

Hasilnya akan seperti ini :

Text Anda Disini Text Anda Disini

Text Bergerak Bolak-Balik

Kode perintah HTML :

• <marquee behavior="alternate"> <b>Text Anda Disini </b> </marquee>

Hasil seperti ini :

Text Anda Disini

Pengaturan Kecepatan Gerakan Text

Anda bisa mengatur kecepatan gerakan text sesuai dengan keinginan, dengan menambah kode perintah "scrollamount "angka kecepatan".

Kode perintah HTML :

• <marquee scrollamount="2"><b> Text Anda Disini</b> </marquee> 
• <marquee scrollamount="3">  <b> Text Anda Disini</b> </marquee> 
• <marquee scrollamount="4">  <b> Text Anda Disini</b> </marquee>

Contoh hasilnya :

Text Anda Disini Text Anda Disini Text Anda Disini

Penambahan angka "2", "3", "4", bisa disesuaikan menurut selera Anda, semakin besar angka semakin cepat text bergerak.
Untuk pemberian warna pada text seperti diatas, tambahkan kode "style="color: red;", contoh :

• <marquee scrollamount="2" style="color: red;"> <b> Text Anda Disini</b> </marquee>

Text Berhenti Saat Disorot Mouse

Kode perintah HTML :

• <marquee onmouseover="this.stop()" onmouseout="this.start()"> <b> Text Anda Disini</b> </marquee>

Contoh Anda bisa lihat text  pengumuman berjalan pada blog proBlogiz ini, dibagian atas halaman. Silahkan sorot dengan mouse Anda pada text yang bergerak, textnya akan berhenti dan coba diklik untuk membuktikanya.

Memberi Background Pada Text Bergerak

Kode perintah HTML :

• <marquee bgcolor="black"> <b> Text Anda Disini</b> </marquee>

Contoh hasilnya :

Text Anda Disini

Pengaturan Ruang Gerakan Text

Untuk mengatur besar ruang gerak text, baik lebar maupun tingginya agar sesuai dengan keinginan Anda, gunakan kode perintahnya dengan menambah kode  width="angka lebar "dan height="angka tinggi " .

Kode perintah HTML :

• <marquee scrollamount="2"  behavior="alternate" width="150px" > <b> Text Anda Disini</b> </marquee>

Contoh hasil :

Text Anda Disini


 Contoh yang lain :

• <marquee scrollamount="2"  direction="up"  style="color: red;" width="80px" height="50px" > <b> Text Anda Disini</b> </marquee>
• <marquee scrollamount="2"  direction="down"  style="color: green;" width="80px" height="50px" > <b> Text Anda Disini</b> </marquee>

Text Anda Disini Text Anda Disini

Pemasangan text berjalan bisa pada widget dengan memasukkan kode HTML di dalam widget tersebut, atau pada halaman postingan artikel.

Untuk pasang di widget :  Masuk Blogger >>> Tataletak >>> tambah gadget >>> pilih HTML/Javasricpt >>>> masukkan code HTML lalu Simpan

Untuk pasang dihalaman posting : :  Masuk Blogger >>> New Entri >>> pilih Mode HTML >>> masukkan code HTML

Ketika  membuat variasi atau modifikasi pada kode perintah HTML text berjalan seperti diatas, semakin banyak variasi yang Anda buat makin banyak pula kode perintah yang dipakai.

Hindari penggunaan text berjalan yang berlebihan, karena pemakaian yang semakin banyak pada blog selain berpengaruh terhadap loading halaman, juga kadang-kadang kurang optimal pada aplikasi browser-browser tertentu.