Tuesday, August 11, 2009

.tutorial #2 - 3 column

.

.helo students~

.kali ni teacher nak ajar kamu semua cara buat 3 column macam blog teacher ni .ni di request oleh dya aien .so kalau tak faham, sila tinggal comment di bawah ek ;)

1) first of all, korang kena buat back up dulu templete korang .kang nanti kalau silap, ada back up tu huhu *rujuk gambar di bawah* so korang boleh klik Download Full Template untuk back up template korang tu.


2) lepas tu klik Choose New Template dan pilih Minima Dark.


3) korang pergi ke
Edit HTML dekat Layout tab tu. korang tak payah gedik-gedik nak klik Expand Widget Templates. TAK PERLU oke!


4) then cari code kat macam kat bawah ni. untuk memudahkan kerja, korang klik Ctrl+F untuk search code dia.

#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

5) then copy paste code bawah ni dekat
BAWAH code yang korang cari tadi.

#left-sidebar-wrapper {
width: 220px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}


6) then cari code ni pula. klik Ctrl+F macam biasa.

<div id='main-wrapper'>

7) bila dah jumpa, korang copy code kat bawah ni di
ATAS code yang step 6 tu.

<div id='left-sidebar-wrapper'> <b:section class='sidebar' id='left-sidebar' preferred='yes'/> </div>



8)
bila dah siap step 7 tu, cari code kat bawah ni dan tukarkan macam yang tunjuk kat dekat tulisan kuning tu

#main-wrapper {
width: 410px;
<-- tukarkan kepada 440px;
margin-left: 20px;

float: left;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE *
/
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

dan tukarkan code di bawah ni juga~~


/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px; <-- tukarkan kepada 920px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}


9)
then klik Save Template dan suppose dekat Layout korang akan jadi 3 column macam gambar kat bawah ni.


10) korang boleh la drag kan gadget korang ke sidebar kiri. bagi balance sikit.


11) klik Save Template. then korang carik code kat bawah ni, lepas tu tambah sikit tulisan kuning tu.

#main-wrapper {
width: 440px;

margin-left: 20px;
<-- tambahkan code
float: left; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

12) then Save Template. done! .cuba view, jadi ke tak ^^

135 comments

vidadarisakura said...

fuyooo..terer la ticer ni.haha

ZARA 札拉 said...

wah!

bagsunya sis!

kudos!

n0n0n said...

pandainyeee cekgu ni...anyway thanx....malas nk search google kalo nk buat,cari sini je len kali....

☺[ai][sUmi]☺Chan said...

sumi try buat tp dia kuar camni

We were unable to save your template

nape yep??

cik intanurulfateha said...

~sis vivi

.kak
.kamu perli kan? ;p

cik intanurulfateha said...

~zara

.kudos tu ape syg? ;p

cik intanurulfateha said...

~n0n0n

.hee klu x tau, tnye la ek
.leh tlong mne yg bole ;p

cik intanurulfateha said...

~aisumi

.ade code yg silap tuh
.bese die akan highlight kan code mane

chacha fasya said...

teacher intan..~

thanks..da jdi da 3 column..
mule2 mmg dia tulis unable to save,tp bile wat balik yg step 7,kena tambah yg 'preferred....',br jadik..

nway,xprlu nk scroll smp bwh..senang ckit..
maceh sis!!

LuVidA^^ said...

abg ady mmg best...
eh silap2...intan mmg best :D
hehekk...

cik intanurulfateha said...

~fasya

.nti akak cek balik code die ek
.mcm ade silap
.huhu

cik intanurulfateha said...

~Luvida

.heee sibuk! ;p

milimilo said...

wah,sis da wat tutor skang..bagos2..heeee..rase mcm sempit la kalo 3 kolum..

cik intanurulfateha said...

~mili

.hee mmg nmpak semak sikit
.huhuhu
.ade org request, so buat je la ;p

♣dya aien♣ said...

yunk..thanx for this tutorial okeh..
i da bwt blog bru da..
huh..tensen sgt..
nnt i link u okeh..
;p

cik intanurulfateha said...

~dya aien

.hee siannye die
.xpe sabar k :)
.nti leh buat blog bru yg lebey cantek
.if x phm apape, tnye je
.klu i tau, i aja :)

cik eykameow :) said...

dearr..nk nanges i.i try copy bulat2 pe yg u ajar ouhh. tp kuar ni plak tym i save.

Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly.
XML error message: The element type "b:section" must be terminated by the matching end-tag "".
hish. kt mne ntah x letak (" ") tu..

cik intanurulfateha said...

.ermm ye ke?
.try buat smule
.ade yg bole buat
.klu x dpt buat gk, nti i buatkan k :)

LuVidA^^ said...

rajen. :D

cik intanurulfateha said...

~luvida

.bru tau ke? ;p

[-suziey-] said...

tp akk pnye template ni dr final sense..bole ubah jgk ke ek..emm tp akk mmg xminat 3 column..sbb nnti kan ruang n3 jadi kecik.n3 akk dh la berjela..so jadi pnjng plak..ekekk:D tp kot2 nnti teringin bole guna ni..thanks cikgu..

cik intanurulfateha said...

~suziey

.hee template akak x leh kot
.alaa xpe
.nti bebile klu terase nk gune, gune je
.huu welkem kak! :)

cik eykameow :) said...

tecer.. dye ckp i nyer html takde bnde alah nie . -->"" mse kat b:section..hampehh. dah lebey 3 kali . uwaaa! sedeyy :( isk.. tlg la i buat. i trust u....

cik intanurulfateha said...

~eyka

.meh add sis kt ym
bubble_buzz@yahoo.com
.nti sis tolong kamu :)

MiMiEZaN ZaHRa said...

cikgu intan..akak baru jer terjah blog awak..n ader tutorial pasal 3 column..dah 4, 5 kali akak wat cikgu oooii..tp x jadik2 gak..nak nangis ni..

cik intanurulfateha said...

~mimiezan

.err x dpt ke kak?
.adeh cmne nk ajar ek
.ade ym x?

MiMiEZaN ZaHRa said...

x boleh gak..dier kuar mende alah ni :

Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly.
XML error message: The element type "b:section" must be terminated by the matching end-tag "".

camner tu..??step dah ikut betol2 dah..ym akak..purplehyppo81@yahoo.com

cik intanurulfateha said...

~mimiezan

.dah add dah
.code tu kite da edit sket
.try akak buat
.klu x leh, bgtau k

hanaahmad said...

kak...cmne nk drag ek? xleh la nk drag yg post tu ke tgh2...

cik intanurulfateha said...

~hanaahmad

.nk drag senang je
.klik kt gadjet tu, tp jgn lepas
.then tarik ke ruang tengah

gURLLavENder said...

tutorial cik intan sgt jelas..sekali wat dah jadi..agak bijak saya ni..hehehe..skali ajar..dh pndi..tpuji plak..pepun tq..

cik intan (◡‿◡✿) said...

~gurllavender

.tenks wani ^^
.ade gak org buat tuto ni x dpt n x pham
.thank God wani faham
.heee~ :)

yuhaimee said...

Cik Intan..
nk wat 3 column nie hanya leh pkai theme minima dark kew?
theme laen2 xleh pkai?
nnti hit me at my page k..

intanurulfateha (◡‿◡✿) said...

~yuhaimee

.x kisah apape black or white
.jnji minima

apit555 said...

Hi!!! Kak Intan, Si Mirol yang syorkan saya tengok url nie.. naper dier punyer elok jer theme.. syer dah cuba kakak yer cara.. jadi hitam lak!!
Kak !! tolong gtaw camne cara dier.. klu nak gne theme lain...
kat rafieq@rocketmail.com

intanurulfateha (◡‿◡✿) said...

~apit

.bile da setel buat 3column tu, cri bckgrnd kt sini

hotbliggityblog.com
thecutestblogontheblock.com

zaza said...

cik intan...erk kak intan..erk..ape2 jela...

i buat xjd la syg...huhu
post blog i ade kt tepi skali...
kenapa tu???huhu

cube u tgk jap blog i tu...
semakin cacat sudah...

intanurulfateha (◡‿◡✿) said...

~zaza

.add me @ym
.bubble_buzz@yahoo.com
.i'll help u 2 fix d prob

PRINCESS CASTELLO said...

can u help me utk 3 column...
sgt sudah ilang sume..
uhukssssssssss
waaaaaaaaaaaa=(

intanurulfateha (◡‿◡✿) said...

~princess

.add me kt YM k
.nti i tlg

bubble_buzz@yahoo.com

cik lilo said...

thanx you sys

baru la blog i x semak

thanx u very much

love you(not lesbo k)

intanurulfateha (◡‿◡✿) said...

~lilo

.welkem ^^

NURINonlyy((: said...

tengs tecer intan .
^^

intanurulfateha (◡‿◡✿) said...

~nurin

.welkem ^^

Taqi said...

sis..taqi pening2..huhu
6ti nk mintk tlg sis..taqi add ym sis lh..

intanurulfateha (◡‿◡✿) said...

~taqi

.oke taq
.add lah, bubble_buzz@yahoo.com

Taqi said...

taqi dh cube 2 kali intan eh..huhuh msih xdpt :D

intanurulfateha (◡‿◡✿) said...

~taqi

.x leh ke?
.senang je lahh
.kene gune template minima, x kisah white atau black

iLaSyakiLa said...

sys..
nape pas kila save..
yg right sidebar die pas ke bwh ek??
puas da kila wat mle..
pening da nie..
hukhukhuk...
tp klo tgk kat page element..
ok jep..
ble preview..
die jd ke bwh..
yg left..ok jep..
psyal ek?

♥ luna ♥ said...

ade sket mslh..leh tlg x...right side pada bhgn sign in/sign out, customize, new post xpat klik la..mcm sume tu dh x wujud..jd klu nk ke dashboard terpksa mlwt ke blog org bru leh msuk..pd encek spongebob and welcome to my sweet like us tu pun x leh klik..nape ye...

intanurulfateha (◡‿◡✿) said...

~ila

.ade code yg silap tu kila
.tgk betul3 k! ;)

intanurulfateha (◡‿◡✿) said...

~luna

.ermm i da tgk dah ur blog
.u ade ubah pape x?
.kalau x nk pening, reset semula layout u tu, n create 3column semula
.tp make sure each gadget yg u buat, kene buat back up dlu
.copy paste code dlm notepad :)

♥ luna ♥ said...

hehe..thanx a lot ye cik intan..great teacher!!

aiemmalya said...

berjaya jua akhirnya..terima kasih di atas ilmu 2 ek..

=)

peace!

QieLa said...

hehehehe
sukses2
berhasil
thnx a lot2 kak intan

Mrs Syukor said...

Yeay Intan,
Jadik dah...Selama aku folow ko nyer tutorial,
xder nyer x jadik...
Thanks for the tutorial...

Mrs Syukor said...

Cik Intan,
mcm mana nk buat bakcground belakang tuh jgn lebar sgt??

cuber view ak nye blog...x leh nk tgok ar tulisannya....

http://syukornurul.blogspot.com

intanurulfateha (◡‿◡✿) said...

~mrs syukor

.ko edit lah width die k

shida~ said...

intan..

sy dh bwat ikot step
hampir jd tp nape blog post die kt tepi eh..x center..huhuhu

ym sy--> pinkslipper87@yahoo.com

intanurulfateha (◡‿◡✿) said...

.mesti u x drag gadget dulu mcm step 10 then u terus buat step 11

shida~ said...

owh mcm tu eh..hee..ok i'll try again..thanx..=]

intanurulfateha (◡‿◡✿) said...

~shida

.yup! ;)

shida~ said...

intan...
dh jd..hoiye2...thanx to u~

fmunyraz said...

intan...mcm ne nk drag post ke tgh??
i buat x jadi pun??:(

intanurulfateha (◡‿◡✿) said...

~shida

.welkem ^^

intanurulfateha (◡‿◡✿) said...

~fmunyraz

.err blog post mmg x leh drag ke tgh
.gadjet je boleh drag
.cume tgk tuto tu betul
.ikut step by step

adrinaqamarina said...

sis...
kte punyer pon cam ta jadi sangat...
cam ne eh?
post dye de kat tepi...
huhu~
:(

Ily~PearJarl said...

hiks..sys~
selepas kite same2 start wat blog..
dr zaman sys jd teacher intan kat skool
dis is d 1st time wat tutorial sys~~
wee..
t 1st x jadi..
tp past reset layput bawu jadik
thx~!
mmwahh (。❤‿❤。)

Ezad n Dikna said...

thanks intan...
mmg sgt senang phm ur tutorial ni...try skali jek da jadi...(^_^)

Kelyza said...

thanks kak intan, mmg jadila, credit utk kak intan :DD

intanurulfateha (◡‿◡✿) said...

~adrina

.kene drag gadjet ke sidebar
.baru jadik ;)

intanurulfateha (◡‿◡✿) said...

~Ily

.hehe congrat ^^

intanurulfateha (◡‿◡✿) said...

~ezad

.tahniah ^^

intanurulfateha (◡‿◡✿) said...

~kelyza

.tenksss ^^

Fadhli said...

kak intan x bleh la arggggggg.... kak kalu x tukar mcm kat step 1&2 tu lah x?

intanurulfateha (◡‿◡✿) said...

@Fadhli

.uit
.knp plak x boleh
.try slow3
.bce bismillah ;)

Rifqi Zuhairi said...

Salam..

Hahahaha...suka...sudah 3x try baru berjaya..tenkiu yer dik intan..

intanurulfateha (◡‿◡✿) said...

@Rifqi Zuhairi

.welkem bro ^^

syaza ♫♀ said...

terima kasih!! menjadi..

intanurulfateha (◡‿◡✿) said...

@syaza ♫♀

.hehe gud ^^

~eVerYtHiNG~ said...

salam..

yey!!!jd pn..tq teacher.. =)

intanurulfateha (◡‿◡✿) said...

@~eVerYtHiNG~

.welkem ^^

NadiaShafiqa said...

menjadik....

wah..sangat bermanfaat.. thanks intan..

Nurnabihah Mohd Nizar said...

auww...sangat seronok! jadi jadi..
hahah..best2 thanks~

zyLa said...

tutorial y sgt paham..n sy dh berjaya wat.akhirnya dpt gak wat !!!

intanurulfateha (◡‿◡✿) said...

@zyLa

.tahniah ^^

intanurulfateha (◡‿◡✿) said...

@NadiaShafiqa

.welkem ^^

intanurulfateha (◡‿◡✿) said...

@Nurnabihah Mohd Nizar

.hehe welkem ;)

Ann said...

sys :) thnx ye ? i b'jye wat..
thnx :)

intanurulfateha (◡‿◡✿) said...

@Ann

.tahniahhh ^^

wan said...

hello..
mau tnye..
tau x nk transparent kan table blog ?

thanks

intanurulfateha (◡‿◡✿) said...

@wan

.err tataulahh

♥ifa tasya♥ said...

sis!!!
ifa creditkan kat sis tau . boleh tgok kat sini .

http://ifatasya.blogspot.com/2010/07/tutorial-3-column-part-1.html

Nazrullive said...

thank you!

Siti Humairah Zulhaimi said...

thanks!

myranaqi said...

hai ...salam..
nk tnya skrg template blogger dh lain kn..step2 yg kt ats 2 sume dh lain dh xsama dh..huhuhu..mcm ne nk apply kn utk template blogger yg br ni..huhuh..
klu leh wt tutorial utk template yg br erk :)

Wana De'Amor said...

tenkiu sis....saya menggila edit blog dgn ur tutorial...oh suka! muwah~

miss helena said...

ticer.. sgt suke dis entry . hehe . dah lama cri cara nk wat 3 columns. anyway thanks alott~~~~~~~=)

azween said...

Kak Intan , thank you for the tutorial :) Tapi , kenapa bila saya nak buat tutorial yang lain , saya tekan preview je dia close balik ?

zEri sAfEerA said...

as salam....
intan, org br j try wat 3 column ni. tp knape die jd itam j sume? xde gmba bckground yg sy pilih 2? hurm -_-

cinta cornetto said...

thanks sis . puas nony try . hehe . akhirnye jadik jugak

Aizuddin Hanis said...

2 mcm smart~~

BELLA said...

thanks sis :) bell dah dapat buat da :D

airaa said...

: tO ka inTan. .
cane ae nak uat 'boX'
tuk tittle2 kat sidebar tuw.??

Yaya Suraya~Yaya Dluver said...

akak..x leyh download la .....
da lama saya tunggu...tp x leyh gak !!
naper yer kak ??

eyra_munchet said...

mcm mne na cari layouttt

dekat blog eyra takdew pun tuls layout :(

Syahrul Ikram said...

sye ader try nk tuka background images
tp dye tlis
cannot for this template
sye buat yg 3 column tuh
help...

apple ♥ sidz said...

akak, lpas pilih minima dark tu, kena save eh?

90's female said...

kalo xde new templates kat box uh cmne yerk?

gadis semasa said...

NK CWIK BNDE 2 CUCAH .
ngiz la cm ni

gadis semasa said...

NK CWIK BNDE 2 CUCAH .
ngiz la cm ni

nina said...

x sme pon dashboard ny??
dye xde layout.
yg ade design je.

kue ziya said...

da try.....tengss so much`

aQ!LaH said...

sis... x jdlah huhuhu

Zurina said...

sis..nk tnye..y bla cri code yg nmber 4 tu..xde ye??

yaNa said...

akk....npe xbley wat dh 3kali cuba..
pnat dah nak....putus asa T_T akk bley tlg wat kn x???

Sofie Ezzaty said...

kak intan , mcm mane akak buadd header tu ?

Sofie Ezzaty said...

ini untuk layouts jak kah ?

izyan said...

hm.
kalu x d0wp layout cm ne lak . ?

ardiela husna said...

tlg tgok blog sy, xreti la nk bt 3 columns . hope you can help me

AKMA said...

i just tried this.. and it works! thanx sis intan :D

PuRpLe_eida said...

uwaa...akak guna template pyzam.com dh ilang

♥ NurMaisurah ♥ said...

hye sis ... dek gune website ni tuk jdek background http://thecutestblogontheblock.com/free/free-backgrounds/item/1000/asInline.html , but npe blogg dek nmpak besar sgt ... mcm ne nak reduce size background uh ?

farah emogurlz said...

akak xbley pown buat 3 coloms..

kim nyna said...

na tnye lyh? cne na gn aplication nuffnang? sy..gn pyzam skg nyh..

sis nur~~ said...

ilY ;)
terer lahh.
keep in touch ♥ ♥ ♥

dAk EyTy tOmeL said...

ala tk berjaya buat la
wwawawaa

MSfaten said...

Kalau nak kekalkan template sedia da just nak bwat 3 column , boley takk????
;)))

Sarah Naiema said...

Intan, saya punye dah jadi 3column.. tapi yang background warna putih utk post dan sidebar tak ada..camne awak buat?tlg ajar..=)

Aishah Munirah binti Musa said...

x jadi ape2 pun.. drpd start download full template..????

SYIRA @ DAMAKIUN ^ _ ^ said...

cmne ni.. dh try buat dh.. tpi x de pon code #sidebar at HTML tu... aoi...

AlyNn NyzAa said...

thanx a l0t tcer...:) sgt2 mbantu...^^

CikAnyss' :O said...

jadi ! thx

Wan Syuhada said...

Salam,kak,cmne nk letak bckground nye lak?

Miss Nadya said...

alhamdulillah...akhirnya menjadi jugak..:)

thnks dear..:)

 

About Me

My Photo
intanurulfateha
Muar, Johor, Malaysia
Eh, dah ada dua orang baby girl! ;) | Berdaftar dengan SSM, Double I Excellent Enterprise : JR0046896-W | For any inquiries, whatsapp 012-7186471
View my complete profile

#our journey

Friends since 2008
Getting Close since Nov 2010

Daisypath Anniversary tickers

Love is not a matter of counting the years, it is about making the years!

Daisypath Anniversary tickers

Alhamdulillah.. :')

Daisypath Anniversary tickers

Jantung, Hati, Limpa, Paru

Wanita di jadikan atas nama cinta.
Kalau cari, mesti jumpa.

Dan kamu,
Mohammad Noor Irfan;
Terima kasih kerana mencari saya semula!

Hep ! ! !
Curik hati kite ekk!

Tapi tak per..
Kite suke~

(^__^)

#irfanintanJR

#irfanintanJR
Aleesya Eryna

Kesayangan 31-3-13

Kesayangan 31-3-13