Pada blog anda yang memiliki template yang hanya 1 kolom tentu membuat anda ingin menambah jumlah kolom untuk memasang banner atau widget agar tampilan blog anda menarik di mata pengunjung.Bagaimana langkah menambah kolom widget yang kali ini dikhususkan di bagian header tepat di bawahnya
Penerapan untuk menambah kolom di bawah header anda bisa menambah 1,2 atau 3 kolom sesuai dengan keinginan berapa banyak widget atau banner yang ingin di pasang.Berikut tutorial lengkapnya bisa anda terapkan di bawah ini.
Cara Membuat Kolom Widget di Bawah Header pada Blog:
1. Login ke akun Blogger sobat.
2. Masuk pada bagian Template.
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. Kemudian cari kode <div id='main-wrapper'> atau <div id='main-wpr'> atau sejenisnya. Setiap template memiliki elemen yang berbeda. Namun pada umumnya ditulis dengan kode <div id='main-wrapper'>. Sobat harus berusaha mencari elemen ini jika memang kode elemen pada template sobat berbeda dengan kode elemen yang saya contohkan.
6. Pilihlah beberapa kode di bawah ini dan kemudian 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>
Keterangan, untuk ukuran sobat bisa ubah pada nilai "width".
7. Klik simpan, selesai dan sobat lihat hasilnya.
Cukup sekian ulasan saya tentang Cara Membuat Kolom Di Bawah Header.