Membuat sidebar tambahan

Pengen punya sebuah blog dengan 2 buah sidebar???Tapi bingung gimana caranya? . Ga usah khawatir karena dalam posting kali ini aku akan menjelaskan cara menambah sidebar pada blog menjadi 2 buah. Biasanya dengan menambah jumlah sidebar kita juga lebih mudah dan leluasa menambahkan gadget/widget.

Tidak sulit membuatnya, anda tinggal mengikuti langkah-langkah dibawah ini.
Ingat...jangan diberi tanda centang pada Expand widget Template karena akan muncul kode-kode yang rumit sehingga dapat membingungkan


Langkah pertama

Cari Kode dibawah ini (biasanya berada dibagian atas)

/* 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: 200px;
float: right;
padding-left:10px; (tambahkan kode ini 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 */

Sesuaikan dulu lebar outer wrapper, main wrapper dan sidebar wrapper dengan mengubah tulisan yang tercetak merah. Outer wrapper adalah halaman blog anda, main warpper adalah halaman postingan anda. Usahakan lebar maksimum (Main Wrapper + Sidebar Wrapper = Outer Warpper ) Ini agar hasilnya sesuai dengan harapan anda.
Jika udah sesuai, Copy kode dibawah ini kemudian paste tepat dibawah kode-kode tadi

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

Kode diatas menunjukan sidebar baru terletak disebelah kanan. Ubahlah kode tersebut menjadi kode seperti dibawah jika sidebar ingin diletakan di sebelah kiri.

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

Langkah Kedua

Cari kode HTML dibawah ini pada bagian body

<div id='main-wrapper'><b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>

Copy kode dibawah ini kemudian paste tepat diatas kode tadi jika sidebar ingin berada di sebelah kiri dan paste tepat dibawahmya jika ingin berada di sebelah kanan. Jangan lupa kode yang diatas ( #sidebarbaru-wrapper...dst ) harus disesuaikan, dimana akan meletakkannya..?

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

Apabila sudah selesai menempatkan kode sidebar baru, silahkan akhiri dengan menekan tombol Simpan Template, selesai. Silahkan lihat hasilnya !

Jika hasilnya tidak seperti harapan anda, kemungkinan lebar dari main wrapper, sidebar wrapper dan sidebar baru wrapper jumlahnya tidak sama dengan lebar outer wrapper, sehingga salah satu sidebar akan kebawah. Solusinya.....cobalah ubah lebar (width) dari sidebar agar hasilnya sesuai dengan keinginan kita.