Tutorial 60 : Scroll Box untuk Blog Archive

Sunday, July 10, 2011
Assalamualikum..
Maaf sebab baru ini update tutorial ini. Lama juga reader minta tapi baru nak updatekan..
Kadang-kadang blog archive ni panjang sangat sebab macam-macam entry kita update.  So mungkin nampak menyemak je kan. Nak rapi dan tersusun kemas macam blog aku? hahaha perasan betol la..

Okeh, aku akan ajarkan cara macam mana nak buat scroll box macam blog hamster aku ini :


Click gambar untuk besar.
Mesti korang pun nak blog archive korang tersusun kemas dan tidak serabai.. Tapi sebelum itu korang kena add blog archive dulu sebelum buat tutorial ini seperti berikut

Sign in blogger > Design > Page Elements > Add a Gadgets > Blog Archive
Pastikan setting korang macam gambar di bawah eh.. ( kalau dah already add sila tukar setting seperti gambar di bawah )

Kalau tak jelas..sila click click this picture!
Cara-cara nak meletakkan Scroll Box untuk Blog Archive adalah seperti berikut :

1. Sign in Blogspot > Design > Edit Html > Tick Expand Widget Templates
2. Cari code di bawah, Ctrl F sahaja dan paste code di bawah dalam kotak find then enter!

<div id='ArchiveList'>
3. Bukan code di atas yang kita nak ubah. Tapi korang akan jumpa code

<div class='widget-content'>

sebelum/di atas code <div id='ArchiveList'> yang korang cari tadi. Contoh gambar :

4. Replacekan code

<div class='widget-content'>
dengan code ini :

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

5. Kalau nak lagi panjang saiz scroll box korang tu korang cuma tukar 200px dengan saiz yang korang suka.
6. Save dan tengok hasilnya.


p/s : Kalau jadi atau tak jadi silalah komen yerrr!
Labels:
SHARE:

55 comments

  1. UnknownJuly 13, 2011 at 7:39 PM

    jadi!! thankz yer for this tutorial :)

    ReplyDelete
  2. ReanJuly 26, 2011 at 2:34 PM

    jadi!! thanks ea! :)

    ReplyDelete
  3. farisya!!!!July 26, 2011 at 10:55 PM

    kalo nk pnjgkn skit scroll box 2 mcm mne??

    ReplyDelete
  4. UnknownJuly 29, 2011 at 10:06 PM

    sis nk tny.. ad x tutorial nak buat mcm peti ais sis tu? comey lah

    ReplyDelete
  5. NurfarahJuly 29, 2011 at 10:14 PM

    @farisya!!!!

    ubah yang 200px kepada kepanjangan y diingini.. done!

    ReplyDelete
  6. NurfarahJuly 29, 2011 at 10:14 PM

    @pyqa

    sila ke tutorial ini :
    http://bicarafarah.blogspot.com/2011/02/tutorial-45-automatic-recent-post-dan.html

    ReplyDelete
  7. UnknownJuly 29, 2011 at 10:51 PM

    tengs sis.. lub u :) hehe

    ReplyDelete
  8. Adleen FarhanaJuly 31, 2011 at 5:37 PM

    Arigato! Jadi ^^

    ReplyDelete
  9. ZTAugust 2, 2011 at 9:33 PM

    thanks miss farah <3

    ReplyDelete
  10. syue nioAugust 10, 2011 at 4:59 AM

    sis tk bley pown

    ReplyDelete
  11. Syahir RamliAugust 19, 2011 at 9:13 AM

    all of ur tutorials helped me a lot to renovate my blog...tq farah... pasni cari cni jela...hehe

    ReplyDelete
  12. nasha sanzaSeptember 3, 2011 at 11:45 PM

    thank you dear!

    ReplyDelete
  13. ersSeptember 12, 2011 at 12:22 AM

    Thankyouu Cik Farah , tutorial awak sgt best! senang &cepat :DD

    ReplyDelete
  14. c_deq97October 15, 2011 at 9:59 PM

    thanx bnyk2 ea..akak farah (^...^)

    ReplyDelete
  15. cik abbitOctober 17, 2011 at 3:50 PM

    tak berjaya lah sob sob

    ReplyDelete
  16. cik abbitOctober 17, 2011 at 3:53 PM

    tak berjaya pon

    ReplyDelete
  17. Cik ItahOctober 28, 2011 at 12:07 AM

    @farisya!!!!thankz dear..itah punye da jadi..muah! syg awk..hak3!

    ReplyDelete
  18. MiezanEsyaNovember 27, 2011 at 7:34 AM

    wah jadii :) tengs ! tuto yang nie lagi snang ^^

    ReplyDelete
  19. SharizatDecember 12, 2011 at 12:13 PM

    Terima Kasih Kak Farah..
    dah lame saye carik xpi x jumpe..
    nasib baik dpt..
    Thumbs Up for Your Tutorial!

    ReplyDelete
  20. Sabrina GhaniDecember 13, 2011 at 5:22 PM

    Kak Farahh , jadi lahh :) Terima kasih yea, tapi ken. Macam mana ehh, nak buat ada background belakang die tuh?

    Hehehe~

    ReplyDelete
  21. LOLLAPALOZADecember 19, 2011 at 4:46 AM

    jadi !! hehe..comel giler~ thanks ye :D

    ReplyDelete
  22. fazzy fazirahJanuary 19, 2012 at 11:45 AM

    saia suka smua ttrial yg cik farah buat.. saia dh cbe... bahagia rsnya tgok blog sndri nie.. thanks yah ! <3...

    ReplyDelete
  23. Zehan IlyanaJanuary 20, 2012 at 1:02 AM

    aaaa..thank u banget!!!
    dah menjadi!
    sangat senang dan saya sangat faham!!

    ReplyDelete
  24. myrapinky michikoJanuary 26, 2012 at 2:43 PM

    jadi laa kak farah somel - tenkiu ;)

    ReplyDelete
  25. UnknownFebruary 9, 2012 at 1:38 PM

    sys , xbley pon :(

    ReplyDelete
  26. SuzumeMarch 26, 2012 at 1:55 PM

    Assalamualikum.
    Terima kasih byk2 ! Dah jadi <3

    ReplyDelete
  27. Layyinul HarirMay 30, 2012 at 3:04 AM

    assalamualaikum..


    mekaseh awak! banyak saya dapat input dari sini.

    moge Allah sentiasa merahmati awak.=)

    ReplyDelete
  28. ::♥♥AnnA @sM!d@R::♥♥June 4, 2012 at 9:56 AM

    jd...tengs 4 dis tuto...:)

    ReplyDelete
  29. ismi nurashJune 20, 2012 at 3:11 PM

    jadi,thanks :)

    ReplyDelete
  30. Siti Fatimah FuzzJune 26, 2012 at 2:44 AM

    thanks for the tutorial....=)

    ReplyDelete
  31. nsyunabilaJune 29, 2012 at 4:46 PM

    sis knapa sy punya xjmpa erk? dh byk kali sy try tuto niy tpi xder yg mnjdi

    ReplyDelete
  32. nsyunabilaJune 29, 2012 at 4:50 PM

    hye sis , knapa sy punya x jmpa dia punya code erk? dh byk kali sy try tutorial mcm niy xder 1 pun yg blh.. help me pliszz

    ReplyDelete
  33. nsyunabilaJune 29, 2012 at 4:56 PM

    sis knapa sy x jmpa dia punya code ?? dh byk kali sy try tutorial mcm niy tpi 1 pun x mnjd, plisz help me :(

    ReplyDelete
  34. IzanneJuly 11, 2012 at 7:51 PM

    Time kasih byk2 dik Farah..bestnyer belajar ngan adik..mudah & senang..

    ReplyDelete
  35. Cik PinatJuly 12, 2012 at 7:20 PM

    tenkiu kaka farah... dah jdik... :)

    ReplyDelete
  36. Asiam the GreatJuly 21, 2012 at 2:54 PM

    Gracias!^_^

    ReplyDelete
  37. Roqayah Z.November 30, 2012 at 9:43 AM

    Thanks ;)

    ReplyDelete
  38. AnonymousDecember 9, 2012 at 2:25 PM

    jadi...
    btw,tenkz =)

    ReplyDelete
  39. nrtkahDecember 26, 2012 at 11:11 AM

    Jadi lah :) Blog tutotial akak byk tlong saya :)

    ReplyDelete
  40. NuhhaaaJanuary 2, 2013 at 11:53 AM

    Thank you, almost all your tutorial works! Link me back :) http://princessnuha.blogspot.com

    ReplyDelete
  41. Broken_jarJanuary 16, 2013 at 9:36 PM

    jadi,thanks a lot! :)

    ReplyDelete
  42. wanazfarinaJanuary 17, 2013 at 5:06 PM

    thanks so much.. blog cik nurfarah mudah tuk faham n applied it! :)

    ReplyDelete
  43. missAyna.FJanuary 28, 2013 at 7:26 PM

    thanks . tutorial baguss sangat :) semua menjadii .

    ReplyDelete
  44. UnknownMarch 14, 2013 at 9:46 PM

    dah jadi.....

    ReplyDelete
  45. UnknownMay 27, 2013 at 3:04 PM

    sis sy x jmpe pon expand widget template tuh.. hurmm :(

    ReplyDelete
  46. UnknownOctober 12, 2013 at 8:26 PM

    Saya punya tak jadi lah! Saya tak jumpa pun Expand Widget Templates..Kenapa ye?

    ReplyDelete
  47. AnonymousNovember 8, 2013 at 8:38 PM

    @eQuRlzmacm mana nak crik kod tu

    ReplyDelete
  48. AnonymousNovember 8, 2013 at 8:39 PM

    cmne nak crik kod tu..x paham laa

    ReplyDelete
  49. UnknownJanuary 14, 2014 at 4:06 PM

    thanks kak.. dah menjadi

    ReplyDelete
  50. Vista Alnia PratiwiJuly 5, 2014 at 7:56 AM

    assalamualaikum.,
    cik farah teriamkasih banyak atas tutor blog nya...
    saya dari indonesia, salam kenal ya cik...
    sangat bermanfaat sekali tutorial blog nya....
    sudah banyak tutorial cik farah yang saya coba gunakan, ternyata berhasil semua,,,,,
    terimakasih....
    lain waktu boleh dong berkunjung di blog saya ya cik....
    vap-arisatanizaki.blogspot.com

    ReplyDelete
  51. UnknownMarch 24, 2015 at 1:26 AM

    salam... saya tak jumpa la code tu sis....

    ReplyDelete
  52. RiN nOkuMarch 27, 2015 at 11:27 AM

    yeay!!! jadilah....suka nya!!! time kasih cik Nurfarah cumel....

    ReplyDelete
  53. Official YuyunPykahJuly 15, 2016 at 5:30 PM

    Saya pun tak jumpa :(

    ReplyDelete
  54. Malas LetakJanuary 7, 2017 at 8:21 AM

    Tak jumpa pun

    ReplyDelete
  55. puankuciJanuary 22, 2017 at 9:17 PM

    Jadi!! thanks babe.

    ReplyDelete

-Assalamualaikum, sila tinggalkan komen anda.
-Kalau suka tekan LIKE.
-Insyaallah komen anda akan dilayan :)

Jangan lupa LIKE! dan SHARE!

Terima kasih :)

Home
Subscribe to: Post Comments (Atom)

Related Posts
© Blog Cik Nurfarah
Blogger Copyright © 2019. All Rights Reserved by BLOG CIK NURFARAH