Membuat Sidebar Dua Kolom

Masih sekitar utak-atik template Blogspot , kali ini tentang Membuat Sidebar Dua Kolom atau membagi sidebar menjadi 2 kolom . Ceritanya tadi malam blog yang ini saya tambah sidebar 2 kolom dibawah sidebar utama, tentu ada maunya kan ?, ini juga sekaligus manjawab  sobat Putra yang menanyakan soal itu dikomentar postingan sebelumnya tentang Buat Footer Multi Kolom . Hasil dari kerjaannya seperti tampak pada screenshot dibawah ini.

Utak-atik yang saya lakukan itu, tentu setelah tanya sama oom google n mampir ke sobat2, saya implementasikan dengan langkah2 sbb. :

Masuk / login ke Dashboard , pilih Layout --> Edit HTML
Klik Download Full Template, ini penting sebagai backup, kalau2 nanti malah jadi gak karuan
Kemudian cari kode ini ]]></b:skin>
Copy kode dibawah ini kemudian  simpan diatas kode ]]></b:skin> tadi.

#kolom-kiri { width: 39%; float: left; } #kolom-kanan { width: 59%; float: right; }

Kemudian Cari Kode Di bawah Ini Gunakan CTRL + F

<div id='sidebar-wrapper'>

<b:section class='sidebar' id='sidebar' preferred='yes'>

<b:widget id='HTML1' locked='false' title='BUKU TAMU' type='HTML'/>

<b:widget id='HTML2' locked='false' title='DAFTAR ISI' type='HTML'/>

<b:widget id='HTML3' locked='false' title='SPONSOR' type='HTML'/>

</b:section>

</div>

Tambahkan kode berikut di tengah-tengah kode b/:section> </div> 

<b:section class='sidebar' id='kolom-kiri' preferred='yes'/>
<b:section class='sidebar' id='kolom-kanan' preferred='yes'/>

Sehingga hasilnya akan seperti ini :

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML1' locked='false' title='BUKU TAMU' type='HTML'/>
<b:widget id='HTML2' locked='false' title='DAFTAR ISI' type='HTML'/>
<b:widget id='HTML3' locked='false' title='SPONSOR' type='HTML'/>
</b:section>
<b:section class='sidebar' id='sidebar-kiri' preferred='yes'/>
<b:section class='sidebar' id='sidebar-kanan' preferred='yes'/>
</div>

Simpan template sobat.

Sekarang menuju ke Rancangan/Tata Letak. bila berhasil, maka akan muncul 2 kolom dibawah sidebar yang tadinya hanya ada 1 kolom sidebar saja.   

Seperti Screenshot dibawah ini :

Selamat mencoba. Semoga sukses dan bermanfaat.

Credit

Backlink Please..!!

URL

Code For Forum

HTML Code <a href='http://heric-ajha.blogspot.com/2012/09/membuat-sidebar-dua-kolom_18.html' target='_blank'>Membuat Sidebar Dua Kolom</a>

Artikel terkait :