Membuat Sidebar Dua Kolom atau membagi sidebar menjadi 2 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. :

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

   #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;
   }

   (Kode warna merah bisa diatur sesuai dengan selera kita)

   Atau bisa juga disimpan setelah kode dibawah ini, silahkan aja pilih yg mana suka

   /*- Sidebar -*/

   #sidebar {
      float: left;
      width: 320px;
      margin: 6px 0px 5px 0px;
      padding:0px;
      line-height: 18px;
      display: inline;
       }

   
   
5. Setelah langkah- diatas, dilanjut dengan mencari kode seperti di bawah ini atau yang mirip2 gitu :
   

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

   
   
6. Setelah ketemu hapus dulu kode </div> nya, lalu copy kode berikut dan letakkan di bawahnya.
   
   
   
   

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

   Jadi kode tersebut akan tampak seperti 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>

   
   
7. Jika sudah tinggal Save Template

Beberapa catatan :

1. Jika ingin meletakkan kedua bagian sidebar ini di atas sidebar yang utama, sobat tinggal memasang kode no. 6  di atas kode No. 5 .
2. 
   
   Pada point 6, harus menghapus kode </div> ( sebetulnya kode ini dipindahkan ke paling bawah di point 6, lihat aja kodenya ada 2), ini dimaksudkan agar sidebar yang ditambahkan akan tetap berada ditempatnya, soalnya kalau gak gini,  jika postingan kita lebih pendek dari sidebar, kadang2 sidebar baru itu suka  berada di bawah posting, kan gak lucu ya.
3. Untuk menyesuaikan lebar sidebar baru, lihat sidebar utamanya. Misalnya sidebar utama lebarnya 300 px, maka lebar sidebar 1 dan 2 bisa sekitar 145, sehingga masih ada sisa 10 px untuk batas atau margin.

Selamat mencoba utak-atik template dalam Membuat Sidebar Dua Kolom semoga sukses.


By: www.modaltekun.com