Just another WordPress.com site

>

Apa sih fungsinya membagi header blog menjadi dua kolom…? Mungkin ini adalah salah satu pertanyaan yang sering terlontarkan bagi mereka yang ingin membagi header blognya menjadi dua kolom.. Anggap saja seperti ini, ketika kita menambahkan elemen didekat header atau di bagian sidebar terkadang kita sering mengalami masalah yaitu kolom header menjadi hilang atau bergeser dari tempat di akibatkan adanya elemen baru di dekat header ataupun diatas dan dibawah header. .

Nah, untuk mengatasi masalah tersebut langkah baiknya kalau kita membagi header menjadi dua kolom, banyak fungsi yang bisa kita dapatkan ketika kita mempunyai dua header didalam blog, salah satunya kita dapatkan menambahkan photo kita didalam kolom header tersebut sebagai identitas kita sebagai pemilik blog. Nah untuk mebuat header menjadi dua kolom, ikuti langkah-langkah berikut ini :
1. Login ke blog milik sobat
2. Klik Rancangan
3. Klik Edit HTML
4. Kemudian cari kode css berikut ini:
/*Header
===================================
*/#header-wrapper{
width:900px;
margin:0 auto 0px;
background:$bgheader color url(http://ahom24.googlepages.com/magazine_01.jpg) no-repeat top center;
height:190px;
}
#header-inner{
width:900px; background-position:center;
margin-$start Side:auto;
margin-$end Side:auto;
}
#header{
margin:0px;
text-align:left;
color:$page title color;
}
5. hapus kode di atas, lalu ganti dengan kode berikut ini :
/*Header
===================================
*/#header-wrapper{
width:900px;
margin:0 auto 0px;
background:$bg header color 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. kemudian kebawah lagi dan temukan kode css seperti ini:
<div id=’header-wrapper’>
<b:section class=’header id=’header’ maxwidgets=’1′ show add element=’no’>
<b:widget id=’Header1′> locked=’true’ title=’TestBlog(Header)’ type=’Header1’/>
</b:section>
</div>
hapus kode diatas dan ganti dengan kode di bawah ini:
<div id=’header-wrapper’>
< div id=’head-inner’>
<b:section class=’header’ id=’header’ maxwidgets=’1′ show add element=’no’>
<b:widget id=’Header1′ locked=’true’ title=’TestBlog(Header)’ type=’header’/>
<b:section>
</div>
<div id=’r_head’>
<b:section class=’header’ id=’header2′ preferred=’yes’/>
</div>
</div>
7. Klik Simpan
Selesai.

Iklan

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

Awan Tag

%d blogger menyukai ini: