Modifikasi template menjadi 3 coloum

Catatan memodifikasi template default blogger menjadi 3 Column

1. Template standar yang digunakan adalah MINIMA

2. Kode HTML yang dicari adalah


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


ctt: pada template default kode float adalah $endSide, jadi mungkin yang harus dilakukan
adalah mengubah $endSide menjadi right.

3. Menambahkan kode #left-sidebar-wrapper float: left dibawah
kode default (#sidebar-warpper) diatas. Secara full kode tersebut terlihat seperti ini


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


4. Kemudian cari kode html


<div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
</b:section>
      </div>

dan sebelum kode tersebut atau diatas kode tersebut tambahkan kode html berikut ini


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


penjelasan yang didapat :

memberitahu browser bahwa ada elemen sidebar disini dan memerintahkan browser untuk
mencari styling yang sesuai dengan yang telah ditentukan dalam css. memberitahu browser
kelas yang terdapat pada class ini dan semua elemen yang termasuk didalamnya.
ID unik untuk seksi ini adalah 'left-sidebar',  hal ini untuk membuat ID unik yang tidak terdapat
pada kode sebelum atau sesudahnya.5. Kemudian mengubah


/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px; margin:0 auto; padding:10px; text-align:left; font:
$bodyfont; }</p>


Ctt: secara default text-align: $endSide maka kemungkinan harus ditukar dengan left.
Untuk width juga harus ditukar menjadi 880px, karena width yang sebelumnya hanya mampu
untuk mengakomodasi satu sidebar sedangkan kita akan menambahkan sidebar satu lagi.

6. Hal lain yang harus diubah adalah header wrapper, agar sesuai dengan lebar blog anda
yang baru #header-wrapper { width:880px; margin:0 auto 10px; border:1px solid $bordercolor; }

7. Setelah itu anda harus menyimpan perubahan yang telah anda lakukan.
Jika anda melakukan preview terhadap blog anda maka akan terlihat ruang kosong
antar tempat postingan anda (mungkin lebih banyak disebut main body yah??) dan sidebar.
Gambar dibawah akan menunjukkan lebih jelasnya apa yang saya maksud.

8. Langkah selanjutnya adalah memberikan sebuah ruang yang membedakan
antara sidebar baru dan main post anda. Untuk itu carilah kode berikut ini pada
blog anda lalu ubahlah yang saya tandai warna merah #main-wrapper
{ width: 410px; float: left; margin-left: 20px; 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 */ }

9. Nah setelah langkah-langkah diatas anda tempuh maka anda siap untuk
 membuat sendiri template yang anda modifikasi sesuai dengan yang anda inginkan.