Cara Buat Perkataan Bergerak (Scrolling/Marquee Text)

Posted on 10:09:00 AM by  with 101 comments
Membuat perkataan yang bergerak dapat menarik minat pengunjung terhadap pergerakan tersebut seterusnya menarik minat pengunjung apa yang ingin disampaikan oleh pemilik blog. Selain dikenali sebagai scrolling text, ianya juga dikenali sebagai marquee text.
Cara Buat Perkataan Bergerak

Walaupun pergerakan ini menarik minat, tetapi tidak digalakkan untuk diletakkan terlalu banyak di dalam blog kerana dibimbangi keadaan 'menarik' bertukar 'menyerabutkan'.:)

Berikut adalah tutorial untuk membuat perkataan bergerak.
Tutorial ini akan dimulakan dengan kaedah paling asas dan juga diletakkan penambahan.

1. Kod asas untuk perkataan bergerak (dari kiri ke kanan adalah)

<marquee>Contoh scrolling text</marquee>


Output untuk kod ini seperti berikut:
Contoh scrolling text

2. Ubah pergerakan perkataan
Penambahan kod berikut diperlukan dalam kod asal.

direction="left"
direction="right"
direction="up"
direction="down"



Berikut contoh kod untuk pegerakan dari kanan ke kiri

<marquee direction="right" >Contoh scrolling text</marquee>


Output untuk kod ini adalah
Contoh scrolling text

3.Ubah warna background
Untuk ubah background, perlu diletakkan kod berikut

bgcolor="#kod warna"


Senarai kod warna boleh didapati disini.

Contoh kod yang diletakkan background,

<marquee direction="right" bgcolor="#99CCFF">Contoh scrolling text</marquee>


Output untuk kod ini adalah
Contoh scrolling text

4. Perkataan dalam keadaan 'anjal'
Penambahan kod berikut diperlukan ke dalam kod asal.

behavior="alternate"


contoh kod yang diletakkan trick ini.

<marquee behavior="alternate" bgcolor="#99CCFF">Contoh scrolling text</marquee>


Output untuk kod ini
Contoh scrolling text

5.Ubah kelajuan perkataan.
Pergerakan juga dapat diubah dengan menambah kod berikut

scrollamount="2"


Contoh kod dengan trick ini.

<marquee behavior="alternate" direction="left" bgcolor="#99CCFF" scrollamount="2">Contoh scrolling text</marquee>


Output:
Scrollamount :2
Contoh scrolling text

Scrollamount :4
Contoh scrolling text

6. Pause apabila cursor dilalukan.
Perkataan yang bergerak juga dapat dihentikan apabila dilalukan cursor. Kebiasaannya ini untuk memudahkan pengunjung untuk membaca apa yang ingin disampaikan tanpa ganguan.

Penambahan kod yang perlu dilakukan adalah

onmouseover="this.stop()" onmouseout="this.start()"


Contoh kod dengan trick ini.

<marquee behavior="alternate" direction="left" bgcolor="#99CCFF" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" >Contoh scrolling text</marquee>


output untuk trick ini.
Contoh scrolling text

101 comments:

  1. NazMarch 14, 2010 at 1:50 PM

    tutorial dan tips yg cool... terima kasih kerana sudi berkongsi... :)

    ReplyDelete
  2. AnonymousMarch 14, 2010 at 2:41 PM

    cool beb tq

    ReplyDelete
  3. z.a.r.aMarch 15, 2010 at 4:54 PM

    best2...dh bejaya buat hehe :)

    thnks :p

    ReplyDelete
  4. apiszApril 9, 2010 at 11:14 PM

    kalau nak besarkan saiz pkataan bole x?

    ReplyDelete
  5. Syahira SamsudinMay 17, 2010 at 4:52 PM

    blog url tu ape eh ?

    ReplyDelete
  6. faisal @May 18, 2010 at 8:37 PM

    Cool,memang menarik entry ko ni =)

    ReplyDelete
  7. SyIDi 142June 1, 2010 at 5:48 PM

    caner ek kalo nk tuka size font ngn jenis font tu?

    ReplyDelete
  8. SiTi_91June 14, 2010 at 6:55 AM

    Tutorial yg menarik..

    ReplyDelete
  9. care boyJune 17, 2010 at 3:20 PM

    trimas!!amik ya ilmu ni.tq.

    ReplyDelete
  10. ZannaMazlanAugust 17, 2010 at 9:33 PM

    thanx.....dh guna kat blog...nice!!!

    ReplyDelete
  11. cik cima comotSeptember 7, 2010 at 12:37 PM

    kalau nak tukar size font tu macam mana eh?

    ReplyDelete
  12. khalija ibrihainSeptember 17, 2010 at 5:15 PM

    macam mane nak buat scrolling text utuk url kite kat atas tu?

    ReplyDelete
  13. zaL_cdpxOctober 2, 2010 at 10:19 AM

    CMNER NK TUKAR KALER FONT TU ?

    ReplyDelete
  14. fad***November 4, 2010 at 6:34 AM

    timer kacih banyak2

    ReplyDelete
  15. fad***November 4, 2010 at 6:56 AM

    untuk size ,<,span class="Apple-style-span" style="font-size: ******;">
    letak******
    x-small
    small
    x-large
    xx-large

    ReplyDelete
  16. fad***November 4, 2010 at 7:03 AM

    untuk warna
    '<'span class="Apple-style-span" style="color: *******;">
    *******nama warna in english pastu [<]/span>

    ReplyDelete
  17. AaNovember 24, 2010 at 3:57 AM

    sebenanya tak faham...
    kod-kod yang diberi nie nak di letak dekat mane???

    ReplyDelete
  18. areyuuSyunkNovember 24, 2010 at 3:32 PM

    klu tajuk blog nk gerak ann cm ner lak???

    ReplyDelete
  19. areyuuSyunkNovember 25, 2010 at 1:01 PM

    mcm mnew nk wt wane lain,
    xbole pun wt yg fad aja uhh???

    ReplyDelete
  20. fad***November 30, 2010 at 11:14 PM

    tulis
    span calss="Apple-style-span" style="color:red;"

    ReplyDelete
  21. Miss jepnatics December 2, 2010 at 3:14 PM

    Ape mende ni? Aku x faham :( terangkan la....

    ReplyDelete
  22. hitam manisDecember 3, 2010 at 2:19 AM

    npe wt kua skli sume yg dtulis
    bkn txt yg kte nk 2 je

    ReplyDelete
  23. Nur Syafiqah bt Zulkifly Bin MohamadDecember 3, 2010 at 10:43 PM

    Hehe...sangat menyukai :)

    ReplyDelete
  24. niKKancomEDecember 5, 2010 at 9:05 PM

    xpham la nak baut cam mne???/kod ni kne letak kt kwsan mne????

    ReplyDelete
  25. gadis kepastianDecember 13, 2010 at 1:39 PM

    ye kurang fhm...nak letak kat mana??

    ReplyDelete
  26. sturymurykuDecember 16, 2010 at 9:29 PM

    kod wrne nk amk kt ane yek??

    ReplyDelete
  27. eyesha toma♥December 19, 2010 at 1:41 AM

    klo na letak nme bebnyk cmner ?

    ReplyDelete
  28. kak LongDecember 24, 2010 at 1:31 AM

    dah buat tp kecik je teksnye..camne yek nk kasi besar tekst dn tebal? time ksih kerana tnjuk ajr

    ReplyDelete
  29. Mimie AmirahDecember 24, 2010 at 4:33 PM

    nape dah buad tp still tk boleh ? dy kua kod tu . nak letak kat mane ?

    ReplyDelete
  30. jasmine saidiDecember 25, 2010 at 7:17 PM

    nk letak kt mne nih

    ReplyDelete
  31. Che Deen™December 26, 2010 at 12:54 PM

    thnx!XD

    ReplyDelete
  32. ARIF AIMAN]]December 30, 2010 at 10:06 AM

    THANKS:D

    ReplyDelete
  33. ARIF AIMAN]]December 30, 2010 at 10:07 AM

    LETAK AR KAT TEKS...

    ReplyDelete
  34. I LOVE UJanuary 10, 2011 at 3:46 PM

    tak tau lh ...

    ReplyDelete
  35. darwisya miloJanuary 16, 2011 at 7:43 AM

    tengs

    ReplyDelete
  36. Aida NurdienaJanuary 28, 2011 at 11:13 PM

    nak buat bagi tulisan 2 beasr cam mane yer???

    ReplyDelete
  37. atyn :')January 30, 2011 at 7:46 PM

    nk paste kt mne nie yer ?

    ReplyDelete
  38. UnknownJanuary 31, 2011 at 10:45 AM

    terima kaseh tuan tanah...menjadi....

    ReplyDelete
  39. razzmatazzFebruary 1, 2011 at 2:03 PM

    btol tu. nk ltk kt mne ek kod tu?

    ReplyDelete
  40. nina violettFebruary 1, 2011 at 3:32 PM

    npe x bleh ? . .x dew pown tlisn nye ?. .
    why ?. .

    ReplyDelete
  41. tatak qiLaFebruary 1, 2011 at 4:29 PM

    xpham la.xdek step ye?

    ReplyDelete
  42. AmirFebruary 1, 2011 at 11:54 PM

    nak tanya macam mana nak bagi perkataan tu center? atau justify?

    ReplyDelete
  43. AmirFebruary 2, 2011 at 12:14 AM

    saya nak tahu macam mana cayanya, supaya saya dapat membuat makluman kepada pelawat tentang aktiviti terkini contohnya : Tajuk,Tarikh, Masa dan tempat.

    ReplyDelete
  44. dumpling huszFebruary 4, 2011 at 10:11 PM

    nk paste kt mna link 2??
    xphm la...lg 1 soaln mcm mna nk buat ank pnh tetikus 2 boleh da mcm cork yg ikut sana sini??

    ReplyDelete
  45. illaFebruary 7, 2011 at 7:29 PM

    thank a lot... menarik sangat..

    ReplyDelete
  46. cheapprettythingsFebruary 12, 2011 at 8:45 AM

    u are so great! Thanks sbb share knowledge. Clicked all your nuffnangs ;p

    ReplyDelete
  47. nurainiFebruary 18, 2011 at 3:28 PM

    it's awesom...
    i like... <3

    ReplyDelete
  48. zuraFebruary 28, 2011 at 12:10 PM

    tqvm,,,,nk tnya skit,,
    camne nk besarkn tulisan..!!

    ReplyDelete
  49. UnknownFebruary 28, 2011 at 3:47 PM

    thank you ! saya sudah pandai buat scrolling ny ;)

    ReplyDelete
  50. D'OneNaz Jc CornerMarch 3, 2011 at 1:50 PM

    huhu...xpaham...ktna nk copy suma tuh??lau title gadget ja leh buat jgk kew?

    ReplyDelete
  51. UnknownMarch 5, 2011 at 11:38 AM

    done!! but macam mane nk tukar color tulisan pulak...

    ReplyDelete
  52. AnonymousMarch 5, 2011 at 6:25 PM

    xjadi laa . :(

    ReplyDelete
  53. Aida Mat YasinMarch 16, 2011 at 10:40 PM

    nak letak kt mana ? tak faham lahh !

    ReplyDelete
  54. city_asthmaMarch 20, 2011 at 9:30 AM

    jadi...thanx auw..

    ReplyDelete
  55. EfazielaMarch 24, 2011 at 4:50 PM

    nak letak kat mana ni?? xfhm la...

    ReplyDelete
  56. Hafiz DeenApril 4, 2011 at 1:50 PM

    xpham la... :(

    ReplyDelete
  57. rubyApril 5, 2011 at 5:13 PM

    yang saiz font da jadik..tp yang tukar kaler font x jadik2 jugak...huhuhu

    ReplyDelete
  58. mila April 6, 2011 at 11:55 AM

    ta paham macam mana nak buat.

    ReplyDelete
  59. syahidan syahidApril 7, 2011 at 11:00 AM

    cmne ni,xpaham...mula2 nk pi kt mane dlu?

    ReplyDelete
  60. ~ yoona ~April 19, 2011 at 1:44 AM

    mcm mn nak buat ne???x fhm la...

    ReplyDelete
  61. FiZah BoRhaNApril 19, 2011 at 1:15 PM

    macamana nk tukar text tue..tulis kita nak buat..kuar perkataan contoh scolling plak..

    ReplyDelete
  62. ps_motoworkApril 28, 2011 at 2:32 AM

    nk bg besar tulisan mcm mna ye?

    ReplyDelete
  63. SyukhaireyMay 1, 2011 at 1:48 PM

    masalah text bergerak MARQUEE ni...tersekat2 & x nampak smooth. kdg2 tersangkut terus masa mula2 buka..klu guna browser Mozilla lg lar.

    ReplyDelete
  64. Arfazilah AbkaMay 14, 2011 at 7:33 PM

    saya da faham, but then, mana nak letak kod utk font n kaler tu?

    ReplyDelete
  65. danishJune 18, 2011 at 1:06 AM

    menarik, pembelajaran baru bagi saya. terima kasih

    ReplyDelete
  66. sheral'sonemie !June 25, 2011 at 4:58 PM

    nak ltak kat mna kod ni???

    ReplyDelete
  67. yayathJune 25, 2011 at 6:16 PM

    nice 1:)thanks a lot..

    ReplyDelete
  68. JRJune 25, 2011 at 11:06 PM

    fizah..bukak notepad-paste link(tukar text..) page element- edit HTML-save..ok ke?

    ReplyDelete
  69. Dot Dot DotJuly 1, 2011 at 2:34 PM

    code ni nk paste kt mne ek...???

    ReplyDelete
  70. Mohd Haziq Putra AzmeeJuly 9, 2011 at 1:03 PM

    jawab laaaaa dorg, nak paste kat mana ea

    ReplyDelete
  71. I LOVE U !July 15, 2011 at 5:51 PM

    susah lahh sikett buadd y nehh .

    ReplyDelete
  72. UnknownAugust 9, 2011 at 12:59 PM

    aduiiiaiiii...da pham tp nak paste
    kat add gadget gak kew??
    i need some little help here..
    please guide me..

    ReplyDelete
  73. Beautybajet4uAugust 11, 2011 at 11:24 PM

    SAYA PUN TGH PK SAMPAI SAKIT KEPALE NAK PASTE KT MANE...:((

    ReplyDelete
  74. princess_coffee blogspotSeptember 17, 2011 at 9:59 PM

    tipu....x kuar2 pon..penat la..dr smlm..dah try..x leh gak... :(

    ReplyDelete
  75. =) Sii Putt (=October 24, 2011 at 4:56 AM

    nak paste kat mner??

    ReplyDelete
  76. blackbabyOctober 26, 2011 at 3:16 PM

    paste la dekat tempat yang nak letak tulisan tuu . kan ada tulis 'CONTOH SCROLLING TEXT' tu kan ? ganti kan dgn ayat apaa yang korang nak letak .

    ReplyDelete
  77. AnonymousNovember 8, 2011 at 8:32 PM

    thanks memang menjadi..bagi yg tak tau..first pegi kat design,,then pilih mane2 add gadjet..pastu paste kod yang korg dah copy kat atas dekat CONTENT bukan title..then save..mesti jadi

    ReplyDelete
  78. Adila DylaNovember 21, 2011 at 9:26 PM

    ok fhm

    ReplyDelete
  79. AnonymousDecember 3, 2011 at 3:24 PM

    THANKS SEBAB KONGSI ILMU

    ReplyDelete
  80. Iyza SterraDecember 4, 2011 at 11:29 AM

    pd korank yg x phm bnd nie nk ltk at mne nie sye tlg ajr...
    1.add gadget
    2.+ html/javascript
    3.korank copy code at ats nie yg plg last skali
    4.paste dkt html/javascript
    5.pkataan "contoh scrolling text" tu korank tkr dgn ayt korank
    6.ntuk wrna lak korank klik at step no.3 at ats yg pkataan "di sini" tu
    7.korank plh wrna korank ske n copy code dia
    8.korank paste code korank td at "99CCFF"
    9.(#) bnd dlm bracket tu jgn buang
    10.then korank ltk "html/javascript" korank yg da siap nie at ats "blog post" (lau x nk ltk at ats pown ley, ltk jew at mnew2 yg korank ske)
    11.save n siap

    ReplyDelete
  81. AnonymousDecember 11, 2011 at 12:47 PM

    tutorial yang menarik:)

    ReplyDelete
  82. AnonymousDecember 11, 2011 at 12:49 PM

    boleh tolong publish cara nak buat header yang cantik x???? :)

    ReplyDelete
  83. AnonymousDecember 17, 2011 at 5:49 PM

    huhu ta paham . macam mane nyh

    ReplyDelete
  84. nana ayrienDecember 18, 2011 at 10:18 AM

    haha da pndai da .. terima kasehh

    ReplyDelete
  85. AmiraDecember 18, 2011 at 10:24 PM

    x phm langsongg

    ReplyDelete
  86. dihaJanuary 31, 2012 at 6:19 PM

    msih tak mnjadi..tah ape la sebabnye..haih..

    ReplyDelete
  87. Wahid Hasan A.DFebruary 10, 2012 at 3:47 PM

    THANKS KAKAK!!!

    ReplyDelete
  88. Tyra IsmailMarch 9, 2012 at 10:09 AM

    nice tutorial .. really love it .. tapi camner nak wat words tu bila gerak dia terus sambung jerp .. means dia xtunggu habis words tu masuk , words yg same ikot belakang .. then cmner nak tuka font ? :)

    ReplyDelete
  89. AnonymousApril 8, 2012 at 1:14 PM

    thanks eh

    ReplyDelete
  90. r e a l m e nMay 10, 2012 at 11:33 PM

    Tak paham laa , nak copy code yang last skali ? yang mana ?

    ReplyDelete
  91. Nrfarihah KamarudinMay 26, 2012 at 12:14 PM

    Terimakaseh . Dah siap pun itee punye :')

    ReplyDelete
  92. UnknownJune 30, 2012 at 3:56 PM

    Tq =]

    ReplyDelete
  93. UnknownJuly 23, 2012 at 11:19 PM

    nice <3 ,, lve it ..!

    ReplyDelete
  94. DianaDecember 2, 2012 at 1:05 AM

    tERIMA kASih atas Info yg Bergna....Jemput LAwat blog saya...http://dianarashid92.blogspot.com/

    ReplyDelete
  95. AzmilDecember 5, 2012 at 4:45 PM

    Tolong buat tab ((antara SINGAAPORE - 8th December (2.) MALAYSIA)) , sebab outputnya ...SINGAPORE(2)MALAYSIA...rapat sangat CAMANA NAK BUAT TAB ANTARANYE dalam kod html sbb bila running marquee dianya takde space sngt atau bertindih satu dua perkataan sbelum dan selepas? THANK YOU SIR.

    ReplyDelete
  96. DeenachosJanuary 5, 2013 at 4:37 PM

    Arigato Ghosaimas

    ReplyDelete
  97. Aida.OhnoJanuary 14, 2013 at 5:45 PM

    thank you.sangat simple plus senang.thumbs up :)

    ReplyDelete
  98. UnknownJune 12, 2013 at 11:47 PM

    Contoh Buat Ganti Warna Kaya Gini ni Gan

    Contoh scrolling text

    ReplyDelete
  99. UnknownJune 12, 2013 at 11:55 PM

    Contoh Buat Ganti Warna Kaya Gini ni Gan Caranya

    span calss="Apple-style-span" style="color:red;"

    Code Di Atas Tarok Sesudah Code : bgcolor="754F9A"

    ReplyDelete
  100. AlepOctober 12, 2013 at 11:40 AM

    code tu nak ltak kat mna erk??

    ReplyDelete
  101. QeyraNovember 27, 2013 at 5:12 PM

    Daebakkk! memang menjadi lahh. semua menjadi.. tapi tak letak semua lah sebab nnti blog jadi serabut & x kemas .. hehe :D ada masa tu, singah2 la kt blog qeyraaaaaaaaaa ye ( qeyraayra.blogspot.com ) XD

    ReplyDelete

Subscribe to: Post Comments (Atom)