Saturday, July 25, 2009

Cara Membuat Teks Berjalan Atau Efek Marquee Pada Blog

Menggunakan efek marquee pada blog kita tidak hanya untuk mempercantik blog tetapi juga berfungsi untuk menghemat ruangan. Sebenarnya efek marquee atau teks berjalan ini adalah kode HTML biasaq sehingga tidak akan terlalu sulit untuk membuatnya.


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.

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. 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: Efek teks bergerak bolak-balik secara horizontal

Teks bolak-balik horizontal

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">Teks bolak-balik horizontal</marquee></font>

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

Teks bolak-balik vertikal

Kodenya:

<font face="verdana" color="yellow" size="4"><marquee direction="up" behavior="alternate" scrollamount="2" height="100px" scrolldelay="10" bgcolor="green" width="450px">Teks bolak-balik vertikal</marquee></font>

Contoh 3: Efek teks berjalan kekanan secara kontinu

Teks Kekanan kontinu

Kodenya:

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

Contoh 4: Efek teks berjalan kekiri sekali saja

Berjalan kekiri sekali

Kodenya:

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

Contoh 5: Efek teks berjalan kekanan tiga kali

Berjalan kekanan tiga kali

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">Berjalan kekanan tiga kali</marquee></font>

Contoh 6: Efek Bounce

Efek Bounce

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">Efek Bounce</marquee></marquee></font>


Contoh 7: Teks Berhenti Jika Mouse Menyentuh Daerah Marquee


Teks Berhenti Jika Mouse Menyentuh Daerah Marquee

Silahkan menggeser mouse ke area marquee. Untuk membuat ini hanya perlu menambahkan kode onmouseover="this.stop()" dan onmouseout="this.start()"

Kodenya:

<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">Teks Berhenti Jika Mouse Menyentuh Daerah Marquee</marquee></font>

Contoh diatas hanya sebagian dari efek marquee, silahkan Anda utak-atik sendiri nilai-nilai pada attributes untuk mendapatkan efek yang Anda inginkan.

Cara memasang efek Marquee pada blog :

Setelah membuat kodenya tinggal meletakkan ke Gadget HTML/Javascript pada blog. Untuk yang belum paham cara menempatkan kode HTML di blog Anda, silahkan anda lihat disini dipostingan saya sebelumnya Menempatkan kode HTML/Javascript pada Blog

Selamat Mencoba...Semoga Sukses...!!

19 comments:

music indest said...

kren

Yogi Doank said...

udah tak coba bro, q bikin widget sendiri,trus nyontek dikit tutorialnya bro..heee..heee

jalu coesta said...

keren bos, uda tak pasang di blogku
http://jalu-coesta.blogspot.com

Rey said...

senangnya hatiku, habis dapat ilmu kuterapkan eh..langsung berhasil. thanks bro
aku dah pasang bannermu, pasang juga bannerku yah..

s. wahyudi said...

salam kenal...blognya bagus. infonya ntar dicoba.thanks

kiyute said...

Thank,s Bro...

http://kiyute80.blogspot.com

dangeen said...

bagaimana cara buwat marque yang tekx nya 3 baris, thankyu

adansense said...

habis makan teri lalu nyemil pete,habis teori baru deh di praktekin.

M.JIBRIL 22 said...

linkx dah q pasang mas...

abangjo said...

thank infonya sobat...sangat bermanfaat

NATANIEL said...

mantap sekali,,,,

Febri Yonaldo said...

KEREN COY

Pendi Ari Wibowo said...

izin kopas artikelnya mas, , buat blog aku....

iyank said...

trims bro....

top said...

trim.. juga broo

GUN said...

MATUR THKS U

unique said...

thx bro.... bgus infonya. berhasil http://serba-uniks.blogspot.com/

Anonymous said...

bro... blog gak bisa di cari lwat google.... knapa ya???/ server not found kata google

Anonymous said...

tolong ya bro... klo bisa kirim ke jun.edy07@yahoo.com trimaksih sblmnya broo...