728x90 AdSpace

HEADLINE NEWS

03 Oktober 2010

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----
Asrizal Wahdan Wilsa

Memulai Blogging sejak tahun 2009 hingga sekarang. Aktif di bidang musik yang dinaungi salah satu label musik di Kota Bandung. Saat ini fokus melanjutkan kuliah ke jenjang S2 di Universitas Negeri Semarang (UNNES). Website: Sharing Media - Info Tips dan Trik Terbaru

  • Blogger Comments
  • Facebook Comments

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

Berkomentarlah dengan bijak, relevan dengan artikel, komentar spam dan promosi akan kami hapus, terimakasih.

Kami akan menjawab komentar anda secepat mungkin, opsi lain silakan berkomentar di halaman facebook/melalui twitter kami.

Item Reviewed: Cara Membagi Dua Kolom Header Description: Rating: 5 Reviewed By: Asrizal Wahdan Wilsa
Scroll to Top