Tutorial Buat Scroll Box Untuk Blog Archive

Blog archive untuk sesebuah blog boleh menjadi list yang begitu panjang apabila banyak entri yang di post atau jika sudah lama terlibat dengan dunia blogging.

Tutorial kali ini kan menunjukkan bagaimana untuk jadikan blog archive anda boleh scroll untuk menampakkannya lebih ringkas menyenangkan mata memandang.:)



Tutorial untuk buat scroll bagi blog archive adalah seperti berikut.



1. Dari dashboard > design > edit html > Expand widget templates.
(backup template untuk langkah berjaga²)

2. Menggunakan fungsi find (ctrl + F), cari kod <div id='ArchiveList'>

3. Anda akan jumpa kod ini <div class='widget-content'> sebelum kod <div id='ArchiveList'>

4. Gantikan kod <div class='widget-content'> yang anda jumpa di langkah 3 dengan kod berikut.

<div class='widget-content' style='overflow:auto; height:200px'>



Note: Anda boleh tukar 200px dengan ketinggian yang anda mahukan.

Contoh:

Sebelum.


Selepas


4. Save dan lihat hasilnya.:)

-------------


Untuk scroll box widget lain yang menggunakan html code, boleh rujuk tutorial scroll box untuk widget

105 comments:

  1. terbaikkk ! berjayaaaaa :D

    ReplyDelete
  2. ehh ! nak tanya..
    kalau nak buat blog archive punye plak mcmane ? pleasee !

    ReplyDelete
  3. Untuk buat blog archive.:
    Dashboard > design > page element > add a gadget > blog archive

    ReplyDelete
  4. jap ! sy memang ade dah blog archive tapi nak letak scroll box ni kat BLOGLIST..please :(

    ReplyDelete
  5. Thanx bro! Dah lama aku tercari-cari tutorial ni, sekarang dah terjumpa kat sini... :D

    ReplyDelete
  6. Nice blog bro! t.q so much, banyak info dan ilmu bleh dapat kat sini=)http://tinburuk.blogspot.com/

    ReplyDelete
  7. Thanx Bro..banyak input dapat dari blog ni..:)
    jom jenguk post baru pasal:

    fakta menarik tentang senyuman

    ReplyDelete
  8. tak jumpa pon dlm template html sy..sedey

    ReplyDelete
  9. blog archive sy terdelete..mcm mane nak wujudkan semula ??

    ReplyDelete
  10. please ajarkan sy cara utk menomborkan n3 seperti ini .......

    tajuk
    (1)(2)(3)....

    ReplyDelete
  11. Yeah ! Akhirnya berjaya gk , tgk tuto tmpt len taa bole , sini bole plak . :)

    ReplyDelete
  12. mantap Gan....terima kasih tas info na
    sukses selalu

    ReplyDelete
  13. This comment has been removed by the author.

    ReplyDelete
  14. Dah lama nak cari entri buat scroll box
    akhirnya dah jumpa kat sini !
    Thanx bro ;)

    ReplyDelete
  15. THANKS...BERJAYA WAT AKHIR NYER...

    ReplyDelete
  16. tengkuy ya sy udah praktek dan terpasang diblogku

    ReplyDelete
  17. Ini tutorial ke-2 yang berjaya. Yg lain, x berjaya. Kecewa. T.kasih.

    ReplyDelete
  18. thank dear....love u..saya follow sini..kalaw sudi jengukla blog saya yer^^

    ReplyDelete
  19. still x jmpe word ni kat html templete saya....mcm mane nk buat scroll box ni....hurm...

    ReplyDelete
  20. wah..buat sekali terus dapat.. time kasih for the good info. :P

    ReplyDelete
  21. ternyata via blogger sendiri trik ini sudah disediakan! thank sudah share!

    coba ajah add gadget arsip blog "drop down"

    ReplyDelete
  22. Kenapa saya tak dapat jumpa code tersebut ?

    ReplyDelete
  23. thanks..sekali buat je dah jadi.. :)

    ReplyDelete
  24. camner??masih x fham la bang...

    ReplyDelete
  25. yes..berjaya..sangat2 membantu utk org baru mcm saya ni

    ReplyDelete
  26. tak jumpe pon .
    saia nak buat scroll box tok blog archive .
    :(

    ReplyDelete
  27. kalo nak buat utk labels/categories plak camne bro?

    ReplyDelete
  28. jadi wat nie..alhamdulillah..thanks unwanted! ^_^

    ReplyDelete
  29. yeah!!!! jadi!!! thanks for sharing! sy folow sini! :)

    ReplyDelete
  30. tqvm bro...gud entry for all of us....

    ReplyDelete
  31. tq for tutorial...bnyk sgt membantu

    ReplyDelete
  32. Menjadi..!! Banyak2 terima kasih.

    ReplyDelete
  33. yes,, berjya lakukan.. kikik tQ, :D

    ReplyDelete
  34. x jumpa pon mende ni benci tul tolong ajar pleas

    ReplyDelete
  35. blh ta bg tips nk tukar layout blog?? ta retila....

    ReplyDelete
  36. nice tuto...sape yang tak jadi nak buat tu, boleh skodeng sini plak..


    http://www.onceitalk.com/2010/11/tutorial-untuk-memasang-scrollbox-dalam.html

    ReplyDelete
  37. mekommmm

    kalu korng tk jumpe kod tu maksudnyer kad blog korng tu korng tk letk aktiviti list...

    kalu korng da ltk... try blik semula msti jumpe
    hehee
    emma taupon cbb emma pon mcm korng
    terima kasih admin ia terjdi

    ReplyDelete
  38. thanks sangat2..dh cuba byk benda..smua berjya.semua dapat ganjaran setimpal atas kebaikan berkongsi ilmu...

    ReplyDelete
  39. thanks dan menjadi tutorial ni.. :)

    ReplyDelete
  40. nak tye , kenapa kalau saei gune edit html mesti tak bole , sometimes dye keluar Xml tue , n more thn 1 widget ? kenapa erk ?

    ReplyDelete
  41. alhamdulillah .terima kasih bebanyak banyak info yang dah berjaya , syukron

    ReplyDelete
  42. oh maiii !! thankzz to this blog. smua tuto y aku refer kat sini menjadikkk ^_______^

    ReplyDelete
  43. tq so muchhhhhh......love this blog demmnnn helll...keep update useful tips yeaaa..

    ReplyDelete
  44. kalau gune blogskin nak buad blog archive ni camne eak ?

    ReplyDelete
  45. as salam,
    ALHAMDULILLAH da jadik...
    makasih dear for sharing this info...
    ummi like so muchhhh...

    ReplyDelete
  46. menjadi..thankayu thankayu.hehe..
    jom singgah blog saya.hehe..

    http://strawberrysgurls.blogspot.com/

    ReplyDelete
  47. trims mas blognya bagus langsung saya aplikasikan di blog saya
    salam kenaala http://www.mautau.net/

    ReplyDelete
  48. thnaksss :D semua tuto sgt bergune ^^

    ReplyDelete
  49. Thanks bro :D, kat mane ko sekarang ye :d, eh ble jumpe kah3

    ReplyDelete
  50. macam mana nak post tutorial pulak eh? bantuan anda amatlah diperlukan dan akan dihargai :)

    ReplyDelete
  51. tQ so much♥(。◕‿◕。)

    ReplyDelete
  52. Kalau menyembunyikan menu scrollbar nya gimana ya sob? :D

    ReplyDelete
  53. maceh untuk tuto ni , kalau untuk bloglist ??

    ReplyDelete
  54. trims banyak sangat bermanfaat sekali salam kenal http://kaltimpulsa.blogspot.com/

    ReplyDelete
  55. Terima Kasih Mas...Berhasil...saya pake di blog

    ReplyDelete
  56. Hebat gila semua tutorial dia menjadi . A good leader ah . salute bro ! u are such a helper .

    ReplyDelete