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

106 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. very nice entry..hehe

    *visit me back(optional):
    http://abszeen.blogspot.com

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

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

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

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

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

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

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

    ReplyDelete
  16. THANKS...BERJAYA WAT AKHIR NYER...

    ReplyDelete
  17. tengkuy ya sy udah praktek dan terpasang diblogku

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

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

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

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

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

    coba ajah add gadget arsip blog "drop down"

    ReplyDelete
  23. Kenapa saya tak dapat jumpa code tersebut ?

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

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

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

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

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

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

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

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

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

    ReplyDelete
  33. Menjadi..!! Banyak2 terima kasih.

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

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

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

    ReplyDelete
  37. 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
  38. 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
  39. thanks sangat2..dh cuba byk benda..smua berjya.semua dapat ganjaran setimpal atas kebaikan berkongsi ilmu...

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

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

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

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

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

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

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

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

    http://strawberrysgurls.blogspot.com/

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

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

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

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

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

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

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

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

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

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

    ReplyDelete