Home » , » MEMBAGI HEADER JADI DUA BAGIAN

MEMBAGI HEADER JADI DUA BAGIAN

Header adalah bagian paling atas dari blog.Bagian ini berisi judul dan deskripsi blog,lebarnya sama dengan body.
Dengan berisikan judul dan deskripsi blog,maka banyak ruang yang kosong.Untuk menghemat header bisa kita buat menjadi dua bagian.
Dengan demikian ada ruang baru yang bisa kita gunakan untuk hal-hal lain

Karena cara ini menyangkut kode CSS dan HTML saya sarankan agar anda memakai satu blog sebagai bahan percobaan.Sayang jika blog yang sudah jadi akan berantakan karena kita akan mengobrak-abrik isi dari blog.

Langsung saja kita mulai membagi header jadi dua bagian.
     1.Masuk Blogger denga ID Anda.
     2.Klik Tata Letak.
     3.Klik submenu Edit HTML.
     4.Centang kotak keci di kanan atas  yang bertuliskan
     5.Cari Kode seperti di bawah ini.



#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}

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


      6.Hapus kode diatas ganti dengan kode berikut.



#header-wrapper {
width:860px;
margin:0 auto 0px;
background:#38610B;
height:180px;
}

#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:360px;
float:left;
padding-top:10px;
}

      7.Cari kode berikut



<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:widget></b:section></div>

     8.Hapus kode diatas dan ganti dengan kode berikut



<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:widget></b:section></div>

<div id="r_head">

<b:section class="header" id="header2" preferred="yes">
</b:section></div>
</div>
   
     9.Simpan Tamplate

Ganti angka yang berwarna merah sesuai lebar yang diinginkan !
Untuk melihat hasilnya klik Elemem Laman.
Semoga berhasil....!

Tinggalkan komentar anda sebagai bahan masukan untuk memperbaiki isi blog ini.
Bagikan artikel via :

3 komentar:

  1. sebenarnya konsepnya tentang header gmana sich?
    terus bagaimana klo pengen buat yang tiga ato sampe empat header

    BalasHapus
  2. Contohnya yg kayak gimana tuh gan???!!!....

    BalasHapus
  3. salam kenal, broo, isi pulsa dapat jutaan rupiah, ada web replikanya, sehingga mudah promonya, baik di blog maupun di facebook, jadi mudah pasang bannernya di blog.....

    BalasHapus

 
Support : Your Link | Your Link | Your Link
Copyright © 2013. PRAPATAN KERTEK - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger