Tutorial 3 column

atas permintaan cik rosmadah jd aku buat kan lah dia tutorial ini supaya column nya buli menjadi 3 hehe.

1)Mula2, kamu 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 kamu tu.

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

3) kamu pergi ke Edit HTML dekat Layout tab tu.  tak payah k klik Expand Widget Templates. TAK PERLU okay!

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, kamu 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 pink tu

#main-wrapper {

x;width: 410px; <-- tukarkan kepada 440p

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 kamu akan jadi 3 column macam gambar kat bawah ni.

10) kamu 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 pink 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 ^^

Selamat mencuba Geng...