Menambah Sidebar kiri dan kanan

Desain blog yang kita gunakan baik di BlogSPOT atau BloGGeR, WordPRESS dan BlogDETIK serta Blog-blogyang lain sebenarnya tersusun atas beberapa elemen blog yang pada intinya terdiri atas :

1. Header-Wrapper/Header : Bagian teratas blog di bawah Navbar).
2. Main-Wrapper : Terletak di bagian tengah (tempat posting). Pada Main Wrapper.
3. Crosscoll-Wrapper : Tidak semua desain blog menggunakan crosscoll-wrapper. Posisinya terletak di antara header dan Content-Wrapper, dimana content-wrapper sendiri melingkupi (wadah dari) Main-Wrapper dan sekaligus Sidebar-Wrapper.
4. Sidebar-Wrapper atau Sidebar : Terletak di samping kanan atau kiri blog (template 2 kolom)  atau di kedua sisi kanan dan kiri (template 3 kolom).
5. Footer : Terletak di bagian terbawah blog.

Bagi sobat yang berminat untuk menambah Sidebar kiri dan kanan maka disini akan saya beri tahu beberapa caranya dan bisa diterapkan. dan semoga berhasil

Baiklah, ayo kita mulai sobat, dalam hal ini saya anggap sobat sudah berhasil membuat kolom baru. Langkah pertama yang harus di ingat adalah jangan sekali-kali memberi tanda conteng pada kotak kecil di samping tulisan Expand widget Template karena apabila sobat mencontengnya akan keluar kode widget yang sangat ngejelimet. Jika pada postingan yang lalu saya menuliskan kode seperti ini :

Berikut Kodenya

/* 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: 180px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}

Agar hasilnya berbeda dengan yang dulu yaitu kolom yang di buat bukan berada pada sebelah kanan, maka sobat perlu sedikit mengubah kode yang saya cetak merah menjadi seperti ini :

Berikut Kodenya

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

Terlihat pada hurup yang saya cetak biru bahwa yang di ubah hanyalah dua baris kode saja, yang lainnya tidak perlu di ubah. Jika sudah selesai mengubahnya, jangan lupa untuk menutupnya dengan menekan tombol simpan template.

Langkah selanjutnya adalah menuju ke bagian bawah template, yaitu pada bagian body, jika dulu saya menyarankan agar kode sidebaru di tempatkan seperti ini :

Berikut Kodenya

<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>

Maka apabila sidebar baru ingin di tempatkan di sebelah kiri, maka kode sidebar baru harus di pindahkan di atas kode main (posting) sehingga kodenya kira-kira akan menjadi seperti ini :

Berikut Kodenya

<div id='sidebarbaru-wrapper'> <!-- Edit Yg ini -->
<b:section class='sidebar' id='sidebarbaru' preferred='ye'/'>
</div>

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

<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>

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