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!
Share this PostPin ThisEmail ThisShare on Google PlusShare on Tumblr
55 Comments for "Tutorial 60 : Scroll Box untuk Blog Archive"

jadi!! thankz yer for this tutorial :)

kalo nk pnjgkn skit scroll box 2 mcm mne??

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

@farisya!!!!

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

@pyqa

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

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

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

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

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

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

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

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

Hehehe~

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

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

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

jadi laa kak farah somel - tenkiu ;)

Assalamualikum.
Terima kasih byk2 ! Dah jadi <3

assalamualaikum..


mekaseh awak! banyak saya dapat input dari sini.

moge Allah sentiasa merahmati awak.=)

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

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

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

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

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

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

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

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

thanks . tutorial baguss sangat :) semua menjadii .

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

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

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

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

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

-Assalamualaikum, sila tinggalkan komen anda.
-Kalau suka tekan LIKE.
-Insyaallah komen anda akan dilayan :)
Pesanan:
Anda tidak dibenarkan sama sekali mengambil/menyalin/menyimpan/print screen mana-mana kandungan blog ini kecuali atas keizinan tuan punya blog. Tuan punya blog tidak teragak-agak untuk mengambil tindakan undang-undang jika hak persendirian ini dilanggar.

Pendapat penulis tidak semestinya kekal.
Cik Nurfarah

Related Posts Plugin for WordPress, Blogger...
Back To Top