Membagi Elemen Sidebar Menjadi 2 Kolom

Situseo Blog : Membagi ruang sidebar menjadi dua kolom, sebagian dari template menggunakan ruang sidebar hanya satu kolom, untuk merubah menjadi dua kolom kita bisa menambahkan kode CSS didalam template untuk membagi dua sidebar tersebut menjadi 2 bagian.

Sebelumnya kita pernah membahas mengenai Membuat Footer Multi Kolom. Untuk membagi sidebar menjadi 2 kolom, kalian bisa mengikuti caranya sebagai berikut:

• Login ke akun Blogger - pilih Design/Rancangan - Edit HTML
• Sebelum melakukan penambahan script sebaiknya melakukan backup template terlebih dahulu, dengan men-Download Full Template, supaya mudah mengembalikan template kebentuk semula bila hasilnya tidak sesuai dengan yang di inginkan.
• Kemudian cari kode CSS seperti ini:

#sidebar-wrapper {
width:300px;
color:#4c4c4c;
padding:0;
}

Setiap template penamaan dan penyusunan kode CSS nya berbada-beda, yang perlu diperhatikan adalah bagian lebar atau widthnya.

Kode CSS bagian sidebar seperti contoh diatas menunjukan lebar 300px, untuk membagi 2 kolom bagian sidebar, maka kita bagi 2 nilai widht nya, sehingga setiap sidebar mempunyai ukuran 150px. Untuk menghindari berdepetnya sidebar tersebut, kita kasih jarak 10px setiap masing-masing sidebar, sehingga menjadi lebarnya 140px.

Setelah menentukan lebar sidebar kanan dan kiri, selanjutnya kita membuat kode CSS tambahan dengan nama #sidebar-wrapper2 { sehingga menjadi seperti ini:

#sidebar-wrapper {
width:300px;
color:#4c4c4c;
padding:0;
}

#sidebar-wrapper2 {
width:300px;
color:#4c4c4c;
padding:0;
}

Setelah membuat duplicate #sidebar-wrapper { kemudian ganti ukuran widhtnya menajadi 140px dan tambahkan margin:0px 10px 0px 0px; dan float : right; pada bagian sidebar-wrapper2. Sehingga hasilnya menjadi seperti ini:

#sidebar-wrapper {
width:140px;
color:#4c4c4c;
padding:0;
}


#sidebar-wrapper2 {
width:140px;
color:#4c4c4c;
padding:0;
margin:0px 10px 0px 0px;
float : right;
}

Selanjutnya cari kode

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML13' locked='false' title='Random Post' type='HTML'>
</b:section>
</div>

Perhatikan kode yang berwarna merah, sedangkan yang berwarna hitam setiap template berbeda, dan dalam contoh tersebut menunjukan bahwa sidebar tersebut sudah berisi widget random post.

Tambahkan kode yang berwarna hijau dibawah kode </div> sehingga menjadi seperti ini:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML13' locked='false' title='Random Post' type='HTML'>
</b:section>
</div>

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

Save template dan lihat hasilnya

Semoga bermanfaat,