Minggu, Maret 31

Membuat 2 Kolom/Element di Bawah Sidebar Utama

Bagi sobat yang merasa tidak puas dengan jumlah kolom sidebar yang hanya satu kolom saja, Dan sobat menginginkan agar terdapat 2 kolom dibawah sidebar utama seperti gambar disamping. Tentu sobat bisa membuatnya, Cara membuatnya cukuplah mudah, Berikut langkah-langkah cara membuatnya :
1. Login ke blogger, pergi ke Template > Edit HTML > Lanjutkan > centang Expand Template.
2. Cari kode seperti di bawah ini, semua template blog kodenya berbeda-beda.

#sidebar-wrapper {
float : right;
width : 321px;
margin : 0;
padding : 0;
}
3. Tambahkan kode berikut di bawah kode diatas

#sidebar-kiri {
width : 160px;
float : left;
margin : 0;
padding : 0;
border-right : 1px solid #ccc;
}
#sidebar-kanan {
width : 160px;
float : right;
margin : 0;
padding : 0;
}
4. Cari kode seperti ini

<div id='sidebar-wrapper'>
      <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML1' locked='false' title='Join & Get Update' type='HTML'/>
.........................................................
<b:widget id='HTML2' locked='false' title='Info Site' type='HTML'/>
.........................................................
<b:widget id='HTML3' locked='false' title='Friend blog' type='HTML'/>
........................................................
</b:section>
   </div>
5. Tambahkan kode berikut di bawah kode </b:section>

<b:section class='sidebar' id='sidebar-kiri' preferred='yes'/><b:section class='sidebar' id='sidebar-kanan' preferred='yes'/>
Sehingga Hasilnya Seperti ini

<b:section class='sidebar' id='sidebar-kiri' preferred='yes'/>
<b:section class='sidebar' id='sidebar-kanan' preferred='yes'/>
Sehingga Hasilnya Seperti ini
<div id='sidebar-wrapper'>
      <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML1' locked='false' title='Join & Get Update' type='HTML'/>
<b:widget id='HTML2' locked='false' title='Info Site' type='HTML'/>
<b:widget id='HTML3' locked='false' title='Friend blog' type='HTML'/>
</b:section> <b:section class='sidebar' id='sidebar-kiri' preferred='yes'/><b:section class='sidebar' id='sidebar-kanan' preferred='yes'/>   </div>
6. Pratinjau Terlebih Dahulu jika tidak terjadi error save template sobat dan lihat hasilnya.

Sekarang Pergi ke Rancangan/Tata Letak. bila berhasil, maka akan muncul 2 kolom dibawah sidebar Utama. Selamat Mencoba

Tidak ada komentar:

Posting Komentar

Apabila ada yang kurang jelas, jangan sungkan-sungkan berkomen.
Komentar anda sangat dibutuhkan agar blog ini menjadi lebih baik :)

Berkomentarlah dengan sopan dan diusahakan komentar yang membangun