Sunday, June 19, 2011

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


Suka tutorial ini.?

105 comments:

shalina samsudin on June 19, 2011 at 3:19 PM said...

terbaikkk ! berjayaaaaa :D

shalina samsudin on June 19, 2011 at 3:21 PM said...

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

unwanted on June 19, 2011 at 3:26 PM said...

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

shalina samsudin on June 19, 2011 at 3:31 PM said...

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

HaniSAH on June 19, 2011 at 3:38 PM said...

terime kasih!!

fiezmarn on June 19, 2011 at 5:04 PM said...

berjaya....berjaya

Halawatul_Insyirah on June 19, 2011 at 7:21 PM said...

tQ so much ^_^

E-One Network on June 19, 2011 at 8:54 PM said...

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

Tin Buruk on June 19, 2011 at 11:47 PM said...

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

WuMing on June 20, 2011 at 10:54 AM said...

TQVM...

~sHy~ on June 20, 2011 at 7:30 PM said...

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

fakta menarik tentang senyuman

Red Apple on June 22, 2011 at 2:28 AM said...

tak jumpa pon dlm template html sy..sedey

Abszeen Picco on June 23, 2011 at 7:35 PM said...

very nice entry..hehe

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

Xesha Xessi on June 24, 2011 at 7:36 PM said...

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

Anonymous said...

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

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

diya on June 26, 2011 at 1:00 AM said...

yes bwrjya..thanks yeah :)

Miera on June 26, 2011 at 10:18 AM said...

thx 4 sharing :)

Sunshine on June 26, 2011 at 11:14 PM said...

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

Metropolis Pos on June 27, 2011 at 11:05 AM said...

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

Muhammad Khairul Fahmi on June 30, 2011 at 8:50 AM said...

thanks...

faizoktarivandi on July 2, 2011 at 1:44 PM said...

ijin repost gan

Cik Ina on July 4, 2011 at 12:01 PM said...

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

cik aida on July 6, 2011 at 1:08 PM said...

THANKS...BERJAYA WAT AKHIR NYER...

Rosyida Rachmawati on July 9, 2011 at 8:57 AM said...

saya tidak menjumpai

bisnis mahasiswa on July 9, 2011 at 11:38 PM said...

tengkuy ya sy udah praktek dan terpasang diblogku

nanakimie on July 13, 2011 at 6:30 PM said...

yeay!berjaya..hehe..tq2x

Que Hanan on July 14, 2011 at 5:54 PM said...

terbaik la.....

Adzrien Shoppe on July 20, 2011 at 10:08 PM said...

tak dpt le..

fatin on July 24, 2011 at 5:31 PM said...

thanks for this totu !

Cikgu Ani on July 25, 2011 at 3:58 PM said...

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

DaYaH JeLitA on July 25, 2011 at 6:35 PM said...

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

< Mrs.Eady > on July 27, 2011 at 10:12 AM said...

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

cheQnOnO on July 28, 2011 at 12:31 PM said...

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

tigefa dot info on August 1, 2011 at 8:20 AM said...

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

coba ajah add gadget arsip blog "drop down"

nurnajihah zakaria on August 4, 2011 at 7:02 PM said...

Kenapa saya tak dapat jumpa code tersebut ?

salwaismail on August 8, 2011 at 1:59 PM said...

thanks! dah jadi. :)

Hanis on August 8, 2011 at 3:59 PM said...

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

riema afifa on August 14, 2011 at 8:14 PM said...

menjady , ade care laen ?

riema afifa on August 14, 2011 at 8:15 PM said...

i mean , x jadi

ajiem on August 18, 2011 at 12:07 AM said...

camner??masih x fham la bang...

abah khalisha on August 18, 2011 at 9:31 AM said...

Thanks..abah dah wat..

BikinBajuShop on August 28, 2011 at 3:43 PM said...

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

Yuyui Syazz Twillerbee on August 30, 2011 at 9:23 PM said...

x reti nak wt cmna..tlg..

Yuyui Syazz Twillerbee on August 30, 2011 at 9:39 PM said...

ingtkan post yg ada scroll ..:(

ShortThenMe on September 2, 2011 at 2:49 PM said...

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

Anonymous said...

kalo nak buat utk labels/categories plak camne bro?

Redha1989 on September 8, 2011 at 2:55 PM said...

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

deno on September 15, 2011 at 6:40 PM said...

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

Faz_cs on September 21, 2011 at 1:27 AM said...

Tq!berjaya :)

YayaNadya_Najwa on September 24, 2011 at 2:53 AM said...

tq...

bella_omey on October 16, 2011 at 7:21 PM said...

tq admin =)

❤NazirahMoktar❤ on October 18, 2011 at 4:32 PM said...

time kasih :)

MEGI TOMYAM on October 19, 2011 at 9:43 PM said...

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

Nurul Jannah on October 20, 2011 at 8:36 AM said...

trima kasih...

shieyda shahida idris on October 27, 2011 at 1:19 PM said...

tq for tutorial...bnyk sgt membantu

Rina Supian on October 27, 2011 at 5:50 PM said...

Menjadi..!! Banyak2 terima kasih.

Nurulfala on November 8, 2011 at 3:07 PM said...

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

Nazrul Azwad on November 13, 2011 at 6:41 PM said...

x jumpa pon mende ni benci tul tolong ajar pleas

Nazrul Azwad on November 13, 2011 at 6:41 PM said...

html dia tu x jumpa pon

Emy Sharmimi Nadia on November 19, 2011 at 9:33 PM said...

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

zalin onceitalk on November 23, 2011 at 12:23 PM said...

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

Norsalmi on December 6, 2011 at 5:39 PM said...

berjaya!!

emma on December 12, 2011 at 8:30 PM said...

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

wan hafazah on December 23, 2011 at 12:35 AM said...

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

[ wanni ] on December 29, 2011 at 10:57 AM said...

thanks dan menjadi tutorial ni.. :)

It's Sunshine Day on December 30, 2011 at 10:47 AM said...

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

najmi merbok on January 5, 2012 at 1:13 AM said...

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

gold bird on January 17, 2012 at 1:17 PM said...

tQ bro...

Mish Meeniey on January 20, 2012 at 9:20 PM said...

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

Encik Joew Kebuntuan on February 6, 2012 at 10:49 PM said...

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

Anonymous said...

terima kasih

Illie Amy on February 9, 2012 at 4:27 PM said...

kalau gune blogskin nak buad blog archive ni camne eak ?

♥♥♥nurr f@!sha f@t!h@h♥♥♥ on February 23, 2012 at 11:06 AM said...

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

qistina on March 15, 2012 at 11:45 PM said...

x jd pun

BLOG-EPIC-SCENE on March 28, 2012 at 7:17 PM said...

thanks for this info!

mastura aziz on April 20, 2012 at 11:04 PM said...

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

http://strawberrysgurls.blogspot.com/

Guess who . . . on May 4, 2012 at 1:45 PM said...

thanks

Anonymous said...

nuhun

^_^ on May 25, 2012 at 6:53 PM said...

thanks...^_^

Azzi Nurain Azimat on June 14, 2012 at 8:47 PM said...

ntah ! x jadi pon ! hmm

akmall hanis on June 21, 2012 at 1:39 PM said...

berjaya!!!

terima kasih!!!

haristelle on July 6, 2012 at 10:59 PM said...

good tutorial,.,

thks...

Giveaway Monkey on July 24, 2012 at 2:16 PM said...

thanks!

http://www.mautau.net/ on September 11, 2012 at 12:30 PM said...

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

erinyanto on September 21, 2012 at 3:57 PM said...

langsung Di praktekkan Gan!!!!

Maisarah on October 28, 2012 at 11:31 PM said...

thnaksss :D semua tuto sgt bergune ^^

mimi . diyana . on November 15, 2012 at 12:39 AM said...

Thanks , its work :D

Macx Z on November 28, 2012 at 6:31 PM said...

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

zul on December 23, 2012 at 6:13 AM said...

tq bebanyak..

Ieta Mat Sa'ad on January 18, 2013 at 1:25 PM said...

tqvm...dah menjadi :)

Fara Ain on January 20, 2013 at 10:41 PM said...

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

Hakim on February 7, 2013 at 4:15 PM said...

terima kasih

Luqman on February 7, 2013 at 4:16 PM said...

tqvm

luqman hakim on February 7, 2013 at 4:17 PM said...

terbaik la bro

Hakim Mahmud on February 7, 2013 at 4:18 PM said...

tutorial yang terbaik

•❤•Insan KerdiL•❤• on February 26, 2013 at 1:28 AM said...

tQ so much♥(。◕‿◕。)

Daniel Benny Simanjuntak on March 1, 2013 at 8:07 AM said...

Kalau menyembunyikan menu scrollbar nya gimana ya sob? :D

Norcahaya Ali on June 17, 2013 at 7:16 PM said...

maceh untuk tuto ni , kalau untuk bloglist ??

.::: Princess MOMOY :::. on July 4, 2013 at 10:10 AM said...

terima kasih bro =)

kaltim pulsa on September 22, 2013 at 3:46 PM said...

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

K-I-T on September 28, 2013 at 7:55 AM said...

makasih gan bermanfaat sangat

bontang on September 30, 2013 at 8:59 AM said...

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

Zura on November 11, 2013 at 10:57 PM said...

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

Umaira Ishak on December 8, 2013 at 9:43 PM said...

Thanks :') menjadi !!~

Pandito - Panduan Informasi Dunia on December 30, 2013 at 1:19 PM said...

Thanks Bro Nice Info :Thumbs UP:

Post a Comment

 

Copyright 2008 All Rights Reserved Revolution Two Church theme by Brian Gardner Converted into Blogger Template by Bloganol dot com Edited by Unwanted