Tutorial 60 : Scroll Box untuk Blog Archive

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!

55 comments

  1. jadi!! thankz yer for this tutorial :)

    ReplyDelete
  2. kalo nk pnjgkn skit scroll box 2 mcm mne??

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

    ReplyDelete
  4. @farisya!!!!

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

    ReplyDelete
  5. @pyqa

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

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

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

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

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

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

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

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

    Hehehe~

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

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

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

    ReplyDelete
  16. Assalamualikum.
    Terima kasih byk2 ! Dah jadi <3

    ReplyDelete
  17. assalamualaikum..


    mekaseh awak! banyak saya dapat input dari sini.

    moge Allah sentiasa merahmati awak.=)

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

    ReplyDelete
  19. 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
  20. 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
  21. Time kasih byk2 dik Farah..bestnyer belajar ngan adik..mudah & senang..

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

    ReplyDelete
  23. jadi...
    btw,tenkz =)

    ReplyDelete
  24. Jadi lah :) Blog tutotial akak byk tlong saya :)

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

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

    ReplyDelete
  27. thanks . tutorial baguss sangat :) semua menjadii .

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

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

    ReplyDelete
  30. @eQuRlzmacm mana nak crik kod tu

    ReplyDelete
  31. cmne nak crik kod tu..x paham laa

    ReplyDelete
  32. 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
  33. salam... saya tak jumpa la code tu sis....

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

    ReplyDelete

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

Jangan lupa LIKE! dan SHARE!

Terima kasih :)

Related Posts

Blogger Copyright © 2019. All Rights Reserved by BLOG CIK NURFARAH