Untuk melengkapi lengkap tutorial design tamplate yang ada. kali ini SPN coba membahas cara membagi header menjadi dua bagian kolom. biasanya default header kan cuman satu, nah header itu bisa di bagi menjadi dua bagian. coba SOBAT lihat contoh di bawah ini.
- Log in dulu ke blogger
- Tata letak
- Edit HTML
- Download tamplate SOBAT untuk mengatasi hal-hal yang tak diinginkan
- Jangan lupa kasi tanda centang 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 SOBAT dan lihat hasilnya.
2 komentar:
owww...gini toh...panjang nian caranya ommmm
@mujaddid : Dari sononya!!!kodenya gitu...hmmm
Posting Komentar