Sunday, May 29, 2011

Cara Membuat Header Blog menjadi 3 Bagian

Jumpa kembali kawan, semoga kawan-kawan tetap sehat dan dalam lindungan yang Maha Kuasa. Amin. Untuk topik kali ini mari kita bahas mengenai Header Blog yaitu mengenai bagaimana Cara Membuat atau mengubah Header Blog kita menjadi 3 Bagian.

Berikut adalah langkah-langkahnya:

1. Login ke Blogger Dashboard ---> Design ---> Edit HTML

2. Jangan klik Expand Widget Templates

3. Scroll kebawah cari kode dibawah ini:

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
} 

4. Ubah kode diatas menjadi kode dibawah ini:


#header {
float:left;
width:30%;
height:200px;
margin: 0px;
border: 0px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

#header2{float:left; width:30%; height:200px}

#header3{float:left; width:39%; height:200px}

Note: Kawan dapat mengubah-ubah parameter width dan height sesuai kebutuhan

5. Scroll lagi sampai menemukan kode dibawah ini:


<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='JUDUL-BLOG-ANDA (Header)' type='Header'/>
</b:section>
</div>

6. Ganti kode diatas dengan kode dibawah ini:


<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='JUDUL-BLOG-ANDA (Header)' type='Header'/>
</b:section>

<b:section class='header' id='header2' maxwidgets='4' showaddelement='yes'/>
<b:section class='header' id='header3' maxwidgets='4' showaddelement='yes'/>
<div style='clear:both;'/>
</div><!-- end header-wrapper -->

Hasil-nya adalah seperti yang sudah saya coba diblog saya:

No comments:

Post a Comment