Cara Membagi Header Menjadi Dua

Jumat, 01 Maret 2013

Baiklah sekarang kalau sahabat tertarik dan ingin Membagi Header Menjadi 2 Kolom, berikut langkah langkah yang harus sahabat lakukan.

1. Login ke Akun Blogger

2. Pilih Rancangan

3. Pilih Edit HTML

4. Download terlebih dahulu template sahabat, untuk menghindari dari kesalahan memasukan kode script

5. Centang Expand Widget

6. Selanjutnya silahkan sahabat cari kode yang mirip dengan kode dibawah ini. untuk memudahkan pencarian sahabat bisa menekan tombol Ctrl+F secara bersamaan.

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

Kalau sudah ketemu Ganti kode script diatas dengan kode dibawah ini :

#header {
float:left;
width:35%;
height:120px;
margin: 0px;
border: 0px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
#header2{float:left; width:60%; height:100px}

Selanjutnya silahkan sahabat cari lagi kode dibawah ini :

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

NAMA BLOG Cari sesuai dengan nama blog milik sahabat.

Kalau sudah ketemu silahkan Ganti dengan ode script dibawah ini :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='NAMA BLOG (Header)' type='Header'/>
</b:section>
<b:section class='header' id='header2' maxwidgets='4' showaddelement='yes'/>
<div style='clear:both;'/>
</div>

NB : sahabat bisa menentukan lebar dan tinggi kolom yang akan sahabat buat, dengan mengganti Width:35% dan height:120px

7. Simpan template dan lihatlah hasilnya