Cara Menambah Kolom pada Header

Pengen punya Header seperti punya ku ini?????. Caranya gampang koq, tinggal otak-atik HTML kamu trus jadi deh. Nah penasaran gimana caranya, nih aku kasih tahu.


1. Login ke Blogger
2. Trus pilih menu Layout>Edit HTML jangan mencentang kotak Expand Widget
3. Cari kode berikut

#header-wrapper {
width:960px;
margin:0 auto 0px;
no-repeat top center;
height:190px;
}

Kalo ga ada cari yang hampir mirip aja. Kalo Dulu punyaku hanya seperti ini

#header{
width:960px;
margin:0 auto 0px;
background; $bgPageColor$
}

4. Trus ganti kode tersebut dengan kode berikut ini

#header-wrapper {
width:960px;
margin:0 auto 0px;
no-repeat top center;
height:190px;
}

#head-inner {
width:650px;
background-position: left;
margin-left: auto;
margin-right: auto;
float:left;
}

#header {
margin: 0px;
text-align: left;
color:#ffcc66;
}

#r_head{
width:300px;
float:left;
padding-top:10px;
}

5. Trus cari kode berikut

<b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>

nah kalo persis diatasnya masih ada kode header kamu select sekalian sampai pada kode di bawahnya yang seperti ini

</b:section>
</div>
</div>

6. Ganti Kode tersebut seperti ini

<div id='header-wrapper'>
<div id='head-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='Tips dan Trik Bisnis Internet Gratis (Header)' type='Header'/>
</b:section>
</div>
<div id='r_head'>
<b:section class='header' id='header2' preferred='yes'>
<b:widget id='HTML3' locked='false' title='' type='HTML'/>
</b:section>
</div>
</div>

7. Terus Simpan

Untuk melihat hasilnya pilih menu layout>Page Elements

Related post by Category