Pages

Labels

Cara membagi dua kolom header

Semangat…hehehe ayo blogger Indonesia jangan pernah ragu dan jangan pernah menyerah untuk melakukan blogging .hehehe dalam postingan kali ini klinik-it pengen memberikan tips nih buat blogger Indonesia yang seneng pasang iklan di blognya.hehehe yupz.. dalam postingan kali ini klinik-it akan menjelaskan tentang Cara membagi dua kolom header.Apa maksudnya ? maksudnya adalah membagi dua kolom header untuk JUDUL blog dan yang satunya lagi untuk Elemen nhalama baru.

Jadi jika kita membagi dua kolom header satu kolom header elemen blog yang kita miliki bisa untuk memasang iklan dan juga yang lainya.Iklan di header memang cukup efektif untuk menarik pengunjung mengklik ikan tersebut.Selain untuk memasang iklan elemen baru tersebut juga bisa untuk menambah widget baru blog kita. Mungkin sobat masih bingung dengan apa yang klinik-it jelaskan,jadi biar ga bingung silakan langsung aja sobat klinik-it praktekan Cara membagi dua kolom header di bawah ini.

1.Login ke blogger dengan ID sobat.

2.Klik TATA LETAK.

3.Klik edit HTML.

4.Selanjutnya cari kode di bawah 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.Jika sudah ketemu hapus kode tersebut kemudian ganti kode tersebut dengan kode di bawah 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.Jika sudah cari lagi kode seperti yang di bawah 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 kemudian 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 SIMPAN TEMPLATE.

9.Selesai………selanjutnya tinggal sobat lihat hasilnya.