Cara Membuat Tulisan Berjalan di Blog

Sahabat Ngonline06 pernah melihat teks berjalan atau bahkan mondar-mandir di sebuah blog/situs? Sahabat tertarik untuk membuat seperti itu?

Tenang saja, sahabat bisa membuatnya koq dengan mudah. Tulisan berjalan seperti itu dalam ilmu per-BLOG-an disebut marquee. Inget, marquee...

Marquee atau tulisan berjalan biasanya dibuat untuk menunjukkan visi-misi sebuah blog, ucapan selamat, atau lainnya yang pada intinya mencari perhatian pada pengunjung blog. Penggunaan marquee atau teks berjalan pada blog sebenarnya hanya untuk mempercantik blog itu sendiri.

Oleh karenanya, jika sahabat tertarik dan ingin memasangnya, ikuti saja tutorial berikut ini dengan saksama agar bisa memasangnya dengan baik dan maksimal.

Cara Membuat Tulisan/Teks Berjalan di Blog

Untuk membuat tulisan atau teks berjalan di blog, sahabat bisa memilih berbagai jenis berikut sesuai dengan kebutuhan. Silahkan sahabat memilihnya dengan cermat dan memasangnya dengan baik pada tata cara di bawahnya. Perhatikan huruf yang berwarna merah pada kode di dalamnya untuk membedakan kode satu dengan lainnya.

1. Tulisan bergerak dari kanan ke kiri

 <marquee direction="left" scrollamount="2" align="center">Contoh Tulisan Berjalan</marquee>

 hasilnya

Contoh Tulisan Berjalan

2. Tulisan bergerak dari kiri ke kanan

 <marquee direction="right" scrollamount="2" align="center"> Contoh Tulisan Berjalan </marquee>

 hasilnya

Contoh Tulisan Berjalan

3. Teks bergerak bolak balik dari kiri ke kanan

<marquee direction="left" scrollamount="2" align="center" behavior="alternate"> Contoh Tulisan Berjalan </marquee>

hasilnya

Contoh Tulisan Berjalan

4. Teks bergerak bolak balik dari kanan ke kiri

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

hasilnya

Contoh Tulisan Berjalan

5. Teks bergerak dari atas ke bawah

 <marquee direction="down" scrollamount="2" align="center"> Contoh Tulisan Berjalan </marquee>

 hasilnya

Contoh Tulisan Berjalan

6. Teks bergerak dari bawah ke atas

 <marquee direction="up" scrollamount="2" align="center"> Contoh Tulisan Berjalan </marquee>

hasilnya

Contoh Tulisan Berjalan

7. Teks bergerak bolak-balik dari atas ke bawah

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

hasilnya

Contoh Tulisan Berjalan

8. Teks bergerak zig - zag ( diagonal ) memantul

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

 hasilnya

Contoh Tulisan Berjalan

9. Teks bergerak zig - zag ( diagonal ) tembus

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

hasilnya

Contoh Tulisan Berjalan

KETERANGAN:

• Direction : untuk mengatur pola gerakan teks (left, right, up dan down); dengan penjelasan: left = kiri, right = kanan, up = ke atas, dan down = ke bawah
• Scrollamount : untuk mengatur kecepatan gerakan teks. Silahkan rubah angka 2 pada kode di atas menjadi 3 atau 1 untuk mempercepat atau melambatkan gerakan.
• Behavior ( scroll/slide/alternate ): untuk mengatur perilaku gerakan; dengan penjelasan scroll = teks bergerak berputar, slide = teks bergerak sekali kemudian berhenti, dan alternate = teks bolak-balik.

Berkreasi dengan Tulisan Berjalan di Blog

1. Menambah Warna

Setelah sahabat Ngonline06 mengetahui cara membuat tulisan atau teks berjalan di blog, maka sekarang sahabat bisa mengkreasinya menjadi lebih menarik dan kreatif. Untuk mengkreasinya, sahabat bisa menambahkan background, padding, border, color, dan lainnya pada marquee. Untuk memahami istilah-istilah tersebut, perhatikan di bawah ini:

• Background = warna dasar marquee
• Padding = jarak antar teks marquee
• Border = warna bingkai marquee
• Color = warna teks marquee

Untuk menyisipkan background, padding, border, ataupun color, silahkan perhatikan  kode marquee berikut ini:

<div style="background: #000000; border: 2px solid #FF0000; color: white; font-size: 20px; font-weight: bold; letter-spacing: 0.5em; padding: 15px;">
<marquee direction="left" scrollamount="6" align="center">Contoh Tulisan Berjalan</marquee>
</div>

Pada kode di atas menggunakan background hitam (#000000), border merah (#FF0000), warna teks putih (white), dan padding 15px. Jika menggunakan kode di atas, maka hasilnya adalah sebagai berikut:

Contoh Tulisan Berjalan

2. Menyisipkan Link

Untuk menyisipkan link, sahabat Ngonline06 bisa menggunakan kode sebagai berikut:

<div style="background: #FFFFFF; border: 2px solid #FF0000; color: black; font-size: 20px; font-weight: bold; letter-spacing: 0.2em; padding: 15px;">
<marquee direction="left" scrollamount="6" align="center"><a href="http://ngonline06.blogspot.com"/>Belajar Online Simpel dan Cerdas</a></marquee>
</div>

Keterangan: Silahkan ganti tulisan yang berwana biru dengan Url yang sahabat inginkan. Adapun hasilnya adalah sebagai berikut:

Belajar Online Simpel dan Cerdas

Adapun jika sahabat ingin menyisipkan link dengan teks berjalan yang lebih dari satu, sahabat bisa menggunakan kode berikut ini:

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="100" align="center">
<a href=" http://ngonline06.blogspot.com/">teks 1</a><br/>
<a href="http://ngonline06.blogspot.com">teks 2</a><br/>
<a href="http://ngonline06.blogspot.com">teks 3</a><br/>
</marquee>

Keterangan: kode yang dicetak tebal adalah perintah pada teks untuk terhenti ketika di lewati pointer. Dan, teks yang berwarna merah serta biru adalah Url sahabat dan teks yang hendak ditampilkan.

Untuk hasilnya, silahkan lihat di bawah ini:

teks 1

teks 2

teks 3

Cara Memasang Tulisan Berjalan di Blog

Setelah sahabat memahati kode-kode yang digunakan, sekarang saatnya sahabat memasangnya. Untuk memasang tulisan berjalan di blog, silahkan ikuti langkah-langkah sebagai berikut: 
1. Login ke akun blog sahabat
2. Klik Tata Letak > Tambah gadget > HTML/Javascript
3. Masukkan kode marquee dari salah satu tulisan berjalan di atas di dalamnya
4. Klik save dan lihat hasilnya.

Demikian Cara Membuat Tulisan Berjalan di Blog. Semoga membantu untuk sahabat Ngonline06 semua. Jika ada kesulitan atau hal yang belum jelas, silahkan coret-coret saja di kotak komentar.