Membagi Header Menjadi 2 Kolom...

Okay... postingan kali ini adalah permintaan teman saya Putu Aditya melalui e-mail "bgimn caranya nambah foto di navbar itu...???"... nah oleh karena itu kita lakukan pembagian header terlebih dahulu...

Yeahh... kita langsung aja praktekk...

1. Langkah yang pertama adalah... Login ke blog sobat...

2. Pilih tab Design

3. Setelah itu pilih Edit HTML..

4. Sebelum melanjutkan... lebih baik download terlebih dahulu Templates untuk mengantisipasi kesalahan pada saat pengubahan HTML.

5. Setelah itu cari lah CSS Seperti di bawah ini...

/* Header
===================================
*/
#header-wrapper {
width:900px;
margin:0 auto 0px;
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. Jika sudah ketemu Hapus Kode CSS di atas lalu ganti dengan code CSS yang baru yang ada di bawah ini... ehehe :D

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

#header-wrapper {
width:900px;
margin:0 auto 0px;
no-repeat top center;
height:190px;
}

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

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

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

Nah kita sudah setengah jadi nih sobat heheh :D

7. Langkah selanjutnya adalah coba cari kode seperti berikut

<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. Hapus kode di atas dan ganti dengan kode di bawah 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 Simpan atau Save
10. Selesai dehhh :D

Wahh,, udah tau kan gimana caranya membagi header menjadi dua hehehhe wkwkwk.... nah kalau ada yang mau ditanyakan silahkan yaa sobat... heheh :D

Regards, ADITechnov