Cara membuat Header Blog 1 kolom menjadi 2 kolom dan sebaliknya

Pembagian header Blog menjadi 2 ataupun 1 kolom cukup simple tidak terlalu rumit seperti yang kita bayangkan !!!

Cuma hanya perlu mengganti beberapa bagian dari template kita saja.

 

Merubah Header 1 kolom menjadi 2 kolom :

a) Masuk ke edit HTML pada blog anda :

b) Jangan lupa back up dulu Template Anda untuk menghindari kesalahan, copy ke Word Office dulu.

c) Kemudian klik di Template anda, lalu tekan Ctrl+F lalu ketik kode yang akan diganti header-wrapper

Cari Kode :

#header-wrapper {
width:900px;
margin:0 auto 0px;
background:$bgheadercolor
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;
}

Selanjutnya kode yang di blok tadi ganti dengan kode dibawah ini :

#header-wrapper {
width:980px;
margin:0 auto 10px;
}

#headerkiri {
width:200px;
background-position: left;
margin-left: auto;
margin-right: auto;
float:left;
}

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

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

#header a {
color:$pagetitlecolor;
text-decoration:none;
}

#header a:hover {
color:$pagetitlecolor;
}

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:150px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}

#headerkanan{
width:750px;
float:right;
padding-top:26px;
}

Berikutnya cari kode berikut ini, agar pencarian lebih mudah Tekan tombol Ctrl+F ketik <div id :

Cari Kode seperti yang 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>

Setelah kode di atas ketemu ganti dengan kode dibawah ini :

<div id='header-wrapper'>
<div id='headerkiri'>
<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='headerkanan'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div>

Kemudian disimpan templatenya, dengan tekan Simpan Template

Finish Deh..!

Kedua :

Cara merubah header 2 kolom menjadi 1 kolom. Intinya  sama dengan yang telah di uraikan di atas hanya tinggal di balik saja.

Langkah pertama :

a) Masuk ke edit HTML pada blog anda :

b) Jangan lupa back up dulu Template Anda untuk menghindari kesalahan, copy ke Word Office dulu.

c) Kemudian klik di Template anda, lalu tekan Ctrl+F lalu ketik kode yang akan diganti header-wrapper

a. Cari Kode :

#header-wrapper {
width:980px;
margin:0 auto 10px;
}

#headerkiri {
width:200px;
background-position: left;
margin-left: auto;
margin-right: auto;
float:left;
}

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

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

#header a {
color:$pagetitlecolor;
text-decoration:none;
}

#header a:hover {
color:$pagetitlecolor;
}

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:150px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}

#headerkanan{
width:750px;
float:right;
padding-top:26px;
}

Lalu diganti dengan kode dibawah ini :

#header-wrapper {
width:900px;
margin:0 auto 0px;
background:$bgheadercolor
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;
}

b. Setelah berhasil dengan kode di atas, lalu cari kode berikut ini :

<div id='header-wrapper'>
<div id='headerkiri'>
<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='headerkanan'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div>

Kemudian kode diatas diganti dengan 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>

Terakhir tekan Simpan Template

Finish deh !!

Selamat Mencoba, Yang penting Ketelitian kita…hehehe

GARUDA !!

Posted in: TIPS