Membuat 3 Kolom Horisontal Dibawah Header

Dalam postingan kali ini akan dibahas bagaimana membuat 3 widget atau kolom horisantal dibawah header blog, meski pada tutorial sebelumnya pernah dibahas disini, akan tetapi banyak keluhan dari pengunjung blog yang tidak berhasil. setelah saya koreksi ternyata tidak semua template berhasil menggunakan tutorial yang sebelumnya.

Untuk itu, tutorial ini sangatlah simple untuk membuat 3 kolom horisontal dibawah header blog. Langkahnya:

• Masuk ke akun Blogger Anda;
• Klik tombol Rancangan dan pilih Edit HTML;
• Cari kode ]]></b:skin>
• Jika ketemu copy paste kode dibawah ini sebelum ]]></b:skin> 

#header-column-divide {
clear:both;
}
.header-column {
padding: 10px;
}
#header-column-divide {
clear:both;
}
.header-column {
padding: 10px;
}

• Selanjutnya cari kode seperti ini :

<div id='header-wrapper'>
<b:section class='footer' id='footer'/>
</div>

• Sudah ketemu belum? jika ketemu, hapus kode <b:section class='footer' id='footer'/> dan ganti kode berikut

<div id='header-column-divide'>
<div id='header1' style='width: 30%; float:left;
margin:0; text-align:left;'>
<b:section class='header-column' id='col1'
preferred='yes' style='float:left;'/>
</div>
<div id='header2' style='width: 40%; float: left;
margin:0; text-align: left;'>
<b:section class='header-column' id='col2'
preferred='yes' style='float:left;'/>
</div>
<div id='header3' style='width: 30%; float: right;
margin:0; text-align: left;'>
<b:section class='header-column' id='col3'
preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

• Simpan dan lihat hasilnya.

Semoga berhasil dan jangan lupa klik + 1 sebagai rasa terima kasih anda pada Kang Onkatas tutorial cantik ini. Terima kasih atas dukungan anda atas blog ini.