Membuat Header Menjadi 2 Kolom

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!!

Tweet