Cara Buat Gambar Bergerak (Scrolling Image)

Membuat scrolling image dapat memberi pandangan yang berbeza berbanding memaparkan gambar secara statik. Kebanyakan scrolling image ini diaplikasikan oleh sesetengah blog yang mempunyai senarai list dalam bentuk gambar seperti banner ataupun mendapat tag daripada blogger lain.

Contoh scrolling image adalah berikut.





Pergerakan setiap gambar dapat diubah samada dari kiri ke kanan, bawah ke atas dan sebaliknya. Selain itu kelajuan pergerakan setiap gambar juga dapat dikawal.


Contoh kod bagi scrolling image adalah seperti berikut.


<marquee direction="left" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" width="150" height="200">


<a href="link untuk dibuka" target="_blank"><img src="url gambar" /></a>
<a href="link untuk dibuka" target="_blank"><img src="url gambar" /></a>

</marquee>


Penerangan:

Arah pergerakan gambar : boleh ditukar kepada up, down dan right.
Kelajuan pergerakan gambar : boleh ditukar kepada nombor lain. Semakin tinggi nilai semakin laju.
link untuk dibuka: link yang hendak dibuka apabila gambar diklik.
url gambar: url gambar yang hendak dipamerkan.

Nota:
1. Jika anda ingin menambah lebih banyak gambar, cuma copy paste kembali untuk bahagian gambar
2. Kod-kod ini dapat digunakan di dalam post entri ataupun pada bahagian gadget

133 comments:

  1. x fhmlah..mcmane nk upload gmbr sendiri jd mcm ni eh?

    ReplyDelete
  2. url gambar boleh diupload dari blogger.com sendiri atau dari web lain seperti imageshack.us

    cara nk dapatkan url gambar right click pada gambar kemudian pilih 'copy image location' (firefox), ataupun dapatkan 'direct link'

    ReplyDelete
  3. boleh ajar bagaimana letak kod diatas? nak taruk dekat mana? kalo kita pakai aplikasi picture bagaimana?

    ReplyDelete
  4. kalo ak nk gne gamba yg ader dlm pc tak ley la ek?

    ReplyDelete
  5. memang senang kot..cepat click http://mudahbetul.blogspot.com

    ReplyDelete
  6. tahniah. ia banyak membantu kami yang tua ni. tq

    ReplyDelete
  7. saya dah cuba tetapi gambar tak tukar ke gambar seterusnya.. keluar 1 gambar ja..

    ReplyDelete
  8. dh guna kat blog thanx tuan umah...:)

    ReplyDelete
  9. SAYA MASIH TAK FAHAM MCAM MN NK CARI LINK DAN URL GAMBAR.

    SEDIH LA GAGAL BUAT. TOLG AJARKAN

    ReplyDelete
  10. macih banyak!!
    senang keje den!!!

    ReplyDelete
  11. LINK DAPAT BILA KITA RIGHT KLIK...NNTI ADA KELUAR COPY URL IMAGE..AMIK YG 2 THEN PASTE KAT MANE NK...

    ReplyDelete
  12. tapi cm na ada buat gambar bergerak kat ats blog kite tu..mksud fara bile kite macok blog org tu ..akan keluar gambar pergerak sekali nama die ag ..cam new nk buat cm tu

    ReplyDelete
  13. huhu , susah lahh . asyik x jd jew ? asl ea ?

    ReplyDelete
  14. link utok dibuke cane yek ?? nk amk at ne ??

    ReplyDelete
  15. kalO letak kat post entry, gambar yg saiz kecik pon jadi besar.cane tu?

    ReplyDelete
  16. cmna ek na tuka tulisan cm blog , help me please :(

    ReplyDelete
  17. dowh...jadi tu mmg jadi...tapi...tengok sdiri ar kat blog sayer...cdey ase.... :(

    http://kucingoren93.blogspot.com

    ReplyDelete
  18. hahaha...daa boley...ejas situ sini baru laa mnjadik... :D

    ReplyDelete
  19. salam..nk tnya..sy da ltak bnyk gmba..tp tak boleh pun.. ble reduce2.. 5 kping gmba je buleh..npe eh..memg xbleh bnyk2?

    ReplyDelete
  20. x jadi larhh .. link n url gmba tuh amek camne ?? hehe , tlg ajar ..

    ReplyDelete
  21. bro.. nk request ckit.. camne nak wat iklan jadi camni yer.. review jap iklan churpchurp terkini

    ReplyDelete
  22. ni link die http://www.gengblogger.com/v/373552

    ReplyDelete
  23. x paham la...

    boleh expain step by step tak?

    ReplyDelete
  24. npew saye buat satu gambar jerk yg bgerak ,,???

    ReplyDelete
  25. nak tambah gambar macam mana ?
    tak faham ?

    ReplyDelete
  26. url gmbr tu na ambek at ane ? photobucket ke at mne ?

    ReplyDelete
  27. wah best nye nak cube lah....

    ReplyDelete
  28. tk fhm larh perkataan ''link untuk dibuka '' tuw apa err ?

    ReplyDelete
  29. salam...yana dah cube tp dapat satu gmbr je...dah cuba tambah tp tak kuar pun gmbr lain...

    ReplyDelete
  30. xjadi~~nape erk...gmabar x gerak pon..waduh3..

    ReplyDelete
  31. pesal gambar besar sangat ?

    ReplyDelete
  32. masih x paam...tlng ajar scra mndlm boler...

    ReplyDelete
  33. sng je..

    copy code atas 2 kat html/javascript

    pastu ganti URL gambar dengan url gambar kte..cara nk dptkan url gambar..cth gambar yg da di uoload kat blogspot 2---> right click-----> copy image URL----> paste kat ruangan URL gambar..


    link untuk dibuka 2..cth http://ceriteramoon.blospot.com bila org klik kat gambar 2..die akan bwk kte trus ke link 2..

    kalo nk lebih phm..singgah blog moon..nnty moon ajarkan..tuan blog ni bz sgt nk reply..

    sory yer tuan blog..anyway tanx for the info..da buat da..=)

    ReplyDelete
  34. Gambar jadi x nampak la sbb besar sgat. camna nak adjust sizenye??

    ReplyDelete
  35. bnde nehh kne buadd one by one kee ? please ansewr me .

    ReplyDelete
  36. mcm mne naa dpt kn url dr pic kte ? tade pon yg mcm kak moon ajr kn ? hurm ..

    ReplyDelete
  37. tutorial ni boley wat kat sidebar tak ?

    ReplyDelete
  38. yeah ! tengs , dhapad , walaopons taa jdy sgt but i like it , tengss to imageshack.com .

    ReplyDelete
  39. boleh tolong ajar macam mane nak wat gmbar brgerak nie , daa cube banyak kalo tapi taley pon .. nak copy line nie kat mane ?

    ReplyDelete
  40. pembetulan , boleh tolong ajar macam mane nak wat gmbar brgerak nie , daa cube banyak kali tapi taley pon .. nak paste link nie kat mane ?

    ReplyDelete
  41. thanks,,shaye berjaya buat,, =D

    ReplyDelete
  42. mcm mne nk ejas size bg gmbr tu muat2 kotak tu??gmbr sume bsar sgt..trptong je...

    ReplyDelete
  43. rara xdpt uat la..
    ckit un xphm...
    hahaha..
    cmne ek???
    ssh la...\plezz...
    help me....

    ReplyDelete
  44. size gambar ubah pada s... "http://4.bp.blogspot.com/-zRecuyZFd44/TeJ35LWIE6I/AAAAAAAABg0/I5XxoJCmUBU/s150/INTBMcontest.jpg"

    ReplyDelete
  45. yes..dh dpt wat..trimas..nk dpt url gmbr snng je..upload pic ke photobucket..nnt photobucket akan sediakan trus url image kt upload tu..thanks yo.. !!

    ReplyDelete
  46. ta jdy2 pon , da bnyk kli try , plezz banntuan .

    ReplyDelete
  47. tak faham lah macam mana nk buat~x boleh pun tolong~jawab please~

    ReplyDelete
  48. jdy tu jdy.. tp , xley letak gamba mnyk-2 ke ? takkan dua je kot ? huahuahua~ hadeeyhh ~! boley letak bnyk ta ? hik3..

    ReplyDelete
  49. HAHA !TANIAH-2 akhirnya JADI JUGA :)
    THANK YOU <3

    ReplyDelete
  50. asl nak buat scroll image ta boleh arr ? ta jd..

    ReplyDelete
  51. link untuk dibuka ? ape tuu ? mcm mne nk buad ?
    url gmbr boleyh dpt kat mne ?

    ReplyDelete
  52. sowie x fham la time nk letak byak pic 2..
    klu x nk link kn pic cm ne??

    ReplyDelete
  53. Xfhm nie...Tlg larh ajrkn..
    Cam ner nie...

    ReplyDelete
  54. mcm mane nak amek URL nyehh.?? ta jumpe lahh.

    ReplyDelete
  55. asal...1 gmbr je yg jdi.letak..2 terus rosak

    ReplyDelete
  56. cm ne nx kcik kn gmbr 2????
    x jd la...help

    ReplyDelete
  57. gambar jadi besar laaaaaa :( macam mana ?

    ReplyDelete
  58. , Sorry nak tanya. Kenapa gambar yg kita letak tu boleh jadi besar? Macam mana nak kecikkan sikit gambar tu? :)

    ReplyDelete
  59. mcm mane na letak gambar banyak banyak ? asyik tak jadi :(

    ReplyDelete
  60. picture tu jd besar . macam mne nak kecik je ?

    ReplyDelete
  61. SAYA BUAT JADI

    camne nk letak pic byk?
    copy link yg d bg tu...

    gne yg dua baris bwh tu utk tmbh pic

    paste kn kat bwh dari link yg owner blog bg tu tp maku sure jgn isi selepas

    isi atas dia dgn 1x enter

    kat blog saya dah jd....

    ReplyDelete
  62. makasih ilmunya....sangat membantu bgt,,,,,

    ReplyDelete
  63. ta dpt larhh... unwanted pliz help me.!!

    ReplyDelete
  64. kenapa gambar dia jadi besar? mcm mana nk bg gambar dia bg kecik sikit?

    ReplyDelete
  65. sye x dpt nk wat gmbr brgerak nhe....x fham crenye.

    ReplyDelete
  66. kenape gmbr tuu kuar bnyk... addoyyy... camne neyh... da buntu fikir neyh... tolongg..

    ReplyDelete
  67. awak saya jadi buat tapi cuma satu je gambar boleh letak kalau saya letak banyak bnyak tak keluar pon gambar yang lain :p

    ReplyDelete
  68. mcm mane nak kecik kan gambarr tuuu..

    ReplyDelete
  69. bla letak gmbr jdi bsar..nk kcikkn cm ne???

    ReplyDelete
  70. alaa ta jd laaa . cm ne nyh .. ta paham laa . leyh tlg ta ajar kite ,, mne na dpt kan url kite tuh . bab tuh yg ta pham

    ReplyDelete
  71. da jd . tp mcm mne na ltak pic tuh lbey dri 2 ye

    ReplyDelete
  72. Saya dah buat..Dan ia dah berjaya..cuma,,link untuk dibuka tu,,saya tak faham

    ReplyDelete
  73. jadi tapi image jadi besar . :(

    ReplyDelete
  74. tak jdi pown ? mcm mne nk ambik URL GAMBAR ? gmbr tuhh diambil dri mne ? komputer or laman sosial ?

    ReplyDelete
  75. cam ne nak buat url gambar???tlg jelaskan satu persatu???

    ReplyDelete
  76. dah buat brapa kali.. mmg menjadi.. tp saiz gmbar plak jd besar.. mcm na nak kecil kn erk?

    ReplyDelete
  77. tq tq
    http://duanprintingmaju.blogspot.com

    ReplyDelete
  78. salam macam mana nak letak background laen tanpa menggunakan background yg diorang bg..letih saye buat xjdi harap dapat tolong

    ReplyDelete
  79. assalamualaikum
    admin saye tak faham url tu...
    boleh terangkan?

    ReplyDelete
  80. salam 1malaysia saya pun tak faham ... sila jelaskan dgn lebih teliti

    ReplyDelete
  81. hye..!! korang.. kalau nak tau lebih lanjut.. mcm gambar x kuar, x tau cmne nak dapat url....

    click kat sni... ef akan terangkan melalui video..

    http://geekinbeat.blogspot.com/2013/05/tip-tutorial.html

    ReplyDelete
  82. mas tukar benner yu sama saya http://tutorialuntukblog.blogspot.com/2010/02/cara-buat-gambar-bergerak-scrolling.html

    ReplyDelete
  83. Keren tutorialnya. silahkan berkunjung ke blog saya juga ya?

    ReplyDelete
  84. Very interesting article, I really enjoyed every article of this blog, and I learned a lot from here. Thank you for sharing with us. Visit my blog dofollow auto approve http://goo.gl/31NAio.

    ReplyDelete