Cara membuat Header Menjadi dua Kolom ( templete lama)

Secara default blogger menampilkan header satu kolom panjang yang terletak di bawah Nav Bar. Sesungguhnya header blog dapat Anda di belah menjadi 2, sebelah kiri merupakan header utama yang di potong sedangkan sebelah kanan header hasil potongan. Keuntungan yang bisa diambil dengan adanya dua klom header ini mungkin kita bisa meletakan tulisan,gambar,maupun kode script di samping judul blog kita. Berikut gambaran elemen lamannya:

Berikut langkah-langkahnya:
1.Tahap Pertama
>Login ke account blog anda
>Klik Rancangan ->Edit HTML
>Jika takut rusak Download template anda terlebih dahulu
>Klik Expand Template Widget
>Cari kode dibawah, cara cepat 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 ( } ), ganti (replace ) dengan kode berikut:

/* 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 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: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 Terakhir
Simpan Template -> Lihat Blog

Sekian artikel berjudul Cara membuat Header Menjadi dua Kolom ( templete lama), Semoga bermanfaat. URL artikel: http://javablogtrik.blogspot.com/2012/03/cara-membuat-header-menjadi-dua-kolom.html

Artikel Terkait: