Bedah Kolom Sidebar Menjadi 2 Kolom Atau Lebih

Aku mau bagi sedikit tips neh bagi yang mau nambah kolom/Bedah kolom sidebarnya. jadi gak ngoceh lagi segera kita menuju TKP, login ke blog kamu lalu pilih element halaman dan lalu edit HTML, CARI CODE ini

#sidebar {
width: 205px;
float: right;
border-top: solid 1px #fff;
padding-top: 3px;
padding-bottom: 2px;
padding-$startSide: 2px;
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 */

kalau sudah tambahkan code berikut ini letakkan diatas code yang yang disebutkan diatas tadi

#sidebar2 {
width: 205px;
float: right;
border-top: solid 1px #fff;
padding-top: 3px;
padding-bottom: 0;
padding-$startSide: 2px;
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 */

kemudian kamu cari kode di bawah ini

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

Copy Kode ini lalu di paste di notepad atau mana saja yang bisa untuk edit tulisan...dan tambahkan id unik atau istilahnya nama unik..contohnya seperti ini(lihat tulisan warna pink) itulah yang aku sebut id unik

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

Jika sudah di edit seperti itu copy lalu tambahkan di atas kode

<div id='main-wrapper'>

hasilnya akan terlihat seperti ini

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

lalu simpan.

penjelasannya :
@tulisan 205px; berwarna merah muda
adalah lebar dari sidebar kita, lebar sidebar yang ada ngak boleh melebihi lebar #outter wrapper ditambah padding sidebar, dan #main jadi ini mesti di perhatikan

kalau sudah ngerti maka di edit dulu lebar dan letak sedibar sesuai keinginkan....
lalu save dan lihat letaknya di ELEMENT HALAMAN apakah sudah sesuai keinginan kita, contoh saja kalau sidebar dua kolom di sebelah kanan maka kalau sudah jadi maka hasilnya akan seperti ini bila di lihat di element halaman

perhatikan hanya yang di garis/ada tandai merah
karna gambar hanya sebagai contoh dan memang lagi ngak ada gambar yang sesuai.jadi kalau hasilnya belum sesuai edit lagi lebar antara semua sidebar dan #main bila di gabung hasilnya lebar #outter wrapper,
namun bila belum bisa walau hitungannya sudah benar maka aku sarankan, tambahkan code ini di bawah komponen #main

* Tantek hack - http://www.tantek.com/CSS/Examples/boxmodelhack.html */
voice-family: ""}"";
voice-family: inherit;
width: 522px;
}
/* IE5 hack */
#main {}

contohnya :

#main-wrapper {
width: 522px;
float: $startSide;
padding: 3px 3px;< border-top: solid 2px ; 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 */ /* Tantek hack - http://www.tantek.com/CSS/Examples/boxmodelhack.html */ voice-family: ""}""; voice-family: inherit; width: 522px; } /* IE5 hack */ #main {}

Jika memang tidak ada masalah kamu bisa menambah lagi kolom sidebar baru seperti contoh diatas, misal sidebar1 sidebar2 sidebar3...sekian , semoga bermanfaat.