Membagi Template Minima Menjadi 3 (Tiga) Kolom

Standar template minima yang ditawarkan blogger amat sederhana hanya memiliki 2 kolom (1 main dan 1 sidebar). Hal ini tidak bagus untuk blog yang punya banyak widget di sidebar seperti blog saya ini, karena sidebar akan terlihat lebih panjang daripada main.

Akhirnya saya menambahkan satu sidebar lagi di sebelah kiri sehinnga template menjadi 3 kolom. Begini nih, cara saya merubah template minima 2 kolom menjadi 3 kolom.

Masuk ke dashboard blogger > Lay out > Edit HTML. Download template lengkap, agar template bisa dikembalikan ke semula jika terjadi kesalahan.

Perhatikan kode CSS berikut:

#header-wrapper {
width:660px; <-------- ganti dengan 940px
$bordercolor;
}


#description {
margin:0 5px 5px;
padding:0 20px 20px;
border:1px solid #eee;
border-width:0 1px 1px;
max-width:660px; <-------- ganti dengan 940px
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#999;
}

#description {
margin:0 5px 5px;
padding:0 20px 20px;
border:1px solid #eee;
border-width:0 1px 1px;
max-width:660px; <------- ganti denga 940px
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#999;
}

#outer-wrapper {
width: 660px; <------- ganti dengan 940px
margin:0 auto; padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 410px; <------- ganti dengan 500px
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 */
}

Tambahkan kode CSS berikut diatas #sidebar-wrapper {

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

Perhatikan lagi kode CSS berikut:

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

Pastekan kode berikut tepat diatas <div id='main-wrapper'>

<div id='left-sidebar-wrapper'>
<b:section class='sidebar' id='left-sidebar' preferred='yes'>
<b:widget id='Gadget1' locked='false' title='Geo IP Tool' type='Gadget'/>
</b:section>
</div>

Simpan Template. Tralalala...... template udah berubah menjadi 3 kolom.