Cara Permak Header Menjadi Dua Bagian

Yes berhasil juga akhirnya mbagi header menjadi dua bagian. Sekarang saatnya bagi-bagi ke Permaker semua. Kalau dua artikel sebelumnya dah dikasih tau tentang bagaimana menyembunyikan Judul/diskripsi Blog dan bagaimana menambah gambar pada header kali ini membahas cara membuat header menjadi dua bagian. Mau langsung atau ngobrol dulu? langsung aja ya ntar malah ngantuk...

Ikuti langkah - langkah di bawah ini :

1. Masuk ke Account Blogger kamu
2. Pilih Tata Letak klik Edit Html ( jangan lupa contreng "Expand Template Widget").
3. Cari code di bawah ini :


/* Header
===================================
*/
#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;
}

Kalau beda yang penting cari CSS bagian header biasanya

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

................... samai dengan
}
/* Posts
----------------------------------------------- */


4. Hapus kode bagian header diatas ganti dengan kode di bawah ini:


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

#header-wrapper {
width:900px;
margin:0 auto 0px;
background:$bgheadercolor;
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;
}



5. Selanjutnya cari code di bawah ini :


<div id="header-wrapper">
<b:section class="header" id="header" maxwidgets="1" showaddelement="no">
<b:widget id="Header1" locked="true" title="Nama blog anda (Header)" type="Header">
</b:widget>
</b:section></div>


Hapus kode di atas dan 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>


6. Ok sudah selesai tinggal klik save template, trus klik Tab elemen halaman nah jadikan sekarang headernya jadi dua bagain satu buat logo satu bisa buat banner atau google adsense.
   

Gampangkan ? gampang dan menyenangkan memang permak blogs, kalau bisa itu puas rasanya.. bagaimana dengan kamu?

OK semoga berhasil ya.

NB : lebar kolom(width) di atas silahkan disesuaikan keinginan anda trial and error aja, Trus kalau template kamu berbeda sialhken lapor aja nanti kita bantu tenang aja :).

Share on Facebook Share on Twitter Share on Google Plus