Cara Membelah Header ~ Ukhrazone

Cara Membelah Header

1/23/2010 1 comment

Kita sering melihat blog - blog yang headernya sudah terbagi dua, sehingga disebelahnya satu lagi bisa diletakan widget untuk search engine, banner atauun widget lainnya. Begini ni struktur page elementsnya..

Oke deh, kalo tertarik langsung aja kelangkah - langkahnya..

1. Login ke Akun blog kamu
2. Masuk ke Layout/Tata Letak
3. Klik Edit HTML
4. Backup template kamu terlebih dahulu dengan mengklik Download full template
5. Cari kode CSS seperti di bawah ini

#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;
}

6. Hapus dan ganti dengan kode CSS di bawah ini

#header-wrapper {
width:930px;
margin:0 auto 0px;
background:#38610B url(http://i33.tinypic.com/sw6cfo.jpg) no-repeat top center;
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;
}

7. Kemudian 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='Test Blog (Header)' type='Header'/>
</b:section>
</div>

8. Hapus 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>