Home » » Header Tampil 2 Kolom

Header Tampil 2 Kolom


Langkah Pertama
       
Caranya adalah sebagai berikut :

1. Login ke Akun Blogger anda masing-masing.
2. Klik Design or Rancangan, kemudian pilih Edit HTML
3. Centang (Expand Widget Template)
4. Untuk keamanan lebih baik kita (Download Template Lengkap)
5. Gunakan (Ctrl+F) or (Alt+E+F) untuk memudahkan pencarian.
6. 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;
}

7. 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;
}

NB:
♪  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 :
(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 :


♂ Good Luck ♀

Semua ini adalah apa yang pernah aku cobain sendiri . . dan aku dapat/mengerti dari teman2 blogger lainnya karena aku hanya seorang blogger pemula yang ingin mengetahui lebih banyak hal lagi . . . . Thank's
Share
Related Post

0 comments:

Archives

Label


ShoutMix chat widget
Guest Book
 

Subscribe Via Email

Enter your email address:

Delivered by FeedBurner

My Blog

Show

Exploration


Show

[Valid Atom 1.0]
Google PageRank Checker Powered by  MyPagerank.Net

Powered by FeedBurner

SEO Stats powered by MyPagerank.Net

Show

Show

Exploration

Welcome To My Blog

I hope you find what you're looking for here . . Thank you for visit to my simple blog . .

Rizky Maulana

This life is a sacrifice and struggle . . and I am just a man who wants to be better than ever . .