Cara membuat teks berjalan di blog (marquee)

Teman-teman, pada ulasan kali ini saya akan memberikan suatu tips yang menurut saya akan sangat bermanfaat bagi anda, yaitu membuat text berjalan. Teks berjalan yang biasa juga disebut marquee, merupakan sebuah efek gerak pada teks. Biasanya teks berjalan ini digunakan oleh pemilik blog untuk menampilkan sebuah pesan , link atau banner untuk menarik perhatian pengunjung.

Secara umum cara membuat teks berjalan di blog bisa menggunakan kode dasar html seperti di bawah ini

1. Buat teks berjalan dari kanan ke kiri (default)

Kode

<marquee> Membuat teks berjalan </marquee>

Hasil

Membuat teks berjalan

2. Membuat teks berjalan dari kiri ke kanan (direction)

Kode:

<marquee behavior="scroll" direction="right" height="50" width="auto">Teks berjalan dari kiri ke kanan</marquee>

Hasil:

 Teks berjalan dari kiri ke kanan

3. Membuat teks bergerak dengan mengatur kecepatannya (scrollamount). Anda bisa mengubah angka 30 pada scrollamount="30"

Kode:

<marquee behavior="scroll" direction="left" scrollamount="5">Teks bergerak lambat</marquee>
<marquee behavior="scroll" direction="left" height="100" scrollamount="30" width="auto">Teks bergerak lebih cepat</marquee>

Hasil:

Teks bergerak lambat
Teks bergerak lebih cepat

4. Membuat teks bergerak bolak balik / memantul saat tiba di tepi kiri atau kanan

Kode:

<marquee behavior="alternate">Teks berjalan bolak balik</marquee>

hasil:

Teks berjalan bolak balik

5. Membuat teks berjalan dengan background biru, Untuk mengganti background (warna latar belakang-nya) bisa ganti kata "blue" pada kode bgcolor="blue" , warna lain bisa dilihat disini tabel warna

Kode:

<marquee bgcolor="blue" height="50" width="auto">
Teks berjalan dengan background biru
</marquee>

Hasil:


Teks berjalan dengan background biru



6. Membuat teks bergerak dari bawah ke atas

Kode:

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

Hasil:

Teks bergerak dari bawah ke atas

Note : untuk mengubahnya menjadi bergerak dari atas ke bawah ganti kode direction="up" menjadi direction="down"

7. Membuat teks bergerak dari bawah ke atas (di dalam kotak teks)

Kode:

<div style="border: 1px solid rgb(202, 61, 217); height: 180px; overflow: auto; padding: 5px;">
<b>
<marquee behavior="scroll" scrollamount="3" direction="up"></br>
<a href="http://rizalblogmaster.blogspot.com/">Belajar Blog | Tips & Trik</a></br>
<a href="http://www.rizaltips.com/">HOW TO BLOG | CAD TIPS</a></br>
<a href="http://myeducationdummies.blogspot.com/">My education Dummies</a></br>
</marquee>
</b>
</div>

Contohnya bisa lihat dibawah:

Belajar Blog | Tips & Trik

HOW TO BLOG | CAD TIPS SEO

My education Dummies

Contoh 2
Kecepatannya diubah dengan scrollamount="2" , arahnya ke bawah direction="down"

Belajar Blog | Tips & Trik
HOW TO BLOG | CAD TIPS SEO
My education Dummies

8. Membuat teks bergerak dari bawah ke atas, memantul dan berhenti jika penunjuk mouse berada di atas teks area.
Tambahkan kode: onmouseout="this.start()" onmouseover="this.stop()

Kode:

<marquee align="center" behavior="alternate" direction="up" height="300" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" width="100">
Teks 1
Teks 2
Teks 3
</marquee>

Hasilnya bisa dilihat dibawah :

Teks 1
Teks 2
Teks 3

Anda bisa memasukkan kode diatas pada editor blogspot:

 Atau pada gadget Html/Javascript:

Selain contoh di atas bisa juga mengatur ukuran font /teks dan warna teks mengunakan script berikut :

<marquee><font size='3' face='comic sans ms' color=Green> Selamat Datang di Belajar Blog | Tips & Trik </font></marquee>

Pada kode di atas:
a. font size='3' , angka 3 adalah ukuran teks /font bisa diubah sesuai kebutuhan
b. face='comic sans ms' , comic sans ms jenis huruf
c. color=yellow , yellow adalah warna teks.

Hasilnya :

Selamat Datang di Belajar Blog | Tips & Trik

Baiklah Teman-teman. Mungkin itu tips yang bisa saya berikan. Selamat Mencoba.! Dan Semoga Bermanfaat. Yupp. Have a nice blogging.:)