Menbuat 3 Column Template

Setelah menghabiskan masa selama hampir 1 hari untuk menjadikan tempalate blog saya ni dari 2 column menjadi 3 column, akhirnya berjaya juga siap malam tadi...
Fuh!... sampai sakit kepala nak buat 3 column ni semalam... Dah buat-buat, bila siap layout blog saya jadi berterabur pula... huhu... Cari pula tutorial yg lain, cuba buat lagi dan akhirnya menjadi juga...

Ok, tanpa membuang masa, macam ni cara nak buat dia...

1. Login Blogspot dan masuk bahagian Layout.

2. Klik Edit HTML.

3. Save/backup template yg sedia ada dengan Download Full Template.

4. Dalam kotak kod HTML, cari kod ini (nak senang cari, guna CTRL+F):

#outer-wrapper {

width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

Tukarkan,
width: 660px; menjadi width: 980px;
Cari pula,

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

Tukarkan,
width: 660px; menjadi width: 980px;
Kemudian, 'copy' kod dibawah,


#sidebar-wrapper2 {
width: 220px;
float: left;
word-wrap: break-word;
overflow: hidden;
}


'Paste'kan ia pada bahagian Outer-Wrapper seperti dibawah.

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

#main-wrapper {
margin: 0 0 0 35px;
width: 460px;
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 */
}

#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 */
}
#sidebar-wrapper2 {
width: 220px;
float: left;
word-wrap: break-word;
overflow: hidden;
}

'Copy' kod yang ini pula.


<!-- our new column -->
<div id='sidebar-wrapper2'>
<b:section class='sidebar' id='sidebar2' preferred='yes'/>
</div> <!-- new column added -->


'Paste' kan ia diantara <div id='content-wrapper'> dan <div id='main-wrapper'>. Seperti contoh dibawah:

<div id='content-wrapper'>

<!-- our new column -->
<div id='sidebar-wrapper2'>
<b:section class='sidebar' id='sidebar2' preferred='yes'/>
</div> <!-- new column added -->

<div id='main-wrapper'>

Cari kod #main-wrapper {
Tukarkan 'margin' dan 'width' dia seperti dibawah.

margin: 0 0 0 35px;
width: 460px;

Akhir sekali, 'paste' kan kod dibawah, di bahagian Footer seperti contoh yang diberi..

Kod:
/* tweaks for wireframe */
body#layout *{margin:0;padding:0;}
body#layout,body#layout #outer-wrapper{width:750px;}
body#layout #main-wrapper{width:40%;}

Contoh:

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

/* tweaks for wireframe */
body#layout *{margin:0;padding:0;}
body#layout,body#layout #outer-wrapper{width:750px;}
body#layout #main-wrapper{width:40%;}

]]></b:skin>
</head>

5. Dah siap semua, Save Template.

Siap dah...
Selamat Mencuba yaa....

Sumber: lawnydesignz