Menambah 3 kolom dibawah header

Memasang berbagai macam widget di blog memang membuat blog ramai dan kelihatan menarik, tapi ruang sidebar untuk blog kita terbatas bila kita hanya terus menambah widget tanpa menyeimbangi dengan menambah kolom baru alhasil blog kita malah tak rapi atau acak-acakan, nah untuk mengatasi hal tersebut kita bisa menambahkan kolom baru kedalam blog kita misalnya dibawah header atau bisa juga menambahkan 3 kolom diatas footer, nah kali ini kita akan menambahkan 3 kolom bawah header.

berikut caranya :

1. Login ke blogger
2. Pada dasboard klik Rancangan
3. Klik Edit HTML
4. Silahkan cari kode ]]></b:skin>
Letakkan kode berikut diatas kode ]]></b:skin>

/* 3kolom-atas
---------------------------- */

#3kolom-atas {
width: 930px;background:#666666;
position: relative;display:inline;
clear:both;
margin:0 auto 0;
color:#000;
float: left;
padding:10px;
}

#kiri-atas {
width: 290px;
float: left;display:inline;
margin:10px 5px 0 5px;
padding:5px
}
#tengah-atas {
width: 280px;
float: left;
margin:10px 5px 0;
padding:5px
}
#kanan-atas {
width: 290px;
float: left;display:inline;
margin:10px 5px 0;
padding:5px
}

5. Selanjutnya cari kode dibawah ini!

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='JUDUL BLOG KAMU (Header)' type='Header'/>
</b:section>
</div>

6. Jika sudah ketemu letakkan kode HTML berikut dibawah ini diatas kode tadi!

<div id='3kolom-atas'>
<b:section class='3kolom-atas' id='kiri-atas' preferred='yes' showaddelement='yes'>
</b:section>
<b:section class='3kolom-atas' id='tengah-atas' preferred='yes' showaddelement='yes'>
</b:section>
<b:section class='3kolom-atas' id='kanan-atas' preferred='yes' showaddelement='yes'>
</b:section>
</div>

7. Klik simpan template

Keterangan :
Jika template sudah menggunakan menu navbar letakkan kode HTML (Langkah no 6) dibawah kode navbar, kamu bisa mencari kode navbar dibagian bawah kode header  Atau jiika bingung letakkan kode langkah no.6 dibawah  <div id='content-wrapper'>
Perhatikan kode berwarna merah silahkan ubah sesuai dengan lebar kolom template kamu dan masing-masing kolom juga harus disesuaikan agar tidak saling bertabrakan, untuk warna hijau yaitu kode untukwarna background widget.
Semoga berhasil!

<a href="http://ngocop16.blogspot.com/2012/01/menambah-3-kolom-dibawah-header.html">Menambah 3 kolom dibawah header</a>

Share this article :