Beranda > Tips dan Trik > Cara Membuat Header Menjadi Dua Kolom

Cara Membuat Header Menjadi Dua Kolom


1. Tahap PERTAMA
  • Seperti biasa anda login terlebih dahulu..kalau sudah login silahkan langsung ke RANCANGAN
  • Anda klik Edit HTML
  • sebelum nya anda download dulu templete agar jika ada kesalahan templete anda bisa di kembalikan seperti semula.
  • Jangan lupa di centang Expand Template Widget
  • Kalau sudah kita mulai mengobok-ngobok kode html nya

CARI KODE DI BAWAH INI..!!! cara cepat nya tekan (Ctr + F pada keyboard) fokus pencarian pada huruf bercetak tebal

/* Header
===================================
*/
#header-wrapper {
width:900px;
margin:0 auto 0px;
background:$bgheadercolor url(http://ahom24.googlepages.com/magazine_01.jpg) no-repeat top center;
height:190px;
}

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

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

Setelah ketemu hapus seluruh  kode di atas dari tanda awal ( / ) sampai tanda akhir ( } ) terus ganti (replace ) kode di bawah ini…

/* Header
===================================
*/

#header-wrapper {
width:900px;
margin:0 auto 0px;
background:$bgheadercolor url(http://ahom24.googlepages.com/magazine_01.jpg) no-repeat top center;
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;
}

2.Tahap KEDUA
Cari Kode di Bawah 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>

Lalu Hapus seluruh Kode di atas dan ganti kode di bawah 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>

 

3. Tahap SELESAI dan simpan templete
Nah sekarang kita lihat hasil nya…gimana sudah berhasil belum semoga sukses ya dalam mempercantik blog…!!!!
Artikel Terkait
  1. Belum ada komentar.
  1. Februari 17, 2012 pukul 1:56 pm
  2. Februari 17, 2012 pukul 7:50 pm
  3. Februari 18, 2012 pukul 9:51 am
  4. Februari 19, 2012 pukul 4:11 am

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: