Membuat Side Bar Dua Kolom di Blogspot

Bagi anda yang ingin mengetahui bagaimana cara Membuat Side Bar Dua Kolom di Blogspot seperti gambar di bawah ini:



Berikut adalah langkah-langkanya:

1. Login dengan akun anda ke Dashboard , kemudian pilih Layout --> Edit HTML
2. Klik Download Full Template, ini penting sebagai backupan template anda, jika nanti terjadi hal-hal yang tidak diinginkan...wah bahasanya.... : ) hehe.... template anda bisa direstore kembali seperti semula...
3. Kemudian anda cari kode ini ]]></b:skin>
4. Lalu copy kode di bawah ini, kemudian anda 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 dengan warna merah bisa anda atur sesuai dengan selera anda)

   Atau bisa juga anda simpan setelah kode di bawah ini, silahkan pilih sesuai selera
   /*- Sidebar -*/
   #sidebar {
   float: left;
   width: 320px;
   margin: 6px 0px 5px 0px;
   padding:0px;
   line-height: 18px;
   display: inline;
   }
   
5. Setelah langkah diatas, kemudian dilanjutkan dengan mencari kode seperti di bawah ini atau yang nampak mirip2 :
   
   <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 anda 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 selesai semua, tinggal anda Save Template sekarang.
8. Silahkan anda lihat hasilnya dengan cara click Page Elements.
   
   
   Sekarang anda sudah berhasil Membuat Side Bar Dua Kolom di Blogspot...
   
   Semoga membantu.............

Ditulis oleh Yayan Kurniawan, Sabtu, 05 Mei 2012 - Rating: 4.5

Judul : Membuat Side Bar Dua Kolom di Blogspot
Deskripsi : Bagi anda yang ingin mengetahui bagaimana cara Membuat Side Bar Dua Kolom di Blogspot seperti gambar di bawah ini: Berikut adalah langk...

Bagikan ke

Facebook Google+ Twitter