Membuat Efek Marquee atau Teks Berjalan

Posted by Herman on Saturday, November 15, 2008 44 comments

Marquee 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.

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 berjalan bolak-balik secara horizontal:

Welcome To My Blog

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">Welcome To My Blog</marquee></font>



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


Welcome To My Blog

Kodenya:

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



Contoh 3: Efek teks berjalan kekanan secara kontinu


Welcome To My Blog

Kodenya:


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



Contoh 4: Efek teks berjalan kekiri sekali saja


Welcome To My Blog

Kodenya:

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



Contoh 5: Efek teks berjalan kekanan tiga kali

Welcome To My Blog

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">Welcome To My Blog</marquee></font>



Contoh 6: Efek Bounce


Panduan membuat blog

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">Panduan membuat blog</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">panduan membuat blog untuk pemula beserta tips n triknya...</marquee></font>

Hasilnya seperti ini:

panduan membuat blog untuk pemula beserta tips n triknya...

Silahkan menggeser mouse Anda ke area marquee untuk melihat hasilnya..sengihnampakgigi

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 Design->Page Elements
2. Klik Add a Gadget-> HTML/ Javascript
3. Masukkan kode marquee yang ingin Anda gunakan lalu klik Save
4. Selesai. Klik View Blog untuk melihat hasilnya

Selamat berkreasi...senyum


Recent Posts:

44 comments

bunda lis said... 15 January, 2009
trims marque bunda dah berkibar kibar, waah pahalamu lumayan banyak dipakai banyak orang, bunda minta artikelnya yah...
Herman said... 18 January, 2009
ok silahkan. tapi dicantumkan linknya ya. terima kasih
Andy J. Santiko said... 26 February, 2009
Trims mas udah tak coba...
MU Fans said... 07 March, 2009
Wuih keren tutorialnya...coba ah..
Win wonglio said... 07 March, 2009
Mantap banget dah tutorialnya Mas..udah di coba nih tipsnya..!
Blog Sampean Udah aku link lo..!!!
Win wonglio said... 07 March, 2009
Mau nanya mas,gimana caranya mendownload template di eblogtemplates ? Apa harus daftar dulu ?
Herman said... 07 March, 2009
Win: untuk template premium anda harus daftar terlebih dahulu baru bisa download
Fiarchan said... 13 March, 2009
Wah infonya bermanfaat banget. Ntar mau tak coba di blog ku.
Thx ya...
abd syahid said... 21 March, 2009
Mas Herman terima kasih atas trik dan tipsnya.
Boleh ga saya cantumin link posting Mas ini di bliog saya. Bravo...
abdsyahid@gmail.com
herman said... 21 March, 2009
@abd syahid: yup silahkan. :)
KenTuL said... 18 May, 2009
:)] ayo semua kunjungi http://hermanblogtips.com
PASCODE said... 26 May, 2009
~x( gerrrrrr bener bener dah babeh blog...http://hermanblogtips.blogspot.com
indoca said... 06 July, 2009
akhirnya sukses dengan tipny di sini salam
breeder said... 19 July, 2009
Mas Herman, makasih ats infonya.. Blog ini sgt mbantu sy yang msh pemula.. thx ya..
Hadi said... 07 August, 2009
bagaimana cara membuat banner bergerak dari atas ke bawa atau sebaliknya, saya sudah coba ubah directionnya menjadi Up, tapi banner tidak bergerak sempurna...silahkan cek anekaposting.blogspot.com
felz97 said... 17 August, 2009
wah, infonya mantab.
Ferry Ndalle said... 18 September, 2009
Terima kasih bung... atas infonya
Semoga tetap jaya selalu.........merdeka!!!
PTC said... 08 October, 2009
Mas.. Terimakasih Banyak Ya Postingannya.. aq dah berhasil membuat iklan bergerak.. Thank's alot..
muhammadnabiku.blogspot.com said... 18 October, 2009
Waahaa warnanya bisa diganti
saun shine said... 09 December, 2009
Bagus bgt bos... inform ny
sengonjaya said... 24 December, 2009
trim but bang herman atas infonya saya jd tambah pengalama
Aze said... 10 January, 2010
thx pak dhe..........;;)
Maybrat said... 26 May, 2010
thank's yach..!!!
aq dah m'coba n berhasil..!!
blog_Q_(ABDEE_CS) said... 14 June, 2010
mantap hasil nya kawan mksih yaaa,, atsa ilmu nyaa

lam knalllllll

wong matarammm
Arhiez said... 14 June, 2010
Infonya berguna sekali Mas Herman, apalagi saya baru belajar ngeblog nih. hehehehe ^_^

thanks
M. Fahrin Noor said... 13 November, 2010
Meletakkan nya di mana mas?
kenapa saya tidak bisa membuatnya selalu ada tulisan : Kami tidak dapat meninjau template Anda
Harap perbaiki kesalahan di bawah, dan kirimkan template Anda lagi.
Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
Pesan error XML: The markup in the document following the root element must be well-formed.
givaraja said... 14 November, 2010
MAS SAYAH MENTA KOPAS ARTIKELNYA YAA MAS AKU KASIH LINKNYA MAS THNK:((
Pao said... 07 December, 2010
:D izin ambil ya ka
Tole ne Toudano said... 03 January, 2011
mantap ga! langsung praktek n top marko top!!!
rys random said... 18 January, 2011
tengkyu bos, manstaap !!
BIsnis Online said... 21 January, 2011
Terimakasi Infonya ......Sukses terus ya :D
eny in bisnis said... 18 February, 2011
Wahh ...ini ni yang aku cari , cara membuat banner, thks gan....:)
Sidabutar Kings said... 25 February, 2011
Tks bos infonya.tambah deh pengetahuan utk mempercantik blog. oh ya bos pasang link (follower) dong ke blog ku di Amazing aku udh lama jd follower blog ini.tks
Ponpes Mathla'ul Huda said... 14 March, 2011
thank's mas,, tp msih btuh bimbingan neh...
coz msih baru...
pasar klithikan jogja said... 12 April, 2011
walah uwapik tenan masbro , dah tak terhitung lagi info disini yg tak aplikasikke di blogku..caranya biar tampilan blog rapi nggak pating penjoto disana sini gemana yah..maklom amatiran masbro , coba tengok , ukuranya gak sama , frigite ada yg menceng sanasini...dtunggu . suwun....
TeaYoungAreLead said... 19 June, 2011
Lam kenal!:) Nise info Gan, ijin copas ya!;)
Imtiyaz Blogger said... 01 September, 2011
tolong aku dong :((
Syafi' al-Quds said... 15 October, 2011
thanks atas infonya....kunjungan baliknya gan,,,
agus supriyadi said... 18 October, 2011
terima kasih Gan atas informasinya...........


http://tokojati.com/
maestrocellular said... 20 November, 2011
http://bursaduit.blogspot.com/
Syena Maulana said... 12 July, 2012
cara membuat agar tulisanya bila di clik menuju link tertentu gmna bang...???
:-/
~x(
Sukasuka Andy said... 30 September, 2012
ini narok kodenya dmna mas bro??
infofutures said... 13 November, 2012
manfaat ilmunya
Tino daulat99 said... 19 January, 2013


Lengkap gan , thanks, ijin nyoba ;))

:)) :)] ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* : 8-} ~x( :-t b-( :-L x( =))

Post a Comment