Cara Membuat / Membagi Header Blog menjadi 2 (dua) Kolom

Posted by Gani Mugni Sabtu, 31 Desember 2011 0 komentar
Bosan dengan punya header blog cuma satu kolom? Tenang..bisa kita tweak kok. Kita bisa membuatnya menjadi dua kolom dengan sedikit editing. Banyak fungsi sebenarnya untuk membuat dua kolom header, selain membuat banyak tempat untuk widget juga bisa menaruh iklan/banner dengan posisi yang sangat strategis. Oke deh, langsung ke TKP gan . . . !!!
1.     Login ke Blogger.
2.     Pilih menu Page Element – Edit HTML – centang Expand Widget Template.
3.     Cari 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;

}




#header-inner {

width:900px;

background-position: center;

margin-$startSide: auto;

margin-$endSide: auto;

}



#header {

margin: 0px;


text-align: left;

color:$pagetitlecolor;

}


4.     Hapus kode diatas lalu ganti dengan kode berikut :


/* 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;

}


5.     Coba anda Scroll ke bagian bawah dan temukan kode 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>


6.     Hapus kode diatas dang anti dengan kode dibawah 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>


7.     Selesai dan Save template.
TERIMA KASIH ATAS KUNJUNGAN SAUDARA
Judul: Cara Membuat / Membagi Header Blog menjadi 2 (dua) Kolom
Ditulis oleh Gani Mugni
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke http://azharadzuan.blogspot.com/2011/12/cara-membuat-membagi-header-blog.html. Terima kasih sudah singgah membaca artikel ini.

0 komentar:

Posting Komentar

Panduan blog dan SEO support Jual Online Baju Wanita - Original design by Bamz | Copyright of Azhara Blog.