Cara Membagi Dua Kolom Header - Asrizal Wahdan Wilsa Sharing Media Cara Membagi Dua Kolom Header

Post Top Ad

Cara Membagi Dua Kolom Header

Share This
Cara Membagi Dua Kolom Header merupakan cara yang banyak digunakan oleh para blogger. pada kebanyakan template fasilitas ini sudah tersedia namun ada juga yang belum tersedia, begitupun dengan salah seorang sahabat blogger yang bertanya mengenai cara membagi dua kolom header, untuk itu saya posting pada artikel kali ini. setelah pada artikel sebelumnya saya membahas mengenai cara membuat footer 3 kolom dengan background.
untuk lebih jelasnya lihat gambar dibawah ini yaitu header yang hanya memiliki 1 kolom :

Dari gambar diatas jika kita memasang gambar di header maka disamping header tidak ada variasi apa-apa, namun jika membagi dua kolom header, maka sebelah kanan header dapat kita tambahkan banner/ads. bagaimana cara membagi dua kolom header? mari kita simak tutorialnya.
  • Login ke account blog anda
  • Klik rancangan
  • Klik edit html lalu expand widget template
  • Cari kode Css yang mirip dengan kode dibawah ini :
/* Header
===========
*/
#header-wrapper {
width:900px;
margin:0 auto 0px;
background:#ffffff;
height:190px;
}

#header-inner {
width:900px;
background-position: center;
margin-$startSide: auto;
margin-$endSide: auto;
}

#header {
margin: 0px;
text-align: left;
color:$pagetitlecolor;
}
  • Hapus kode diatas dan ganti dengan kode dibawah ini :
/* Header
==============
*/

#header-wrapper {
width:900px;
margin:0 auto 0px;
background:#ffffff;
height:190px;
}

#head-inner {
width:600px;
background-position: left;
margin-left: auto;
margin-right: auto;
float:left;
}

#header {
margin: 0px;
text-align: left;
color:#ffcc66;
}

#r_head{
width:300px;
float:left;
padding-top:10px;
}
  • Lalu cari kode <div id='header-wrapper'> seperti kode dibawah ini :
<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:section>
</div>
  • Hapus kode diatas dan 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='Test Blog (Header)' type='Header'/>
</b:section>
</div>
<div id='r_head'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div>
  • Simpan hasil kerja anda dan lihat hasilnya
Untuk melihat berhasil atau tidaknya, tampilan rancangan jika berhasil akan seperti gambar dibawah ini :


----Semoga Bermanfaat----

4 komentar:

  1. Keren mas... lagi kemaren2 saya dah coba tai gagal, skarang saya mau coba lagi..hehe makasih nih infonya...

    BalasHapus
  2. maksih,, dicaba gak ya ? :b:

    BalasHapus
  3. klo bikin header aku udah coba yg jadi 3 coloumn Sob.. waktu itu hhe,... thnx 4 share..

    BalasHapus

Post Bottom Ad

Pages