Belajar Kode HTML Marquee ( Teks Berjalan )

Marquee (Teks berjalan)

Marquee adalah suatu perintah dalam kode HTML untuk membuat objek tulisan atau gambar bisa bergerak. Biasanya marque digunakan pada template-template yang berjenis magazine. Sebenarnya kegunaannya bermacam-macam, tidak terpaku pada berita saja. Namun dalam penerapannya, sangat umum dipakai untuk Hot News atau Berita Terkini.

Untuk "Belajar Kode HTML Marquee ( Teks Berjalan )" ini, Langkah-langkahnya adalah :

• Pertama-tama anda harus login dulu ke blogger.com
• Lalu Anda pilih Halaman
• Klik Halaman baru
• Pilih HTML bukan Compose  
• Lalu Pastekan salah satu kode dibawah ini
• Kemudian klik Pratinjau untuk melihat hasilnya

Dibawah ini beberapa contoh marquee yang bisa anda coba :

<marquee direction="left">weblogpedia</marquee>

weblogpedia

<marquee direction="right">weblogpedia</marquee>

weblogpedia

<marquee behavior="alternate">weblogpedia</marquee>

weblogpedia

<marquee direction="up">weblogpedia</marquee>

weblogpedia

<marquee direction="down">weblogpedia</marquee>

weblogpedia

<marquee direction="up"><marquee behavior="alternate">weblogpedia</marquee></marquee>

weblogpedia

<marquee direction="down"><marquee behavior="alternate">weblogpedia</marquee></marquee>

weblogpedia

<marquee direction="left"><blink>weblogpedia</blink></marquee>

weblogpedia

Semua kode diatas belum menggunakan "style", untuk mempercantik tampilan kita akan menambahkan kode style ini :

style="font-family: Arial; font-size:20px; color:#003cff;"

Keterangan :

Biru adalah jenis font
Hijau adalah ukuran font
Merah adalah warna font, Untuk mengecek warna klik disini

Contoh Marquee yang sudah ditambahkan style :

<marquee bgcolor="blue" style="font-family: Arial; font-size:20px; color:#DFAD14;">Contoh Marquee</marquee>

Contoh Marquee

Untuk mengatur lebar bidang yang terlihat, kita bisa menambahkan kode "width".

Contoh :

<marquee width="50%" bgcolor="blue" style="font-family: Arial; font-size:20px; color:#DFAD14;">Contoh Marquee</marquee>

Contoh Marquee

Agar kodenya berhenti ketika di sorot oleh kursor, maka kita akan menggunakan kode berikut ini:

<marquee direction="left"onmouseover="this.stop()" onmouseout="this.start()"><a href="http://weblogpedia.com/">Kode Marquee On Mouse</a></marquee>

Kode Marquee On Mouse

Untuk Mengatur Kecepatan Jeda, kita bisa menambahkan kode scrolldelay="kecepatan Jeda dalam milidetik". ( semakin kecil angkanya maka semakin cepat )
1 detik = 1000 milidetik

Contoh Pemasangannya :

<marquee scrolldelay="500">Kecepatan Jeda Marquee</marquee>

Kecepatan Jeda Marquee

Sedangkan untuk mengatur Kecepatannya, kita bisa menambahkan kode scrollamount="kecepatan teks". ( kebalikan dari scrolldelay, semakin besar angkanya maka marqueenya akan semakin cepat )

<marquee scrollamount="20">Kecepatan Marquee 20 </marquee>

Kecepatan Marquee 20
Untuk Menambahkan Title atau judul saat kursor menyentuh teks, kita bisa menambahkan kode "title" seperti berikut :

<marquee title="Title Marquee Saat Terkena Kursor">Contoh Marquee</marquee>

Contoh Marquee


Bagaimana seru bukan???

Untuk tutorial kali ini saya cukupkan sekian, tunggu tutorial-tutorial lainnya.
Jika artikel ini bermanfaat, share ke media sosial milik kalian.