Membagi Header Menjadi 2 Untuk Template Blogger V 3

gambar

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

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='Nama Blog Anda (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

Ganti "Nama Blog Anda" dengan Nama Blog
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 periksa pada menu Page Elements, jika berhasil maka akan ada dua kolom dibagian header.
Selamat mencoba