Membagi Header menjadi dua kolom

Anda mungkin pernah melihat blog orang lain yang pada sebelah kanan headernya terdapat iklan ataupun link bisnis afiliasi. Penasaran ingin membuatnya???. Caranya tidak begitu sulit kok... ikuti saja langkah-langkah berikut:

1. Login ke blogger dengan ID anda dong tentunya, jangan ID saya..ntar blog saya jadi berantakan lagi.

2. Klik Layout.

3. Klik tab elemen Halaman, maka anda akan melihat tampilan format kolom header anda seperti ini :

4. Jika sudah di lihat, kemudian klik tab Edit HTML, lihat ke bagian kode CSS, lalu cari kode seperti ini :

/* Header
===================================
*/
#header-wrapper {
width:900px;
margin:0 auto 0px;
background:$bgheadercolor url(http://ahom24.googlepages.com/magazine_01.jpg) no-repeat top center;
height:190px;
}

#header-inner {
width:900px;
background-position: center;
margin-$startSide: auto;
margin-$endSide: auto;
}

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


5. Hapus kode di atas, lalu ganti dengan kode berikut ini :

/* Header
===================================
*/

#header-wrapper {
width:900px;
margin:0 auto 0px;
background:$bgheadercolor url(http://ahom24.googlepages.com/magazine_01.jpg) no-repeat top center;
height:190px;
}

#head-inner {
width:600px;
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;
}

6. Coba scroll ke bagian bawah, dan temukan kode seperti ini :

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

7. Hapus kode di atas, lalu ganti dengan kode di bawah ini :

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

8. Klik tombol Simpan Perubahan.
9. Simpan

Untuk melihat hasilnya, silahkan anda klik lagi tab Elemen Halaman dan anda akan melihat format kolom header anda menjadi seperti ini :


Source:http://www.wandihouse.co.cc/2009/07/membagi-dua-kolom-header.html

Bookmark, Share and Promote!
Digg This! | Bookmark on del.icio.us | Stumble It | Add to Technorati Favorites |
Share on Facebook | I'm reading: Membagi Header menjadi dua kolomTweet this! |
Get more about me!
Subscribe to Belajar Bisnis Online! | Follow me on Twitter! |