Home » » Membuat Efek Marquee atau Teks Berjalan

Membuat Efek Marquee atau Teks Berjalan

Apa itu Marquee? mungkin buat blogger baru kata marquee tidak terlalu akrab di telinga, padahal efek marquee ini sering kita lihat pada website atau blog yang sering kita kunjungi. Marquee adalah kode HTML yang bisa membuat teks bisa berjalan, dari kiri, kanan, bawah ataupun atas.

Teks berjalan atau marquee ini banyak diminati oleh para blogger, karena sifatnya yang dinamis, selain untuk menghemat tempat juga bisa menarik pengunjung. Seperti yang sobat lihat di atas kolom sidebar ShoutMix blog saya, ada menu yang bergerak dari kanan ke kiri,

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.

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 kontinu

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. Untuk mengetahui KODE WARNA KLIK 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: Efek teks berjalan bolak-balik secara horizontal:

echa bintang timur

Kodenya:

<font face="arial" color="black" size="4"><marquee direction="right" behavior="alternate" direction="right" scrollamount="2" height="20px" scrolldelay="10" bgcolor="orange" width="450px">echa bintang timur</marquee></font>


Contoh 2: Efek teks berjalan bolak-balik secara vertikal:

echa bintang timur


Kodenya;

<font face="verdana" color="yellow" size="4"><marquee direction="up" behavior="alternate" scrollamount="2" height="100px" scrolldelay="10" bgcolor="green" width="450px">echa bintang timur</marquee></font>


Contoh 3: Efek teks berjalan kekanan secara terus menerus

echa bintang timur

Kodenya;

<font face="times" color="green" size="4"><marquee direction="right" behavior="scroll" scrollamount="3" height="20px" scrolldelay="10" bgcolor="yellow" width="450px">echa bintang timur</marquee></font>


Contoh 4: Efek teks berjalan kekiri sekali saja

echa bintang timur

Kodenya;

<font face="courier" color="red" size="4"><marquee direction="left" behavior="slide" scrollamount="1" height="20px" scrolldelay="100" bgcolor="blue" width="450px">echa bintang timur</marquee></font>


Contoh 5: Efek teks berjalan kekanan tiga kali

echa bintang timur

Kodenya;

<font face="courier" color="blue" size="4"><marquee direction="right" loop="3" behavior="slide" scrollamount="1" height="20px" scrolldelay="100" bgcolor="red" width="450px">echa bintang timur</marquee></font>


Contoh 6: Efek Bounce

echa bintang timur

Kodenya;

<font face="comic sans ms" color="orange" size="4"><marquee scrolldelay="10" behavior="alternate" direction="up" width="450px" scrollamount="2" height="100px" bgcolor="black"><marquee scrolldelay="10" behavior="alternate" direction="left" scrollamount="2">echa bintang timur</marquee></marquee></font>


Untuk membuat teks berhenti jika mouse menyentuh area marquee dan berjalan kembali jika mouse meninggalkan area marquee. Tambahkan kode onmouseover="this.stop()" dan onmouseout="this.start()"


Sebagai contoh saya memasukkan kode ini:

<font face="arial black" color="green" size="4"><marquee behavior="alternate" direction="up" onmouseover="this.stop()" width="450" height="100" onmouseout="this.start()" bgcolor="blue">echa bintang timur artikel, Software, Tutorial Blogger, Tips Trik Komputer</marquee></font>


Hasilnya seperti ini:

echa bintang timur artikel, Software, Tutorial Blogger, Tips Trik Komputer

Silahkan menggeser mouse Anda ke area marquee untuk melihat hasilnya.


Ini hanya beberapa contoh efek marquee atau teks berjalan. Masih banyak efek-efek lain. Silahkan utak-atik sendiri dengan mengganti nilai-nilai pada attributes.


Cara memasang kode marquee pada blog:

1. Login ke Blogger. Klik menu Layout->Page Elements
2. Klik Add a Gadget. Klik tombol + pada HTML/ Javascript
3. Masukkan kode marquee yang ingin Anda gunakan lalu klik Save
4. Selesai. Klik View Blog untuk melihat hasilnya


Selamat mencoba, Semoga bermanfaat dan Jangan lupa berikan Komentar....





Ingin tahu lebih cepat Tentang Artikel atau Info Terbaru yang di Publikasikan Oleh echa bintang timur ? Daftarkan e-mail anda di sini dengan secara otomatis anda dapat kiriman artikel terbaru dari echa bintang timur , Silahkan daftarkan email anda di sini ( Free )

Masukan email anda disini




Artikel Menarik Lainnya


9 komentar:

Suara Petualang mengatakan...

wah...keren nih...
mau nyoba ah...:p

terus berkarya ya...
salam...

Bms_75 mengatakan...

Wah Lengkap Bergeraknya tulisan sob !, Nice Artikel Berbagi Pengetahuan jg slh satu bentuk berdana, Sukses selalu buat Sobat

Seputar Law of Attraction mengatakan...

good articles.sukses selalu...

OSRA AUTO RENTAL PADANG DAN PARIWISATA SUMATERA BARAT mengatakan...

top banget yaaa,,,sukses selalu

dEsain gRiya mengatakan...

ToPPPPPPPP Banget Sobat Thanxssssss...
I LOVE YOU FULLLLLLL

kanaq sasaq mengatakan...

kok gak bisa scroll commentnya

maswardi mengatakan...

keren sob, mau gratisan mampir ya

KENCAN HOT mengatakan...

Great blog here! Additionally your website rather a lot up very fast! What host are you the use of? Can I am getting your affiliate hyperlink in your host? I wish my web site loaded up as fast as yours lol.

SITUS KENCAN mengatakan...

Hello there, You have done a fantastic job. I will certainly digg it and personally suggest to my friends. I am confident they will be benefited from this website.

Komentar anda tentang Artikel ini

Blog ini menggunakan Sistem DoFollow, jadi manfaatkan kesempatan ini untuk menempatkan link blog atau website anda agar di follow oleh bot mesin pencari. Sempatkanlah sedikit waktu untuk mengomentari Postingan Blogku, karna setiap kata yang anda berikan , sangatlah berharga untuk ku! Terima Kasih !!
Untuk yang tidak memiliki Account, silahkan pilih Beri komentar sebagai: Anomymous atau Name/URL

 

random post

My Link Banner

Pasang Iklan