Buat 3 Kolum

Peringatan save dulu kod korang yang asal dan perlu ingat selepas ubah setiap kod preview dahulu utk memudahkan latihan berjalan dengan lancar.

Dalam latihan ini, aku akan bahagikan layout blog kepada 3 kolum iaitu:-
a) 2 kolum(2 sidebar) = 250pixel setiap satu
b) 1 kolum utk blog pos = 400pixel

p/s: Mula-mula sekali korang kena ubah width semua layout.(header, outer wrapper, main wrapper, sidebar dan footer)

Macam biasa pergi ke Layout>Edit HTMl
1) Cari kod header seperti di bawah

#header-wrapper {
 width:610px;
 margin:0 auto 10px;
 border:1px solid $bordercolor;
 }

Ubahkan width kepada 950px(bold)

2) cari kod Outer-Wrapper seperti di bawah

#outer-wrapper {
 width: 610px;
 margin:0 auto;
 padding:10px;
 text-align:$startSide;
 font: $bodyfont;
 }

Ubahkan width kepada 950px(bold)

3) Sekarang nak setelkan pulak kolum pos(main wrapper)

Macam biasa cari kod

#main-wrapper {
width: 410px;
float: $startSide;
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 */
}

Ubahkan kepada 400(bold)


4) Seperti biasa cari kod sidebar seperti di bawah

#sidebar-wrapper {
width: 220px;
float: $endSide;
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 */
}

Ubahkan width kepada 250px(bold)

Kemudian korang kena tambahkan 1 lagi sidebar dengan tambahkan kod seperti di bawah

#new-sidebar-wrapper {
 width: 250px;
 float: $startSide;
 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 */
}

Jadi korang copy dan paste kan saja selepas kod side bar yang pertama tadi

Nanti kod korang akan jadi seperti ini

#sidebar-wrapper {
 width: 230px;
 float: $endSide;
 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 */
}
#new-sidebar-wrapper {
 width: 200px;
 float: $startSide;
 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 */
}

Ok sekarang masa untuk menjelmakan sidebar yang kedua tadi. Sini korang kena pahamkan betul-betul.

Cari kod seperti di bawah:-

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

<!-- sidebar kiri -->
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

<!-- sidebar kanan -->
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>

Ok kalo korang nak sidebar yang kedua tadi berada sebelah kiri korang masukkan kod ini

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

Di tulisan kiri(bold) seperti kod yang tertera di atas dan kalo korang nak masukkan sebelah kanan buat sebaliknya.

p/s: jangan masukkan sekali dua-dua, nanti blog korang jadi bengong.

5) Terakhir sekali Footer

Cari kod ini

#footer {
 width:610px;
 clear:both;
 margin:0 auto;
 padding-top:15px;
 line-height: 1.6em;
 text-transform:uppercase;
 letter-spacing:.1em;
 text-align: center;
}

Ubah width kepada 950(bold)

Save template dan siap la 3 kolum.. tgk kat layout korang..