Cara Membagi Sidebar Menjadi 2 Kolom,

Cara Membagi Sidebar Menjadi 2 Kolom – Pada postingan saya Kali ini, saya akan memberikan sedikit tips Cara Membagi Sidebar Menjadi 2 Kolom, maksud dari postingan ini adalah kita akan membuat sidebar baru ( sidebar 2 kolom ) dibawah sidebar utama. Karena biasanya terkadang tiap template ada yang hanya mempunyai 1 kolom sidebar saja.

Agar lebih jelasnya, silahkan lihat contoh gambar dibawah ini ( 2 kolom sidebar)

Berikut ini langkah-langkah Cara Membagi Sidebar Menjadi 2 Kolom ; 

1. Silahkan Login terlebih dahulu.
2. di Dashboard , silahkan pilih Layout --> klik Edit HTML
3. Sebelum melanjutkan kelangkah berikutnya, ada baiknya Klik Download Full Template terlebih dahulu (Langkah ini penting dilakukan untuk backup semua data, bila nanti terjadi kesalahan, kita bias download template tadi untuk mengembalikan seperti semula.
4. Setelah itu, silahkan cari kode  ]]></b:skin>
5. Jika sudah ketemu, Copy kode dibawah ini kemudian  simpan diatas kode tadi atau ]]></b:skin> 

<textarea cols="30" rows="5">
#lsidebar-wrapper {
float: left;
margin:0 10px 0 5px;
padding:0;
width:150px;
display:inline;
}
.lsidebar {
line-height: 1.5em;
}
.lsidebar .widget {
background: #FFFFFF;
float:left;
width: 140px;
margin: 0 0 10px 0;
padding: 10px;
border:1px solid #f1f1f1;
}
#rsidebar-wrapper {
float: right;
margin-right:10px;
padding:0;
width:140px;
}
.rsidebar {
line-height: 1.5em;
}
.rsidebar .widget {
background: #FFFFFF;
float:right;
width: 130px;
margin: 0 0 10px 0;
padding: 10px;
border:1px solid #f1f1f1;
}
</textarea>

Catatan; silahkan ganti kode warna Kuning sesuai dengan selera sobat masing-masing

Setelah itu, kita lanjut dengan mencari kode seperti di bawah ini atau yang mirip-mirip seperti kode dibawah ini :  

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

Setelah ketemu kode tersebut diatas pada template anda sisipkan kode dibawah ini diantara </b:section>
</div>

Maka hasilnya seperti dibawah ini :

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

<div id='lsidebar-wrapper'>
<b:section class='lsidebar' id='lsidebar' preferred='yes'>
</b:section>
</div>
<div id='rsidebar-wrapper'>
<b:section class='rsidebar' id='rsidebar' preferred='yes'>
</b:section>
</div></div>

Mungkin tiap template berbeda untuk kode di bawah ini, caranya anda menyisipkan kode tambahan diantara kode </b:section>    </div>

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

Bla ........bla .............bla ......... dst
</b:section>

Sisipipkan  kode disini ..............
</div> 

 Setelah itu silahkan klik Save Template dan liat hasilnya dengan cara klik Elemen Laman pada dashboard Sobat seperti contoh gambar di atas.

Semoga postingan Cara Membagi Sidebar Menjadi 2 Kolom ini dapat bermanfaat bagi Sobat.