.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 ^^