Membuat blog menjadi 3 kolom

     Blogger 3 kolom sangat diminati para web builder. Nah kali ini kita akan melihat bagaimana mengubah blog 2 kolom menjadi 3 kolom. Jika kalian menyimaknya dengan teliti dan hati-hati pasti akan menuai hasil yang memuaskan. Mari kita lihat dan ikuti cara yang mudah dan sederhana di bawah ini.

Membentuk 3 kolom (sidebar) blog:

1. Pergi ke Template > Edit HTML

2. Cari :

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

}

dan ganti float menjadi :

float: right;

3. Dibawah itu tambahkan :

#second-sidebar-wrapper {

width: 220px;

float: left;

word-wrap: break-word;

overflow: hidden;

}

"float: left" akan membuat sidebar baru anda berada kiri. Dengan demikian anda akan memiliki sidebar di kiritemplate blog anda.

4. Cari dan ubah lebar dari outer-wrapper menjadi 900px atau lebih untuk menghindari tumpang tindih sidebardengan main-wrapper.

#outer-wrapper {

width: 660px;

margin:0 auto;

padding:10px;

text-align:$startSide;

font: $bodyfont;

} 

 5. Cari #main-wrapper dan ganti dengan :

#main-wrapper {

width: 410px;

float: left;

margin:0 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 */

}

           

        Berikut margin ke kiri dan ke kanan 20px ditambahkan untuk menghindari tumpang tindih sidebar dengan main-wrapper. Kalian bisa menyesuaikannya dengan model template kalian.

6. Letakkan kode berikut :

<div id=’second-sidebar-wrapper‘>

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

</div>

Tepat di atas kode ini:

<div id=’main-wrapper’>

7. Simpan template kalian dan selamat sidebar ke-3 kalian sudah terpasang.

    Kalian harus melakukan beberaa penyesuaikan sesuai dengan selera sendiri. Sesuaikan lebar menggunakan pengaturan margin dan padding (px) untuk main-wrapper; outer-wrapper; dan second-sidebar-wrapper. Mengatur margin, padding dan lebar (width)  dengan cara yang sama untuk "header-wrapper" dan "footer-wrapper“ untuk menyesuaikan tampilan blog kalian.