Buat sobat Hots WEB yang suka permak blog, ni saya kasih satu tips lagi buat temen-temen,
Kali ini saya akan kasih tahu bagaimana cara membuat header blog anda menjadi berkepala dua lebih tepatnya membuat header menjadi 2 kolom. Ini dia Tutorial nya!!!
1. Pertama sobat login ke akun blog sobat
2. Klik rancangan--> edit HTML
3. Jangan centang kotak expand template widget
4. Cari kode css yang mirip di bawah ini:
#header-wrapper {
width:900px;
margin:0 auto 0px;
background:$bgheadercolor;
height:190px;
}
#header-inner {
width:900px;
background-position: center;
margin-$startSide: auto;
margin-$endSide: auto;
}
#header {
margin: 0px;
text-align: left;
color:$pagetitlecolor;
}
5. Ganti kode di atas dengan kode berikut.
#header-wrapper{
width:980px;
padding:20px 0 0 0;
background:#000000;
margin:0 auto;
border:;}
#header-inner{
background-position:center;
margin-left:auto;
margin-right:auto}
#header{
float:$startSide;
width:400px;
margin:0 auto;
border:0px solid $bordercolor;
text-align:left;
color:$pagetitlecolor
}
#header2{
float:$endSide;
width:400px;
margin:0 auto;
text-align:left;
}
ket : width nya bisa di ubah ke PERSEN (%)
6. Scroll ke bagian bawah, dan temukan kode yang mirip seperti ini
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='judul blog (Header)' type='Header'/>
</b:section>
Fokuskan pencarian pada kode <div id='header-wrapper'>
7. Ganti kode di atas dengan kode berikut:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='judul blog(Header)' type='Header'/>
</b:section>
<b:section class='header' id='header2' maxwidgets='1' showaddelement='yes'/>
<div style='clear:both;'/>
</div><!-- end header-wrapper -->
8. Klik simpan perubahan
9. Langkah terakhir, klik ELEMEN LAMAN dan lihat bila sudah menjadi 2 kolom.
Selesai
Selamat mencoba & semoga dapat membantu anda!!
