Cara Buat Perkataan Bergerak (Scrolling/Marquee Text)

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. tutorial dan tips yg cool... terima kasih kerana sudi berkongsi... :)

    ReplyDelete
  2. best2...dh bejaya buat hehe :)

    thnks :p

    ReplyDelete
  3. kalau nak besarkan saiz pkataan bole x?

    ReplyDelete
  4. Cool,memang menarik entry ko ni =)

    ReplyDelete
  5. caner ek kalo nk tuka size font ngn jenis font tu?

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

    ReplyDelete
  7. kalau nak tukar size font tu macam mana eh?

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

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

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

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

    ReplyDelete
  12. klu tajuk blog nk gerak ann cm ner lak???

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

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

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

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

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

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

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

    ReplyDelete
  20. nak buat bagi tulisan 2 beasr cam mane yer???

    ReplyDelete
  21. terima kaseh tuan tanah...menjadi....

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

    ReplyDelete
  23. nak tanya macam mana nak bagi perkataan tu center? atau justify?

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

    ReplyDelete
  25. 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
  26. thank a lot... menarik sangat..

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

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

    ReplyDelete
  29. thank you ! saya sudah pandai buat scrolling ny ;)

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

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

    ReplyDelete
  32. nak letak kt mana ? tak faham lahh !

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

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

    ReplyDelete
  35. ta paham macam mana nak buat.

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

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

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

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

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

    ReplyDelete
  41. menarik, pembelajaran baru bagi saya. terima kasih

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

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

    ReplyDelete
  44. jawab laaaaa dorg, nak paste kat mana ea

    ReplyDelete
  45. susah lahh sikett buadd y nehh .

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

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

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

    ReplyDelete
  49. 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
  50. 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
  51. THANKS SEBAB KONGSI ILMU

    ReplyDelete
  52. 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
  53. tutorial yang menarik:)

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

    ReplyDelete
  55. huhu ta paham . macam mane nyh

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

    ReplyDelete
  57. 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
  58. Tak paham laa , nak copy code yang last skali ? yang mana ?

    ReplyDelete
  59. Terimakaseh . Dah siap pun itee punye :')

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

    ReplyDelete
  61. 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
  62. thank you.sangat simple plus senang.thumbs up :)

    ReplyDelete
  63. Contoh Buat Ganti Warna Kaya Gini ni Gan

    Contoh scrolling text

    ReplyDelete
  64. 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
  65. code tu nak ltak kat mna erk??

    ReplyDelete
  66. 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