Membuat Tulisan Berjalan (Marquee) di blog

     Membuat Tulisan Berjalan (Marquee) di blog memang sangatlah mudah. Kenapa tulisan berjalan disebut Marquee? karena untuk membuat tulisan berjalan itu menggunakan kode Marquee. Marquee berguna untuk mempercantik tampilan blog, Salah satu cara untuk menarik perhatian pada suatu kata atau kalimat dalam suatu blog atau website sehingga pengunjung bisa lebih suka dengan web/blog anda.

Bagaimana cara membuat tulisan berjalan? Tulisan atau teks berjalan atau running text ini. Kali ini kita akan mencoba membuat beberapa jenis marquee, agar lebih banyak variasi yang bisa anda pilih. Terlebih dulu kita akan belajar membuat kodenya, lalu belajar cara memasangnya pada blog. Mungkin sebagian besar sudah mengetahuinya. tapi disini tutorwidget mencoba untuk sharing kepada teman-teman yang belum mengetahui cara pembuatannya.

Perlu anda ketahui bahwa kode dasar Marquee adalah...
<marquee>TEKS YANG BERGERAK</marquee>

DEMO KODE DI ATAS

TEKS YANG BERGERAK

Jadi, dengan mengerti kode dasar diatas, anda bisa membuat bermacam-macam variasi kode Marquee.. Sebelum membahas ke variasi kode Marquee. Mari kita bahas terlebih dahulu cara pemasangannya.. Ada 2 tempat untuk pemasangan kode Marquee ini, yaitu untuk Widget dan artikel..

 Cara pemasangan kode Marquee pada artikel
1. Di bagian edit entri atau entri baru, silahkan ubah dari Mode Compose ke mode HTML
2. Silahkan masukkan kode Marquee di mode HTML
3. Cek posisi teks di mode Compose
4. Untuk melihat apakah kode berjalan, silahkan klik Pratinjau.

Cara pemasangan kode Marquee pada widget
1. Login ke akun blogger anda
2. Masuk ke menu Tata Letak, Klik tambahkan gadget
3. Silahkan pilih HTML/Java Script
4. Masukkan kode Marquee yang anda pilih
5. Silahkan klik Simpan
6. Kemudian silahkan cek apakah kode sudah bekerja.

Supaya lebih jelas dan tidak bingung, kita bahas terlebih dahulu cara mengubah warna , huruf, dan ukuran pada teks. Ikuti langkah-langkah berikut..

Kode dasarnya adalah
style="font-family: Arial; font-size:20px; color:#fff;"
1. Arial adalah jenis huruf
2. 20px adalah ukuran huruf
3. #fff adalah warna huruf
NOTE: Silahkan ubah sesuai dengan keinginan anda

Contoh kode nya seperti ini.

<marquee bgcolor="black" style="font-family: Arial; font-size:20px; color:#fff;">CONTOH BACKGROUND AREA TEKS</marquee>

DEMO

CONTOH BACKGROUND AREA TEKS

Jadi, mari kita bahas saja variasi kode Marquee ini. Berikut ini adalah varias-variasi kode Marquee nya..

Kode Marquee untuk mengatur pengulangan Rotasi
kode loop="angka|-1|infinite" digunakan untuk pengulangan berotasi pada Marquee.. Setelah berotasi sesuai angka yang ditentukan, maka teks tersebut akan hilang.

Contoh kode nya seperti ini.

<marquee loop="6">TEKS BEROTASI 6 KALI</marquee>

DEMO

TEKS BEROTASI 6 KALI

Kode Marquee untuk mengatur lebar teks
Kode width="angka lebar" berguna untuk mengatur lebar dari kode teks yang yang akan berjalan. Bisa anda atur 50% untuk setengah bidang saja, atau bisa 25% untuk seperempat bidang teks berjalan saja.

Contoh kode nya seperti ini.

<marquee width="50%">LEBAR TEKS BERJALAN HANYA SETENGAH BIDANG</marquee>

Keterangan: Angka 50% bisa anda ganti sesuai lebar bidang yang anda inginkan.

DEMO

LEBAR TEKS BERJALAN HANYA SETENGAH BIDANG

Kode Marquee untuk memberi link pada teks
Kode dasar seperti ini..
onmouseover="this.stop()" onmouseout="this.start()"

Contoh kode nya seperti ini.

<marquee direction="left"onmouseover="this.stop()" onmouseout="this.start()"><a href="http://tutorwidget.blogspot.com/2015/02/membuat-tulisan-berjalan-marquee-di-blog.html" title="Membuat Tulisan Berjalan (Marquee) di blog">CARA MEMBUAT TULISAN BERJALAN</a></marquee>

DEMO

CARA MEMBUAT TULISAN BERJALAN

Kode Marquee untuk mengatur background pada jalur teks
Kode bgcolor="warna" berguna untuk memberikan warna background pada area teks berjalan.

Contoh kode nya seperti ini.

<marquee bgcolor="cyan">CONTOH BACKGROUND AREA TEKS</marquee>

Keterangan: black bisa anda ganti sesuai warna yang anda inginkan. Misalnya blue, yellow, red, dan lain-lain. 

DEMO

CONTOH BACKGROUND AREA TEKS

Kode Marquee untuk mengatur kecepatan jeda
Kode scrolldelay="angka jeda" berfungi untuk mengatur kecepatan jeda dalam milidetik.

Contoh kode nya seperti ini.

<marquee scrolldelay="750">TEKS BERJALAN DALAM JEDA 0,75 DETIK</marquee>

Keterangan: Angka 750 itu untuk jeda dalam 0,75 detik. Jadi silahkan ganti 1000 untuk 1 detik, 2000 untuk 2 detik, dan seterusnya..

DEMO

TEKS BERJALAN DALAM JEDA 0,75 DETIK

Kode Marquee untuk memberi Alt Title pada area teks berjalan
Kode title="pesan" berfungsi untuk memberi pesan pada saat kursor diarahkan ke area teks berjalan. Atau nama lainnya yaitu Alt Title.

Contoh kode nya seperti ini.

<marquee title="TEKS YANG AKAN MUNCUL JIKA KURSOR DIARAHKAN KE AREA TEKS BERJALAN">TEKS YANG BERJALAN DENGAN PESAN</marquee>

DEMO

TEKS YANG BERJALAN DENGAN PESAN

Kode Marquee untuk mengatur kecepatan teks berjalan
Kode scrollamount="angka" berguna untuk mengatur kecepatan laju teks yang berjalan.

Contoh kode nya seperti ini.

<marquee scrollamount="12">KECEPATAN TEKS YANG BERJALAN 12</marquee>

Keterangan: angka 12 bisa anda ganti sesuai kecepatan yang anda sukai. Semakin besar angka maka akan semakin cepat.

DEMO

KECEPATAN TEKS YANG BERJALAN 12

Kode Marquee untuk mengatur arah teks bergerak
Kode direction="left/right/up/down" berguna untuk mengatur arah pergerakan teks.

Contoh kode nya seperti ini.

<marquee direction="left">TEKS AKAN BERGERAK KE KIRI</marquee>

Keterangan: left bisa anda ganti sesuai arah teks berjalan yang anda inginkan.

DEMO

TEKS AKAN BERGERAK KE KIRI

Kode Marquee untuk mengatur arah teks bergerak bolak-balik
kode behavior="scroll/slide/alternate" digunakan untuk mengatur type pergerakan
Scroll jika ingin teks bergerak terus ke suatu sisi dan muncul dari sisi lain
Slide jika ingin teks bergerak sekali kemudian berhenti dan diulangi lagi
Alternate jika ingin teks terlihat memantul/bouncing dari ujung kembali ke ujung.

Contoh kode nya seperti ini.

<marquee behavior="alternate">MARQUEE BERGERAK BOLAK-BALIK</marquee>

DEMO

MARQUEE BERGERAK BOLAK-BALIK

Kode Marquee untuk mengatur teks berhenti jika dilintasi mouse
Kode dasar untuk mengatur teks agar berhenti jika dilintasi mouse adalah
onmouseover="this.stop()" onmouseout="this.start()"

Contoh kode nya seperti ini.

<marquee direction="left"onmouseover="this.stop()" onmouseout="this.start()">TEKS BERGERAK KE KIRI DAN AKAN BERHENTI JIKA DILINTASI MOUSE</marquee>

DEMO

TEKS BERGERAK KE KIRI DAN AKAN BERHENTI JIKA DILINTASI MOUSE

Kode Marquee untuk Teks berjalan zig-zag nembus

<center><marquee direction="up" scrollamount="2" align="center" behavior="alternate" width="90%"><marquee direction="right"> Contoh Tulisan Berjalan </marquee></marquee></center>

DEMO

Contoh Tulisan Berjalan

Kode Marquee untuk Teks berjalan zig-zag mantul

<center><marquee direction="up" scrollamount="2" align="center" behavior="alternate" width="90%"><marquee direction="right" behavior="alternate"> Contoh Tulisan Berjalan </marquee></marquee></center>

DEMO

Contoh Tulisan Berjalan

Jadi itulah, beberapa macam variasi kode Marquee.Semoga bermanfaat untuk anda. Dan terima kasih.