Membagi Header Menjadi 2 Untuk Template Standar Blogger

Niat Ngeblog - Sebetulnya sudah banyak blog yang membahas tutorial yang satu ini, tetapi banyak pula yang gagal untuk menerapkannya. Hal ini di karenakan perbedaan template yang digunakan masing-masing blog. Kali ini kita akan mencoba Membagi Header Menjadi 2 Untuk Template Standar Blogger.

Untuk melakukannya, ikuti langkah-langkah berikut.

01. Setelah kamu login ke account blogger, cari menu Edit HTML.

02. Untuk berjaga-jaga jika terjadi error, maka backup dahulu data di blog kamu dengan mengklik "Download Full Template". Tunggu prosesnya sampai selesai.

03. Kemudian cari kode kurang lebih seperti berikut :

/* Header

----------------------------------------------- */
.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;
}
.Header h1 {
font: $(header.font);
color: $(header.text.color);
text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
}
.Header h1 a {
color: $(header.text.color);
}
.Header .description {
font-size: $(description.text.size);
color: $(description.text.color);
}
.header-inner .Header .titlewrapper {
padding: 15px $(header.padding);
}
.header-inner .Header .descriptionwrapper {
padding: 0 $(header.padding);

}

Ganti dengan kode ini

/* Header
----------------------------------------------- */
.header-outer {
  background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
  _background-image: none;
}
#header-wrapper {
margin:0 auto 0px;
height:70px;
}
#head-inner {
width:285px;
background-position: left;
text-align: justify;
margin-left: auto;
margin-right: auto;
float:left;
}
#header-kanan{
width:485px;
float:right;
}
#header h1 {
  color: $(header.text.color);
margin: 0px;
text-align: left;
}
.Header h1 a {
  color: $(header.text.color);
}

Silahkan di atur besar kecilnya angka agar pas dengan besarnya header blog kamu.

04. Lanjut, cari kode berikut :

<header>

<div class='header-outer'>
<div class='header-cap-top cap-top'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
<div class='fauxborder-left header-fauxborder-left'>
<div class='fauxborder-right header-fauxborder-right'/>
<div class='region-inner header-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Linux For Human Begin (Header)' type='Header'/>
<b:widget id='HTML2' locked='false' title='' type='HTML'/>
</b:section>
</div>
</div>
<div class='header-cap-bottom cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>

</header>

Ganti dengan kode di bawah

<header>
    <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='Nama Blog Kamu (Header)' type='Header'/>
</b:section>
</div>
<div id='header-kanan'>
<b:section class='header' id='header2' preferred='yes'>
</b:section>
</div>
</div>
    </header>

Ganti "Nama Blog Kamu" menajadi nama blog milik mu

05. Jika sudah, silahkan klik tombol Preview untuk mengetahui apakah terjadi error.

06. Apa bila hasilnya tidak terjadi error maka, klik tombol Save Template.

07. Coba tengok pada menu Page Elements, jika berhasil maka akan ada dua kolom dibagian header.

Selamat mencoba