Cara Menambah Kolom Pada Sidebar

Ada beberapa kasus yang menyebabkan kurang mantapnya sebuah blog yaitu mungkin dikarenakan blog hanya mempunyai sedikit kolom di sidebar sehingga membuat si blogger jadi kurang bisa berekspresi dengan widget-widget yang menarik atau tambahan yang lainnya. Apa kalian sudah tahu cara menambah Kolom sidebar? buat yang belum tahu kamu bisa ikuti caranya dibawah ini:
1.Sebelum menambah sidebar kamu harus melakukan beberapa setting di edit template.
cari kode di bawah ini dalam template kamu dan rubahlah ukuran tampilan blog agar sidebar baru bisa dimasukkan
/* Outer-Wrapper
------------------------------------------ */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
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 */
}
#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 */
}
Keterangan cara merubah ukuran lebar template:
1.Outer-wraper berfungsi untuk merubah ukuran template dengan cara mengganti ukuran width:660px menjadi width:985px (hanya sebagai contoh, kamu bisa merubah ukuran terserah kamu). kalau bisa settinglah ukuran lebar template ini selebar ukuran layar dekstop kamu.
2.sidebar-wrapper berfungsi untuk menambahkan beberapa elemen/widget di blog anda bisa merubah ukuran sidebar ini sesuai keinginan.
3.main-wraper adalah kode dari halaman posting. kamu juga bisa merubah ukuran lebar posting ini.
bagaimanakah cara menambahkan kolom baru? Yang pertama harus di pikirkan adalah berapakah lebar kolom baru yang mau kita buat. biar sejalan saya ambil contoh lebar yang akan di buat adalah sebesar 200 pixel, jadi secara otomatis kita harus merubah lebar dari Outer-wrapper terlebih dahulu, sehingga lebar outer-wrapper menjadi : 410px + 200px + 200px + 20px = 830 pixel, biar ada sedikt sela, maka ditambah 10px sehingga nilainya menjadi 840px. Untuk sidebar baru kamu masukkan kode dibawah ini kedalam template.
Tahap Pertama:

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

contoh bila kode ditambahkan jadi seperti ini :


/* Outer-Wrapper
------------------------------------------ */
#outer-wrapper {
width: 840px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
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 */
}
#sidebar-wrapper {
width: 220px;
float: right;
padding-left:10px; /* yg ini tambahan juga biar tampak ada jarak sela */
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 */
}
#sidebarbaru-wrapper {
width: 200px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}
Tahap Kedua:
Cari kode dibawah ini di template kamu
<div
id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='Mengenai Saya'
type='Profile'/>
 
<b:widget id='BlogArchive1' locked='false' title='Arsip Blog'
type='BlogArchive'/>
</b:section>
</div>
Jika sudah ketemu maka selanjutnya adalah kamu salin kode dibawah ini (merah) kemudian kamu letakkan kode dibawah ini tepat di bawah kode diatas (hijau)
<div
id='sidebarbaru-wrapper'>
<b:section class='sidebar' id='sidebarbaru' preferred='yes'/>
</div>

Jika dipadukan akan seperti ini
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='Mengenai Saya'
type='Profile'/>
<b:widget id='BlogArchive1' locked='false' title='Arsip Blog'
type='BlogArchive'/>
</b:section>
</div>

<div id='sidebarbaru-wrapper'>
<b:section class='sidebar' id='sidebarbaru' preferred='yes'/>
</div>
Selamat mencoba ya.....