Cara Menambah 3 Kolom dibawah Header

InfoDari - Cara Menambah 3 Kolom dibawah Header

Silahkan Ikuti Tutorial berikut ini::

• Login ke Blogger
• Pada Dasboard klik Rancangan
• Klik Edit HTML dan klik "Expand Widget Template"
• 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
}

• Selanjutnya Cari Kode berikut 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>

• 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>

• Simpan Template Anda.

Keterangan :
Jika template sudah menggunakan menu navbar letakkan kode HTML (Langkah no 6) dibawah kode navbar, Anda 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 Anda dan masing-masing kolom juga harus disesuaikan agar tidak saling bertabrakan, untuk warna hijau yaitu kode untukwarna background widget.
Semoga berhasil!