Cara menambah kolom antara post dan sidebar

Sebelum nya saya pernah membahas tutor menambah kolom di blog. ternyata masih ada yang kurang yaitu kolom antara post dan sidebar. ide ini keluar dari pertanyaan sobat blogger yang mencari tutor menambah satu kolom antara post dan sidebar. tadi nya saya agak bingung membari judul artikel ini. membuat halaman tiga kolom di blog, atau cara menambah kolom antara post dan sidebar. akhirnya pilihan saya jatuh pada yang kedua. mudahan saja anda memilih yang kedua juga hehehe.

Biar tidak berkepanjangan kita langsung saja pada pokok pembahasan. untuk membuat satu kolom antara kolom post dan sidebar. yang pertama perlu anda perhatikan adalah ukuran lebar dari outer-wraper blog yang anda miliki. misalnya anda memiliki lebar auter-wraper 660px. nah untuk menambah kolom baru anda harus menambah lebar blog anda.

Untuk menambah kolom baru yang perlu anda perhatikan adalah kode-kode pada outer-wrapper berikut:

#outer-wrapper {
width: 680px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 420px;
float: left;
word-wrap: break-word;
overflow: hidden;
}
#sidebar-wrapper {
width: 230px;
float: right;
word-wrap: break-word;
overflow: hidden;
}

Nah untuk menambah kolom baru secara logika tentunya lebar dari Outer-wraper akan mengalami perubahan. pertama sekali yang harus di perhitungkan adalah, berapa lebar kolom yang ingin kita tambahkan. misalnya nilai dari kolom baru 230px; berarti jumlah keseluruhan lebar outer wrapper menjadi kira-kira 420px + 230px + 230px + 20 px = 880 pixel kemudian bisa kita tambahkan lagi 10 px untuk sela oute wraper sehingga lebar keseluruhan 890 pixel. jadi kode untuk penambahan kolom baru dari nilai di atas adalah:

#kolombaru-wrapper {
width: 230px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}

Nah setelah di tambah kan maka keseluruhan kodenya akan menjadi seperti ini:

#outer-wrapper {
width: 890px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 420px;
float: left;
word-wrap: break-word;
overflow: hidden;
}
#sidebar-wrapper {
width: 230px;
float: right;
padding-left:10px; /* yang ini adalah tambahan untuk jarak sela */
word-wrap: break-word;
overflow: hidden;
}
#kolombaru-wrapper {
width: 230px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}

Kode di atas merupakan langkah pertama yang harus kita tambahkan. berikut nya adalah menambah kode id untuk kolombaru tersebut. untuk kode id sidebar sebelum penambahan kolombaru adalah sebagai berikut:

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

karna kita sudah menambah elemen baru pada sidebar, maka kita juga harus menambahkan id untuk elemen baru tersebut. id elemen baru tersebut adalah sebagai berikut

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

Nah setelah menambahkan id kolom baru tersebut dengan id sidebar blog yang sebelumnya. sehingga menjadi seperti ini:

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

Selesai... simpan dan sekarang silahkan di cek pada tata letak blog anda. di sana akan terlihat kolom yang baru yang kita tambah kan tadi. untuk nilai header dan footer sebaiknya anda tambahkan menjadi 890 px. sehingga menjadi sama dengan nilai outer wraper. biar kelihatan lebih klop. Selamat mencoba..