Tutorial 3 Column

Camne nak buat 3 column???

Ok, aku harap apa yang aku soksek kan kat sini, uols paham la eh.. nanti try buat sampai jaya.. be4 tukar apa2 coding, make sure uols save dulu coding yang lama.. supaya ada backup... nanti bila tak jadik, tak la uols meroyan bila korang tengok korang nye blog dah jadik huru hara.. sebab boleh change balik ke coding lama...

Untuk memudahkan uols nak carik codingnye belah masa... just click ctrl-F.. nanti kat bawah tu akan kuar kotak find.. situ korang taip je coding yang korang nak carik... like this... #header-wrapper

Ok... 1st sekali...

Pergi ke layout - edit html... jangan lupa tick kat Expand Widget Templates yang ada kat belah kanan tu...

Then... untuk penukaran saiz header.. ini codingnye...

#header-wrapper {
width:880px; <--- tukar yang ni saje, kasik 880
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Done, skang ini untuk penukaran saiz sidebar

#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; }

(lebar ikut sukahati masing2 ye.. aku suggest 220 for sidebar)

Kat bawah coding nie.. tambah lagi satu coding yang ini..

#left-sidebar-wrapper {
width: 220px;
float: left;
word-wrap: break-word;
}

So, uols dah dapat dua sidebar, satu belah kanan satu belah kiri..

Ok, belum abis lagi...

Lepas tu..

#outer-wrapper {
width: 880px; <--- change kat sini
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

Outer-wrapper nie apa??? outer wrapper nie korang nye left sidebar + right sidebar + main wrapper. So masing2 ada lebar masing2 kan.. so, campurkan semua lebar.. dan jadikan lebarnye sama ngan saiz header..

Done...

Then carik coding nie plak ---> <div id = 'main-wrapper'>

Bila dah jumpa, atas pada coding tu, tambah coding ni..

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

Ok???

Last sekali...

Di main-wrapper

#main-wrapper {
width: 410px;
float: left;
margin-left: 20px; <--- atau ko leh buat 10px
word-wrap: break-word;
}

Tujuan tambah coding margin-left nie, sebab nak kasik gap antara sidebar dengan main-wrapper.. tak la, dia melekat...

Ok, then savee...

View la uols nye page elements kat layout 1st..bila dah ada dua2 sidebar kiri kanan.. cuba alihkan satu gadget ke belah satu lagi... then save, dan try view blog uols... insy akan jadik if korang betul2 ikut apa yang aku soksekkan nie..

Alert kat tulisan merah... tukar dah tambah coding hanya pada tulisan color merah...

note: cuba la.. aku tau susah nak paham.. tapi pening gak pala aku nie nak try explain kat uols.. hoho~ Tapi if tak paham jugak, bukak web nie --> Blogger buster

or

Kalau malas nak buat sendiri, masuk web nie... blogger template.. situ korang dload je.. lagi sonang