Selasa, 04 Januari 2011

Cara membagi header blog menjadi dua


wah sebenarnya aku pengen banget ini tutorial aku pasang di blog tapi g sempet jadi
aku posting aja biar ntar kalau nyari g usah susah2 pergi ke blog lain...
kali ini saya akan membahas tentang cara membagi header menjadi dua

oke langsung aja, caranya

Log In ke blog
klik rancangan / layout
Kemudian klik Edit HTML
Cari Kode CSS "Header" yang seperti di bawah ini atau kalau g ada yang mirip aja,

/* Header  */
#header-wrapper {
width:930px;
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;
}

setelah ketemu anda hapus kode di atas dan ganti dengan kode di bawah ini

/* Header */ 
#header-wrapper { 
width:930px;  
margin:0 auto 0px; 
background:#ffff; 
height:180px; 
} 
#header-one { 
width:50%; 
background-position: left; 
margin-left: auto; 
margin-right: auto; 
float:left; 
} 
#header { 
margin: 0px; 
text-align: left; 
color:$pagetitlecolor; 
} 
#header_two{ 
width:50%; 
float:left; 
padding-top:10px; 
}

Keterangan

width:50%; : Adalah lebar nya

Setelah selesai anda cari kode seperti ini

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

Lalu anda tambahkan kode berikut ini diantara kode di atas

<div id='header-one'> 

<div id='header_two'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div>

Dan Hasilnya akan kode di bawah ini.

<div id='header-wrapper'>
<div id='header-one'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Tempat Eksperimen Kecil (Header)' type='Header'/>
</b:section>
</div> 
<div id='header_two'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div>

Setelah selesai anda klik Simpan template dan jika berhasil, anda klik Elemen laman / Tata letak dan lihat, apakah ada elemen di bawah header anda jika ada anda bisa mengisi nya dengan widget atau iklan atau lain2 semoga bermanfaat.