HEADER TAMPIL DUA KOLOM

epg-studio.blogspot.com


C oba anda perhatikan bagian header EPG Studio. Bagian tersebut terdiri dari header dan widget lainnya atau dalam istilah lainnya " Header terdiri dari dua bagian "Tambahan baru pada bagian header ini dapat anda isi dengan berbagai widget yang disesuaikan dengan keinginan anda.
Berikut langkah-langkahnya :

• LANGKAH PERTAMA
1. Masuk ke Blogger dengan ID anda.
2. Klik Rancangan kemudian pilih Edit HTML.
3. Simpan dulu template anda dengan dengan cara klik Download Template Lengkap jika takut gagal
Cari kode css bagian header seperti dibawah 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; }
4. Hapus kode css diatas kemudian ganti dengan kode css dibawah ini :
   
   
   /* Header =================================== */
#header-wrapper {
width:1000px;
margin:0 auto 0px;
background:$bgheadercolor
height:190px;
}
#head-inner {
width:500px;
background-position: left;
margin-left: auto;
margin-right: auto;
float:left;
}
#header {
margin: 0px;
text-align: left;
color:#ffcc66;
}
#r_head{
width:500px;
float:left;
padding-top:10px;
}
   
   • Perhatikan kode-kode yang berwarna, terutama pada ukurannya, ganti ukuran tersebut sesuai dengan keinginan anda.
   • width:1000px; : merupakan ukuran header secara kesuluruhan
   • #header-inner {
     width:500px; : merupakan ukuran header yang baru tempat menampilkan gambar pada header
   • #r_head{
     width:500px; : merupakan ukuran bagian header sebelah kanan (yang baru anda tambahkan). Bagian inilah nantinya dapat anda tambahkan widget-widget pilihan anda.

LANGKAH KEDUA

1. Cari kode seperti dibawah 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 (Header)' type='Header'/>
</b:section>
</div>
   
2. Hapus kode tersebut kemudian ganti 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='Title blog anda (Header)' type='Header'/>
</b:section>
</div>
<div id='r_head'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div>
   
3. Klik tombol Simpan Template
4. Sekarang coba anda lihat Rancangan pada bagian Elemen Halaman jika berhasil anda akan melihat tampilan baru pada bagian header blog anda. Silahkan anda isi sesuatu pada header bagian kanan tersebut.
5. Tampilan Elemen Halaman akan terlihat seperti gambar dibawah ini :
   
   
6. Selamat mencoba semoga bermanfaat.

Read more: http://epg-studio.blogspot.com/2010/09/header-tampil-dua-kolom.html#ixzz1Yvx345ER

Posted in: Tutorial Blogger