Rabu, 21 November 2012

Cara Membuat Dua Buah Header

CARA MEMBUAT DUA BUAH HEADER
Langsung saja nggak pake basa-basi....

1. Log in Blog
2. Edit HTML
3. Cari Kode Berikut:

/* Header
----------------------------------------------- */
#header-wrapper {
width:950px;
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;
}
4. Jika Sudah Ketemu, Gantilah dengan kode dibawah ini:
/* Header
----------------------------------------------- */
#header-wrapper {
width:1000px;
margin:0 auto 0px;
background:#ffff;
height:100px;
}
#header-satu {
width:500px;
background-position: left;
margin-left: auto;
margin-right: auto;
float:left;
}
#header {
margin: 0px;
text-align: left;
color:$pagetitlecolor;
}
#header_dua{
width:500px;
float:left;
padding-top:5px;
}
6. Langkah selanjutnya carilah kode berikut:
<div id='header-wrapper'>
7. Jika sudah ketemu silahkan copy kode dibawah ini dan paste bawahnya
<div id='header-satu'>
8. langkah berikutnya, silahkan copy kode dibawah ini:
<div id='header_dua'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div>
 9. kemudian paste dibawa penutup header satu. kira-kira seperti ini:
<div id='header-wrapper'>
<div id='header-satu'>
<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_dua'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div>
10. Silahkan rubah sendiri ukuran lebarnya (yang saya tandai warna merah) sesuai dengan pemikiran anda
11. Save template
Cara Membuat Dua Buah Header