Cara membagi header menjadi 2 kolom elemen

Hai sobat blogger!!!  Buat yang suka permak blog, ni ane kasih satu tips lagi buat sobat blogger. Kali ini ane akan kasih tahu bagaimana cara membuat header blog anda  menjadi berkepala dua (Hi... ngeri dengernya..) 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
Semoga membantu!!

Ditulis Oleh : christian angkouw ~ Cara Bikin Blog

Christian angkouw Sobat sedang membaca artikel tentang Cara membagi header menjadi 2 kolom elemen. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya

:: Get this widget ! ::

7 comments

mantaps gan, ane coba di blog yang lain dulu. makasih infonya :f:

ane kok gak ketemu kode yang pertama??? :l: :e: :z: :y: :w: gimana tuh gan? :x: :V: :G:

15:48:00

@Andry Surya wah gan rumit bener template blogmu.. klo ane bole kasih saran, sobat bisa gunakan template yang strukturnya mirip seperti minima.. karna mudah editnya..

mantap nih!!! makasih yah infonya gan

Thanx sob atas info nya,,
http://salemharp.blogspot.com/

thanks sob,
ditunggu kunjungannya
http://tentangdotcom.blogspot.com

Kalau header jadi 2 kolom, apa gak maruk tuh bro? :D

Poskan Komentar

Silahkan tinggalkan komentar sobat dan dapatkan backlink satu arah langsung ke blog sobat dengan widget top komentator yang saya pasang di sidebar blog ini. Caranya dengan menjadi pemberi komentar terbanyak di blog ini, tapi mohon jangan Nyepam ya..! Komentar dengan menyertakan LINK / ANCHOR TEXT atau promosi produk tertentu akan saya hapus karena blog ini bukan tempat untuk mempromosikan produk yang dijual di blog anda.