Tutorial Buat Scroll Box Untuk Blog Archive

Posted on 7:46:00 PM by  with 105 comments
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. -June 19, 2011 at 3:19 PM

    terbaikkk ! berjayaaaaa :D

    ReplyDelete
  2. -June 19, 2011 at 3:21 PM

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

    ReplyDelete
  3. unJune 19, 2011 at 3:26 PM

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

    ReplyDelete
  4. -June 19, 2011 at 3:31 PM

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

    ReplyDelete
  5. HanisahJune 19, 2011 at 3:38 PM

    terime kasih!!

    ReplyDelete
  6. fiezmarnJune 19, 2011 at 5:04 PM

    berjaya....berjaya

    ReplyDelete
  7. AnonymousJune 19, 2011 at 7:21 PM

    tQ so much ^_^

    ReplyDelete
  8. UnknownJune 19, 2011 at 8:54 PM

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

    ReplyDelete
  9. Tin BurukJune 19, 2011 at 11:47 PM

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

    ReplyDelete
  10. WuMingJune 20, 2011 at 10:54 AM

    TQVM...

    ReplyDelete
  11. sHyJune 20, 2011 at 7:30 PM

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

    fakta menarik tentang senyuman

    ReplyDelete
  12. Miss Red AppleJune 22, 2011 at 2:28 AM

    tak jumpa pon dlm template html sy..sedey

    ReplyDelete
  13. AnonymousJune 24, 2011 at 7:36 PM

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

    ReplyDelete
  14. AnonymousJune 25, 2011 at 11:38 AM

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

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

    ReplyDelete
  15. Diya NadiyaJune 26, 2011 at 1:00 AM

    yes bwrjya..thanks yeah :)

    ReplyDelete
  16. Miera EzzatiJune 26, 2011 at 10:18 AM

    thx 4 sharing :)

    ReplyDelete
  17. LeyaJune 26, 2011 at 11:14 PM

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

    ReplyDelete
  18. Metropolis PosJune 27, 2011 at 11:05 AM

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

    ReplyDelete
  19. Faiz OktarivandiJuly 2, 2011 at 1:44 PM

    This comment has been removed by the author.

    ReplyDelete
  20. Cik InaJuly 4, 2011 at 12:01 PM

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

    ReplyDelete
  21. AidaJuly 6, 2011 at 1:08 PM

    THANKS...BERJAYA WAT AKHIR NYER...

    ReplyDelete
  22. Rosyida RachmawatiJuly 9, 2011 at 8:57 AM

    saya tidak menjumpai

    ReplyDelete
  23. bisnis mahasiswaJuly 9, 2011 at 11:38 PM

    tengkuy ya sy udah praktek dan terpasang diblogku

    ReplyDelete
  24. UnknownJuly 13, 2011 at 6:30 PM

    yeay!berjaya..hehe..tq2x

    ReplyDelete
  25. DianaJuly 14, 2011 at 5:54 PM

    terbaik la.....

    ReplyDelete
  26. Adzrien ShoppeJuly 20, 2011 at 10:08 PM

    tak dpt le..

    ReplyDelete
  27. fatinJuly 24, 2011 at 5:31 PM

    thanks for this totu !

    ReplyDelete
  28. Cikgu AniJuly 25, 2011 at 3:58 PM

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

    ReplyDelete
  29. DaYaH JeLitAJuly 25, 2011 at 6:35 PM

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

    ReplyDelete
  30. Izwa KamaruddinJuly 27, 2011 at 10:12 AM

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

    ReplyDelete
  31. NorhayatiHjBasriJuly 28, 2011 at 12:31 PM

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

    ReplyDelete
  32. tigefa dot infoAugust 1, 2011 at 8:20 AM

    ternyata via blogger sendiri trik ini sudah disediakan! thank sudah share!

    coba ajah add gadget arsip blog "drop down"

    ReplyDelete
  33. Jihah ZekAugust 4, 2011 at 7:02 PM

    Kenapa saya tak dapat jumpa code tersebut ?

    ReplyDelete
  34. UnknownAugust 8, 2011 at 1:59 PM

    thanks! dah jadi. :)

    ReplyDelete
  35. Hanis IsaAugust 8, 2011 at 3:59 PM

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

    ReplyDelete
  36. riema afifaAugust 14, 2011 at 8:14 PM

    menjady , ade care laen ?

    ReplyDelete
  37. riema afifaAugust 14, 2011 at 8:15 PM

    i mean , x jadi

    ReplyDelete
  38. ajiemAugust 18, 2011 at 12:07 AM

    camner??masih x fham la bang...

    ReplyDelete
  39. abah khalishaAugust 18, 2011 at 9:31 AM

    Thanks..abah dah wat..

    ReplyDelete
  40. BikinBajuShopAugust 28, 2011 at 3:43 PM

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

    ReplyDelete
  41. Yuyui Syazz TwillerbeeAugust 30, 2011 at 9:23 PM

    x reti nak wt cmna..tlg..

    ReplyDelete
  42. Yuyui Syazz TwillerbeeAugust 30, 2011 at 9:39 PM

    ingtkan post yg ada scroll ..:(

    ReplyDelete
  43. ShortThenMeSeptember 2, 2011 at 2:49 PM

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

    ReplyDelete
  44. AnonymousSeptember 4, 2011 at 2:20 AM

    kalo nak buat utk labels/categories plak camne bro?

    ReplyDelete
  45. Mohammad RedhaSeptember 8, 2011 at 2:55 PM

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

    ReplyDelete
  46. Dayang DenoSeptember 15, 2011 at 6:40 PM

    yeah!!!! jadi!!! thanks for sharing! sy folow sini! :)

    ReplyDelete
  47. Faz YaakubSeptember 21, 2011 at 1:27 AM

    Tq!berjaya :)

    ReplyDelete
  48. YayaNadyaSeptember 24, 2011 at 2:53 AM

    tq...

    ReplyDelete
  49. AnonymousOctober 16, 2011 at 7:21 PM

    tq admin =)

    ReplyDelete
  50. ♛ Kerani Sekolah ♛October 18, 2011 at 4:32 PM

    time kasih :)

    ReplyDelete
  51. MEGI TOMYAMOctober 19, 2011 at 9:43 PM

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

    ReplyDelete
  52. Cahaya IslamOctober 20, 2011 at 8:36 AM

    trima kasih...

    ReplyDelete
  53. Cik Master GOctober 27, 2011 at 1:19 PM

    tq for tutorial...bnyk sgt membantu

    ReplyDelete
  54. UnknownOctober 27, 2011 at 5:50 PM

    Menjadi..!! Banyak2 terima kasih.

    ReplyDelete
  55. NurulfalaNovember 8, 2011 at 3:07 PM

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

    ReplyDelete
  56. Nazrul AzwadNovember 13, 2011 at 6:41 PM

    x jumpa pon mende ni benci tul tolong ajar pleas

    ReplyDelete
  57. Nazrul AzwadNovember 13, 2011 at 6:41 PM

    html dia tu x jumpa pon

    ReplyDelete
  58. B L V C K R O S S E ENovember 19, 2011 at 9:33 PM

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

    ReplyDelete
  59. UnknownNovember 23, 2011 at 12:23 PM

    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
  60. SalmiDecember 6, 2011 at 5:39 PM

    berjaya!!

    ReplyDelete
  61. emmaDecember 12, 2011 at 8:30 PM

    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
  62. wan hafazahDecember 23, 2011 at 12:35 AM

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

    ReplyDelete
  63. H.K.LDecember 29, 2011 at 10:57 AM

    thanks dan menjadi tutorial ni.. :)

    ReplyDelete
  64. It's Sunshine DayDecember 30, 2011 at 10:47 AM

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

    ReplyDelete
  65. najmiJanuary 5, 2012 at 1:13 AM

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

    ReplyDelete
  66. cikgu azmiJanuary 17, 2012 at 1:17 PM

    tQ bro...

    ReplyDelete
  67. Meeniey SykesJanuary 20, 2012 at 9:20 PM

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

    ReplyDelete
  68. Encik Joew KebuntuanFebruary 6, 2012 at 10:49 PM

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

    ReplyDelete
  69. AnonymousFebruary 7, 2012 at 1:45 AM

    terima kasih

    ReplyDelete
  70. Eily AmyFebruary 9, 2012 at 4:27 PM

    kalau gune blogskin nak buad blog archive ni camne eak ?

    ReplyDelete
  71. ♥CeR!TeR@ CiNtA f@!sha♥February 23, 2012 at 11:06 AM

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

    ReplyDelete
  72. UnknownMarch 15, 2012 at 11:45 PM

    x jd pun

    ReplyDelete
  73. kucing comelMarch 28, 2012 at 7:17 PM

    thanks for this info!

    ReplyDelete
  74. MasturaApril 20, 2012 at 11:04 PM

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

    http://strawberrysgurls.blogspot.com/

    ReplyDelete
  75. UnknownMay 4, 2012 at 1:45 PM

    thanks

    ReplyDelete
  76. AnonymousMay 4, 2012 at 3:24 PM

    nuhun

    ReplyDelete
  77. ^_^May 25, 2012 at 6:53 PM

    thanks...^_^

    ReplyDelete
  78. Azzi Nurain AzimatJune 14, 2012 at 8:47 PM

    ntah ! x jadi pon ! hmm

    ReplyDelete
  79. akmall hanisJune 21, 2012 at 1:39 PM

    berjaya!!!

    terima kasih!!!

    ReplyDelete
  80. haristelleJuly 6, 2012 at 10:59 PM

    good tutorial,.,

    thks...

    ReplyDelete
  81. Giveaway MonkeyJuly 24, 2012 at 2:16 PM

    thanks!

    ReplyDelete
  82. http://www.mautau.net/September 11, 2012 at 12:30 PM

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

    ReplyDelete
  83. erinyantoSeptember 21, 2012 at 3:57 PM

    langsung Di praktekkan Gan!!!!

    ReplyDelete
  84. MaisarahOctober 28, 2012 at 11:31 PM

    thnaksss :D semua tuto sgt bergune ^^

    ReplyDelete
  85. mimi . diyana .November 15, 2012 at 12:39 AM

    Thanks , its work :D

    ReplyDelete
  86. AnonymousNovember 28, 2012 at 6:31 PM

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

    ReplyDelete
  87. Zul MuhammadDecember 23, 2012 at 6:13 AM

    tq bebanyak..

    ReplyDelete
  88. Nama pena, Puteri Nur Cahaya @ Cikgu iEta. Suri rumah sepenuh masa. Penulis Lifestyle Blogger berpengalaman Social Media Marketing Coach.January 18, 2013 at 1:25 PM

    tqvm...dah menjadi :)

    ReplyDelete
  89. UnknownJanuary 20, 2013 at 10:41 PM

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

    ReplyDelete
  90. HakimFebruary 7, 2013 at 4:15 PM

    terima kasih

    ReplyDelete
  91. LuqmanFebruary 7, 2013 at 4:16 PM

    tqvm

    ReplyDelete
  92. luqman hakimFebruary 7, 2013 at 4:17 PM

    terbaik la bro

    ReplyDelete
  93. Hakim MahmudFebruary 7, 2013 at 4:18 PM

    tutorial yang terbaik

    ReplyDelete
  94. AnonymousFebruary 26, 2013 at 1:28 AM

    tQ so much♥(｡◕‿◕｡)

    ReplyDelete
  95. Daniel Benny SimanjuntakMarch 1, 2013 at 8:07 AM

    Kalau menyembunyikan menu scrollbar nya gimana ya sob? :D

    ReplyDelete
  96. AnonymousJune 17, 2013 at 7:16 PM

    maceh untuk tuto ni , kalau untuk bloglist ??

    ReplyDelete
  97. .::: Princess MOMOY :::.July 4, 2013 at 10:10 AM

    terima kasih bro =)

    ReplyDelete
  98. kaltim pulsaSeptember 22, 2013 at 3:46 PM

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

    ReplyDelete
  99. K-I-TSeptember 28, 2013 at 7:55 AM

    makasih gan bermanfaat sangat

    ReplyDelete
  100. bontangSeptember 30, 2013 at 8:59 AM

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

    ReplyDelete
  101. ZuraNovember 11, 2013 at 10:57 PM

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

    ReplyDelete
  102. Umaira IshakDecember 8, 2013 at 9:43 PM

    Thanks :') menjadi !!~

    ReplyDelete
  103. Pandito - Panduan Informasi DuniaDecember 30, 2013 at 1:19 PM

    Thanks Bro Nice Info :Thumbs UP:

    ReplyDelete
  104. Teratak penaApril 19, 2014 at 6:05 PM

    menjadi...terima kasih

    ReplyDelete
  105. The Putra DiverseJanuary 3, 2016 at 1:17 AM

    thanks ye. sgt mmbntu

    ReplyDelete

Subscribe to: Post Comments (Atom)