Membuat Sidebar berada di Kiri dan Kanan

Beberapa waktu yang lampau saya telah memposting
bagaimana cara membuat sidebar baru pada template minima sehingga template
tersebut yang asalnya dua kolom berubah bentuk menjadi tiga kolom. Dari
hasil pengamatan dilihat dari komentar-komentar yang muncul pada postingan
tersebut ataupun ada juga yang melalui shoutbox, mengambarkan kegembiraan
para sobat yang telah berhasil menyulap blognya menjaditiga kolom, selamat
dech buat yang sudah sukses. Namun diantara yang telah puas, ada juga yang
masih merasa penasaran dan juga berkeinginan lebih. Beberapa komentar yang
muncul, di antaranya adalah sebagai berikut :

makasih bro...

aku dah berhasil tapi alangkah bagusnya jika post berada di antara
side bar itu aku pengen yg kayak gitu gimana caranya bro?????

mas gimana klo mo naruh colom posting di tengah diantara sidebar
kiri n kanan ???? tolong ya mas... thx

nambah kolom da bisa, tapi gimana cara nya meletakan side bar di
kiri dan kanan sedangkan tempat posting nya berada di tengah-tengan
side bar pada templete minima, tolong ya mas..

Rohman (anu kasep) : Hmmmmmmm... gimana
ya... ada deeeech... rahasia pokoknya

Pembaca : dasar pelit

Rohman (anu kasep) : Bercanda dhenk

Pembaca : awas kalo ga di kasih tau

Untuk membuat kolom sidebar yang baru dibuat tidaklah terlalu sulit,
sobat hanya perlu menempatkan kode float menjadi di kiri (left)
serta penambahan kode padding-right agar kolom kiri tidak
bertabrakan dengan kolom posting. Bingung? sengaja saya buat bingung

Bagi sobat yang berminat untuk menempatkan kolom sidebar di sebelah
kiri, sebelum membaca artikel ini ada baiknya membaca artikel yang

di sini terlebih dahulu karena artikel ini merupakan lanjutan
dari artikel tersebut, jika sobat langsung membaca artikel ini, saya
khawatir sobat menjadi tambah bingung.

Sebelum memasuki kepada topik bahasan utama, saya sarankan kepada sobat
yang mempraktekan teori yang akan saya tulis sebaiknya bukan pada blog
utama, akan tetapi pada blog untuk percobaan. Ini untuk menghindarkan
kejadian yang tidak di inginkan, sayang apabila blog yang telah di tata
rapih menjadi amburadul akibat percobaan.

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 :

/* 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 :

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

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 :

<div id='sidebarbaru-wrapper'>

<!-- perhatikan yang ini -->



<b:section class='sidebar' id='sidebarbaru' preferred='ye'/'>



</div><div id='main-wrapper'> 

<!-- perhatikan yang ini -->



<b:section class='main' id='main' showaddelement='no'>



<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>



</b:section>



</div>

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

Tidak sulitkan sobat? semoga mudah untuk di mengerti. Untuk melihat
contoh blog yang mempunyai sidebar di samping kiri dan kanan, sobat bisa
membuktikannya
di sini!