Cara Membagi Dua Kolom Header

Jika anda ingin membagi dua kolom header, coba buat dulu di blog percobaan anda. Kan sayang kalau blog anda jadi berantakanl nantinya. Untuk membagi dua kolom header, Silahkan ikuti langkah – langkah berikut :Jika anda ingin membagi dua kolom header, coba buat dulu di blog percobaan anda. Kan sayang kalau blog anda jadi berantakanl nantinya. Untuk membagi dua kolom header, Silahkan ikuti langkah – langkah berikut :

1. Sign in di blogger dengan id anda.
2. Klik Layout.
3. Klik Tab Elemen Halaman.
4. Lihat dulu Elemen Header Anda.
5. Jika sudah dilihat, Klik Tab Edit HTML, lihat ke bagian kode CSS, Cari kode seperti ini :



<div align="left"> /* Header
===================================
*/
#header-wrapper {
width:900px;
margin:0
auto 0px;
background:$bgheadercolor url(Masukkan Url Image Anda Disini) no-repeat top center;
height:190px;
}

#header-inner {

width:900px;
background-position: center;
margin-$startSide: auto;
margin-$endSide: auto;
}

#header {
margin: 0px;
text-align:
left;
color:$pagetitlecolor;
}




6. hapus kode di atas, lalu ganti dengan kode berikut ini :





/* Header
===================================
*/

#header-wrapper {
width:900px;
margin:0 auto 0px;
background:$bgheadercolor url(Masukkan Url Image Anda Disinis) no-repeat top center;
height:190px;
}

#head-inner {
width:600px;
background-position: left;
margin-left: auto;
margin-right: auto;
float:left;
}

#header {
margin: 0px;
text-align: left;
color:#ffcc66;
}

#r_head{
width:300px;
float:left;
padding-top:10px;
}





7. Coba Scroll ke bawah, Cari kode seperti ini :
br>

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


8. Ganti Kode Tersebut dengan kode dibawah ini :

<div id='header-wrapper'>
<div id='head-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>
</b:section>
</div>
<div id='r_head'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div>


9. Klik Tombol Simpan Perubahan.

10. Selesai.




Silahkan Lihat Di Element Page Blog Anda. Sudah Terbagi dua apa belum headernya ? Kalau Sudah Mungkun Anda Berhasil, Tapi kalau tidak, Silahkan Coba Lagi Ya. Nantikan Artikel Selanjutnya Dari Rido Meivaldi.