Cara Membagi Header Menjadi Dua Bagian

Jika tampilan blog anda cuma memiliki satu header, tapi anda pengen merubahnya. Kali ini saya akan share bagaimana cara membagi header menjadi dua bagian.



Sebagai contoh gambar berikut

untuk membuatnya anda sedikit menambah kan kode css ke dalam tamplate. Berikut cara membagi header menjadi dua bagian :

- Log in dulu ke blogger
- Tata letak
- Edit HTML
- Download tamplate anda untuk mengatasi hal-hal yang tak diinginkan
- Jangan lupa kasih tanda centang  " Expand Template Widget " di kotak kecil kanan atas
- Kemudian cari kode

#header-wrapper {

width:660px;

margin:0 auto 10px;

border:1px solid $bordercolor;

}

#header-inner {

background-position: center;

margin-left: auto;

margin-right: auto;

}

#header {

margin: 5px;

border: 1px solid $bordercolor;

text-align: center;

color:$pagetitlecolor;

}

- Kemudian hapus dan ganti dengan kode di bawah ini

#header-wrapper {

width:930px;

margin:0 auto 0px;

background:#38610B;

height:180px;

}

#head-inner {

width:500px;

background-position: left;

margin-left: auto;

margin-right: auto;

float:left;

}

#header {

margin: 0px;

text-align: left;

color:#ffcc66;

}

#r_head{

width:430px;

float:left;

padding-top:10px;

}

- Kemudian cari kode

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

Hapus dan ganti dengan kode

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

- Kemudian save tamplate anda dan lihat hasilnya.