Tutorial 3 COLUMN

Bagaimana nak buat blog 3 column? (macam blog aku) ini stepnya, tapi sebelum nak start buat 3 column pastikan anda buat backup (Download full template) dulu sebelum memulakan penambahan ini kerana jika ada perkara yang tidak diingin berlaku anda masih boleh upload balek template lama. dan gunakan Ctrl + F untuk memudahkan mencarik code.

1. Login ko Blog ID atau Dashboard

2. Masuk pada "Layout" dan terus ke Edit HTML tak perlu tanda "Expand Widget Templates".

3. Sekarang carik code seperti dibawah ini :

#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 */
}

4. kemudian copy dan paste kod tulisan merah dibawah ini pada sebelah bawah kod di atas :

#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 */
}

Copy dan paste code merah seperti gambar kat atas ni

5. kemudian carik code kat bawah ni :
<div id='main-wrapper'>

6. bila dah jumpa code seperti diatas ambil code dibawah ni copy dan paste atas pada code tesebut :

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

Copy dan paste seperti gambar diatas.

7. bia dah selesai carik code ini dan tukarkan kepada tulisan merah :

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

8. Kemudian "Save Template" dan anda septutnya boleh melihat Sidebar disebelah kiri dan kanan seperti gambar dibawah ini :

Sidebar kiri dan kanan

9. Last sekali carik code bawah ni dan tukar sikit atau tambah seperti tulisan merah dan akhir sekali save.

#main-wrapper {
width: 410px;
margin-left: 10px; <-- 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 */
}

10. Settle!~!~!~

Tambahan

Jika inginkan kelebaran pada bahagian post entry anda boleh mengubah "width" #main-wrapper dan wajib dikuti dengan "width" pada #outer-wrapper (Kelebaran column).

#main-wrapper {
width: 410px; <-- tambah kelebaran post entry 440 (+30)
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 wajib menambah lebar pada #outer-wrapper

#outer-wrapper {
width: 880px; <-- +30 = width menjadi 920px
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

Nota : Tutorial ini adalah tutorial asas untuk default template minima, bagi template yang lain kemungkinan berlaku kelainan code dan anda perlu berhati² sebelum membuat pengubahan.