Menambah 2 Kolom Dibawah Sidebar Utama pada Blogger Template

proBlogiz

---

Ketersediaan  ruang atau space di blog sangat urgen bagi Anda yang menggunakan banyak widget Blogger atau kebutuhan ruang bagi penempatan adsense, atau iklan lainnya di blog /web. Bagi Anda yang menggunakan template blogger dengan 2 kolom dan satu sidebar, tentu ini menjadi permasalahan. Dengan hanya mengandalkan 1 sidebar utama tentu ini kurang efektif dan bagi Anda yang ingin memprioritaskan impressions atau tampilan adsense , iklan PPC atau ads lainnya lebih optimal, tidak diragukan lagi Anda butuh "more space".

Menambah 2 Kolom di Bawah Sidebar Utama, mungkin jawaban permasalahan kebutuhan ruang yang cukup dan profesional. Dengan cukup menambah beberapa kode CSS dan kode HTML di dalam template blogger Anda, maka membuat tambahan 2 elemen kolom di bawah sidebar utama dapat terwujud.

Caranya? Mudah dan sederhana!! Ikuti langkah-langkahnya menambah 2 Elemen Kolom di Bawah Sidebar Utama di template blogger

Langkah Menambah 2 Kolom di Bawah Sidebar Utama

1. Menambahkan kode CSS di Template

Masuk Blogger > pilih Template > edit HTML
Back up template > Jangan Cek "Expand Widget Templates" box
Tekan Control+F >> cari kode #sidebar-wrapper atau #sidebar-wrap

• mungkin bisa berbeda kode sidebar utama di template Anda, yang terpenting Anda harus tahu lebar / width sidebar utama

Saya ambil contoh template yang saya gunakan, kode CSS sidebar sebagai berikut :

#sidebar-wrapper {
float:right; 
width:320px; 
padding:5px;
margin:0px;
}

Kemudian tambahkan kode CSS baru berikut setelah kode diatas :

#kolom-kiri {
width:160px;
float:left;
padding:5px;
}

#kolom-kanan {
width:150px;
float:right;
padding:5px;
}

• lebar kolom-kanan dibuat width:150px; karena 10 px digunakan untuk ukuran margin kolom

Finally kode CSS keseluruhan akan seperti berikut ini :

#sidebar-wrapper {
float:right;
width:320px;
padding:5px;
margin:0px;
}

#kolom-kiri {
width:160px;
float:left;
padding:5px;
}

#kolom-kanan {
width:150px; 
float:right;
padding:5px;
}

Pada tahap ini, Anda selesai menambah kode CSS untuk 2 kolom di bawah sidebar utama. Selanjutnya memasang kode HTML di body template Anda.

2. Memasang kode HTML 2 Kolom Baru di Template

Pertama temukan kode html untuk sidebar utama, kurang lebih seperti dibawah ini:

 <div id='sidebar-wrapper'>
       <b:section class='sidebar' id='sidebar' showaddelement='yes'>
<b:widget id='HTML4' locked='false' title='' type='HTML'/>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
</b:section>....
</div>

Tambahkan kode HTML kolom baru berikut ini, tepat diatas kode  </div>

<b:section class='sidebar' id='kolom-kiri' preferred='yes'/>
<b:section class='sidebar' id='kolom-kanan' preferred='yes'/>

Sehingga kode keseluruhan menjadi seperti berikut :

     <div id='sidebar-wrapper'>
       <b:section class='sidebar' id='sidebar' showaddelement='yes'>
<b:widget id='HTML4' locked='false' title='' type='HTML'/>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
</b:section>
<b:section class='sidebar' id='kolom-kiri' preferred='yes'/>
<b:section class='sidebar' id='kolom-kanan' preferred='yes'/>
</div>

Lihat Pratinjau, jika OK maka Save Template Anda

Tahap membuat 2 kolom elemen dibawah sidebar utama telah selesai Sob!!
Jika Anda lihat layout template di Tata Letak Blogger, 2 kolom elemen tersebut seharusnya muncul di bagian bawah sidebar utama, just like this :

2 kolom yang ditambahkan dibawah sidebar utama

Semoga artikel Menambah 2 Kolom di Bawah Sidebar pada Blogger Template ini bisa membantu Anda, kolom seperti ini sangat efektif digunakan untuk penempatan adsense Anda.

Keep Spirit n Good Luck!!!