Thursday, 24 June 2010

Membuat Header Menjadi Dua Kolom

Kadang kita mengalami kesulitan jika kita ingin menempatkan suatu elemen baru tepat pada header,atau istilahnya menempatkan sebuah object disamping header.

Ada cara praktis untuk membagi header blog menjadi dua.
Tapi sebelum itu ingat ya..Backup dulu Html anda kedalam Notepad.


Untuk mengantisipasi jika hasil tidak sesuai keinginan anda,anda masih bisa mengembalikan Template seperti semula.

Pergi ke Dashboard---->Tata letak---->Edit Html.
Cari kode seperti 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;
}

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

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


Jika sudah ketemu,hapus kode tersebut dan gantilah dengan 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;
}


Jika sudah anda ganti,masih di halaman Html,cari kode seperti 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>


Jika sudah ketemu,ganti kode di atas dengan 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>


Lalu SimpanTemplate.