Cara Membuat Beragam Teks Berjalan di Blog (Marquee)

Cara Membuat Beragam Teks Berjalan di Blog (Marquee)

Pengertian dari Marquee sendiri adalah kode HTML yang berguna untuk membuat teks berjalan. Dengan memasang marquee ini, blog kita akan terlihat lebih hidup dan dapat menghemat ruangan pada blog kita.

Ada beberapa efek marquee yang dapat kita buat seperti: teks bergerak kesatu arah, bergerak bolak balik, bergerak keatas, bergerak sekali saja, dan lain-lain.Efek-efek ini timbul karena adanya perpaduan dari beberapa fungsi yang disebut dengan attributes. Sebelum kita mulai, mari kita pelajari dulu fungsi dari masing-masing atributes. Jadi dipelajari dengan teliti dulu yach temen-temen.

Beberapa attributes yang sering digunakan dalam marquee yaitu :

1.   Behavior : untuk mengatur gaya gerakan pada teks.

Ada 3 gaya gerakan yang bisa digunakan yaitu :

* Alternate      : Teks bergerak bolak-balik

* Slide             : Teks hanya bergerak sekali saja

* Scroll            : Teks bergerak ke satu arah secara continue

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

2.   Direction : mengatur arah gerakan teks.

Ada 4 arah gerakan yang bisa digunakan yaitu :

* Up               : Teks bergerak keatas

* Down          : Teks bergerak kebawah

* Left             : Teks bergerak kekiri

* Right           : Teks bergerak kekanan

3.   Face : Untuk mengatur font teks seperti : arial, verdana, times new roman, courier, dan lain-lain. Anda bisa menggunakan semua jenis font yang tersimpan pada komputer Anda

4.   Color : Untuk mengatur warna teks, seperti : "black", "green", "blue", "red", "yellow", dan lain-lain. Anda juga bisa menggunakan kode warna untuk menghasilkan warnanya, seperti: "#fffff", "#ff5a00", "#abb0b5", dan lain-lain. Belum tau cara menghasilkan kode warna. Baca disini

5.   Width : Untuk mengatur panjang ruangan teks dalam satuan pixel.

6.   Height : Untuk mengatur lebar ruangan teks dalam satuan pixel.

7.   Bgcolor  : Untuk mengatur warna background, seperti: "black", "green", "blue", "red", "yellow", dan lain-lain. Jika Anda ingin menghilangkan warna background gunakan "transparent".

8.   Scrolldelay : Untuk mengatur waktu tunda gerakan dalam satuan mili detik.

9.   Scrollamount : Untuk mengatur kecepatan gerakan dalam satuan pixel.

10. Loop : untuk mengatur jumlah pengulangan.

Itulah beberapa attributes yang sering digunkan untuk membuat efek marquee atau teks berjalan. Berikut saya akan memberikan beberapa contoh efek marquee :

Contoh 1 : Buat teks berjalan dari kanan ke kiri (default)

Welcone To Negeri Info ==> Membuat teks berjalan

Kode scriptnya sebagai berikut :

<marquee> Welcone To Negeri Info ==&gt; Membuat teks berjalan </marquee>

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

Selamat Menunaikan Ibadah Shoum Ramadhan 1432 H

<marquee><font size='3' face='comic sans ms' color=yellow> Selamat Menunaikan Ibadah Shoum Ramadhan 1432 H </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.

Contoh 2 : Membuat teks berjalan dari kiri ke kanan (direction)

Teks berjalan dari kiri ke kanan

Kode scriptnya sebagai berikut :

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

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

Teks bergerak lambat
Teks bergerak lebih cepat

Kode scriptnya sebagai berikut :

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

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

Teks berjalan bolak balik

Kode scriptnya sebagai berikut :

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

Contoh 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 di sini

Teks berjalan dengan background biru

Kode scriptnya sebagai berikut :

&lt;marquee behavior=&quot;alternate&quot;&gt;&lt;marquee bgcolor=&quot;blue&quot; height=&quot;30&quot; width=&quot;538&quot;&gt;Teks berjalan dengan background biru
&lt;/marquee&gt;&lt;/marquee&gt;

Contoh 6 ; Membuat teks bergerak dari bawah ke atas

Teks bergerak dari bawah ke atas

Kode scriptnya sebagai berikut :

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

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

Home

My Profil

Wikimapia

SMS Gratis

Kode scriptnya sebagai berikut :

<div style="border: 1px solid rgb(153, 153, 153); height: 180px; overflow: auto; padding: 5px;">
<b>
<marquee behavior="scroll" scrollamount="3" direction="up"></br>
<a href="http://negeriinfo.blogspot.com/">Home</a></br>
<a href="http://www.blogger.com/profile/01100026954099776668">My Profil</a></br>
<a href="http://www.wikimapia.com/">Wikimapia</a></br>
<a href="http://negeriinfo.blogspot.com/2011/07/sms-gratis-masuk-ke-sini.html">SMS Gratis</a></br>
</marquee>
</b>
</div>

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

Home

My Profil

Wikimapia

SMS Gratis

Contoh 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()

Teks 1
Teks 2
Teks 3

Kode scriptnya sebagai berikut :

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

Silahkan mencoba yang sobat sukai.