Cara Merubah Header Jadi 2 Kolom Pada Blog

Cara Merubah header Jadi 2 Kolom Pada Blog - Ada nilai tambah untuk template yang memiliki header 2 kolom, balik lagi tergantung ke pemilik blog, ada juga hanya 1 kolom dengan alasan untuk mempercepat load blognya.
Bagaimana cara membuat header blog menjadi 2 kolom widget ?. Beberapa blog mempunyai header 1 kolom, seperti pertama kali saya pakai template blogger, Karena ada kebutuhan untuk pasang kolom berlangganan via email , bisa juga di gunakan sebagai space ikalan,seperti di pojok atas kanan blog ini, akhirnya saya mencoba untuk menambah 1 widget di sebelah kanan header.

Bagaimana caranya ? Ikuti langkah-langkah di bawah ini :

Login ke Blogger
Klik Rancangan -> Edit HTML
Jangan lupa di simpan dulu sebelum di edit

Langkah 1 :

Cari Kode /* Header dan tempatkan kode di bawah ini persis di bawah kode /* Header

#header {
float:left;
width:40%;
margin: 0px;
text-align: center;
color:#ffcc66;
}
#header2{float:left; width:60%;}

Langkah 2 :

Cari kode yang mirip dengan di bawah ini :

<div class='region-inner header-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Title Blog Anda' type='Header'/>
</b:section>
</div>

Kemudian ganti dengan kode di bawah ini :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Title Blog Anda' type='Header'/>
</b:section>
<b:section class='header' id='header2' maxwidgets='4' showaddelement='yes'/>
<div style='clear:both;'/>
</div>

SIMPAN template ! dan SELESAI

Begitulah sobat, silahkan di coba jika masih menggunakan template yang mana header-nya cuman ada 1 kolom. Fungsi 2 kolom widget di header ini adalah untuk penempatan space iklan atau lainnya.

Sumber : blogger coepoe

ini cara yang kedua....

Bagi sobat yang tertarik, silahkan ikuti cara membuat 2 kolom header berikut ini.

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;

}

Tambahan :

Edit kode di atas sesuai keinginan sobat terutama kode width yang harus di sesuaikan dengan ukuran header blog sobat.

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>

8. Klik simpan perubahan

9. Langkah terakhir, klik ELEMEN LAMAN dan lihat bila sudah menjadi 2 kolom.

Dari kedua cara di atas silahkan anda pilih yang menurut anda paling mudah dan sesuai dengan template anda sedangkan kalau mau di oprek lagi silahkan.

Sumber :christian

Unknown 09.40 Komentar