Tanya: Bagaimana Cara Membuat Kolom Widget di Bawah Header Blog?

Butuh tempat widget untuk memasang iklan di blog Anda tapi tidak ada tempatnya? Atau tempat widget kurang strategis? Kita tahu bahwa widget di bawah header blog adalah tempat terbaik dan strategis untuk memasang iklan.

Nah, pada kesempatan kali ini saya akan berbagi tentang Bagaimana Cara Membuat Kolom Widget di Bawah Header Blog. Berikut adalah langkah-langkahnya.

Cara Membuat Kolom Widget di Bawah Header pada Blog:

1. Login ke akun Blogger sobat.
2. Masuk pada bagian Template. Jangan lupa untuk mem-backup template sebelum pengeditan.
3. Cari kode ]]></b:skin>. Gunakan Tombol ctrl+F
4. Masukan kode berikut diatas kode ]]></b:skin>.

#underheader { clear:both; } .underheader-widget {
padding:0px 10px 10px 10px; }

5. Lalu cari kode <div id='main-wrapper'> atau <div id='main-wpr'> atau sejenisnya. Setiap template memiliki elemen yang berbeda-beda. Tapi pada umumnya ditulis dengan kode <div id='main-wrapper'>. Anda harus berusaha mencari elemen ini terlebih dulu jika memang kode elemen pada template Anda berbeda  dengan kode elemen yang saya contohkan.
6. Pilihlah beberapa kode di bawah ini lalu letakan di atas kode <div id='main-wrapper'> atau <div id='main-wpr'>.

• Satu Kolom Widget.

<div id='underheader'>
<div id='box1' style='width: 100%; float: left;
margin:0; text-align: left;'>
<b:section class='header' id='col1' preferred='yes'
style='float:left;'/>
</div>
</div>

• Dua Kolom Widget.

<div id='underheader'>
<div id='box1' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='header' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='header' id='col2' preferred='yes' style='float:left;'/>
</div>
</div>

• Tiga Kolom Widget.

<div id='underheader'>
<div id='box1' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='header' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='header' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='box3' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='header' id='col3' preferred='yes' style='float:left;'/>
</div>
</div>

7. Klik simpan, selesai.