Cara Membuat Sidebar Blog Menjadi 2 Kolom

Di postingan hari ini Mas Noufal akan mengulas tentang Cara Membuat Sidebar Blog Menjadi 2 Kolom.  Langsung aja yaw sob....

maka nanti di page layout kan menjadi seperti ini :

 

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.

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

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

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

   
   
4. Jika sudah tinggal Save Template

 Keterangan :

• • Jika ingin meletakkan kedua bagian sidebar ini di atas sidebar yang utama, sobat tinggal memasang kode no. 6  di atas kode No. 5 .
  • 
    
    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.
  • 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.