Cara membuat Header Menjadi dua Kolom ( templete lama)

Seperti postingan sebelum nya cara membuat header untuk blog templete baru  sudah di jelaskan dan sekarang saya coba belajar dan  mengobok-obok kode html untuk blog templete lama...cara nya pun ga jauh beda cuma kode-kode yang kita cari berbeda dengan templete yang baru tapi tujuan nya sama yaitu untuk membelah header menjadi 2 bagian...

langsung aja ya kita belajar modifikasi nya..

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...!!!!

Ditulis oleh : Dena Setya Utama

Terima kasih atas kunjungan nya di Blog Sederhana Ini. Silakan komentar jika Ingin Follback kawan. Jika ada kritik dan saran yang bersifat membangun dan mensuport Blog ini, silakan kirim ke E-mail, Facebook, Twitter, dan komentar.

Get Free Email Updates to your Inbox!

• Rss
• Twitter
• FaceBook
• Google +