Cara Membuat Tulisan Bergerak (Marquee) di Blog

Cara membuat tulisan bergerak (Marquee) di Blog, itulah judul tulisan yang kita bicarakan pada kesempatan ini. Posting dengan judul ini mungkin sudah banyak di bahas di blog teman-teman yang lain, namun tidak ada salahnya saya berbagi pengalaman juga kepada teman-teman yang belum mengetahui cara pembuatannya.

Teks berjalan yang biasa juga disebut marquee, merupakan sebuah efek gerak pada teks atau tulisan tertentu yang diinginkan. Biasanya teks berjalan ini digunakan oleh pemilik blog untuk menampilkan sebuah pesan, link atau banner agar dapat menarik perhatian pengunjung. Marquee ini dapat memperindah teks/tulisan tertentu pada postingan atau sidebar blog Anda.

Selamat Datang di http://jamarisonline.blogspot.com

Membuat tulisan bergerak (Marquee) biasanya menggunakan kode dasar html tertentu. Banyak bentuk tulisan bergerak (Marquee) yang bisa ditampilkan. Untuk lebih jelasnya, ikuti uraian berikut ini:

• Silahkan Login di Blogger
• Masukkan ID dan Password anda.
• Pada Dasbor klik Rancangan
• Pada Elemen Laman klik Tambah Gadget
• Pada Tambahkan Gadget Pilih HTML/JavaScript
• Isi Judul yang anda suka atau di kosongkan saja
• Pada Konten, isi dengan kode salah satu kode marquee yang anda inginkan di bawah ini:

TEKS BERGERAK DARI KIRI KE KANAN

Kodenya:

<marquee behavior="scroll" direction="right" height="25" scrollamount="3" width="auto">Teks bergerak dari kiri ke kanan</marquee>

Hasilnya:

Teks bergerak dari kiri ke kanan

TEKS BERGERAK DARI KANAN KE KIRI

Kodenya:

<marquee behavior="scroll" direction="left" height="25" scrollamount="3" width="auto">Teks bergerak dari kanan ke kiri</marquee>

Hasilnya:

Teks bergerak dari kanan ke kiri

TEKS BERGERAK DARI ATAS KE BAWAH

Kodenya:

<marquee behavior="scroll" direction="down" height="100" scrollamount="2" width="auto">Teks bergerak dari bawah ke atas</marquee>

Hasilnya:

Teks bergerak dari bawah ke atas

TEKS BERGERAK DARI BAWAH KE ATAS

Kodenya:

<marquee behavior="scroll" direction="up" height="100" scrollamount="2" width="auto">Teks bergerak dari bawah ke atas</marquee>

Hasilnya:

Teks bergerak dari bawah ke atas

TEKS BERGERAK BOLAK BALIK

Kode yang diperlukan adalah:

<marquee behavior="alternate" height="25" scrollamount="3">Teks bergerak bolak balik</marquee>

<marquee direction="up" scrollamount="2" align="center" behavior="alternate">Teks bergerak bolak balik</marquee>

Hasilnya:

Teks bergerak bolak balik

Teks bergerak bolak balik

TEKS BERHENTI BERGERAK TERSENTUH MOUSE

Kodenya:

<marquee behavior="scroll" direction="right" height="25" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="3">Teks berhenti bergerak tersentuh mouse</marquee>

<marquee behavior="scroll" direction="left" height="25" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="3">Teks berhenti bergerak tersentuh mouse</marquee>

<marquee behavior="scroll" direction="down" height="100" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="3">Teks berhenti bergerak tersentuh mouse</marquee>

<marquee behavior="scroll" direction="up" height="100" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="3">Teks berhenti bergerak tersentuh mouse</marquee>

Hasilnya:

Teks berhenti bergerak tersentuh mouse

Teks berhenti bergerak tersentuh mouse

Teks berhenti bergerak tersentuh mouse

Teks berhenti bergerak tersentuh mouse

TEKS BERGERAK MEMUAT LINK

Kodenya:

<marquee behavior="scroll" direction="right" height="25" scrollamount="3" width="auto"><a href="http://www.blogger.com/" target="new">Blogger</a> <a href="http://jamarisonline.blogspot.com/">Jamaris Online</a> <a href="http://jamarisonline.blogspot.com/2011/06/daftar-peserta-plpg-seluruh-angkatan.html">Peserta PLPG UNP 2011</a></marquee>

<marquee behavior="scroll" direction="left" height="25" scrollamount="3" width="auto"><a href="http://www.blogger.com/" target="new">Blogger</a> <a href="http://jamarisonline.blogspot.com/">Jamaris Online</a> <a href="http://jamarisonline.blogspot.com/2011/06/daftar-peserta-plpg-seluruh-angkatan.html">Peserta PLPG UNP 2011</a></marquee>

<marquee behavior="scroll" direction="down" height="100" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="1"><br /> <a href="http://www.blogger.com/" target="new">Blogger</a><br /> <a href="http://jamarisonline.blogspot.com/">Jamaris Online</a><br /> <a href="http://jamarisonline.blogspot.com/2011/06/daftar-peserta-plpg-seluruh-angkatan.html">Peserta PLPG UNP 2011</a></marquee>

<marquee behavior="scroll" direction="up" height="100" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="1"><br /> <a href="http://www.blogger.com/" target="new">Blogger</a><br /> <a href="http://jamarisonline.blogspot.com/">Jamaris Online</a><br /> <a href="http://jamarisonline.blogspot.com/2011/06/daftar-peserta-plpg-seluruh-angkatan.html">Peserta PLPG UNP 2011</a></marquee>

Hasilnya:

Blogger Jamaris Online Peserta PLPG UNP 2011

Blogger Jamaris Online Peserta PLPG UNP 2011

Blogger
Jamaris Online
Peserta PLPG UNP 2011

Blogger
Jamaris Online
Peserta PLPG UNP 2011

TEKS BERGERAK ZIG-ZAG

Kodenya:

<center><marquee direction="up" scrollamount="2" align="center" behavior="alternate" width="90%"><marquee direction="right"> Tulisan Bergerak Zig-Zag 1 </marquee></marquee></center>

<center><marquee direction="up" scrollamount="2" align="center" behavior="alternate" width="90%"><marquee direction="right" behavior="alternate"> Tulisan Bergerak Zig-Zag 2 </marquee></marquee></center>

Hasilnya:

Tulisan Bergerak Zig-Zag 1

Tulisan Bergerak Zig-Zag 2

• Setelah anda memilih salah satu bentuk marquee yang diinginkan, klik simpan.
• Lihat hasilnya.

Keterangan:

1. direction="left/right/up/down" : Mengatur arah gerakan teks.
2. scrollamount="angka" : mengatur kecepatan gerakan dalam pixel, semakin besar angka semakin cepat gerakannya.
3. behavior="scroll/slide/alternate" : Untuk mengatur perilaku gerakan :
4. Scroll : teks bergerak berputar
5. Slide: teks bergerak sekali lalu berhenti
6. Alternate : teks bergerak bolak-balik dari kiri kekanan lalu balik lagi atau sebaliknya.

Demikianlah uraian cara membuat tulisan bergerak (Marquee) di Blog. Saya yakin anda bisa mengembangkan marquee bentuk lain. Selamat bereksperimen. Terima kasih