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 Expand Template Widget
     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.