Blogger Proo - 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
02 | ----------------------------------------------- */ |
04 | background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px; |
05 | _background-image: none; |
13 | background-position: left; |
24 | color: $(header.text.color); |
29 | 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
02 | <div id='header-wrapper'> |
04 | <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> |
05 | <b:widget id='Header1' locked='true' title='Nama Blog Kamu (Header)' type='Header'/> |
08 | <div id='header-kanan'> |
09 | <b:section class='header' id='header2' preferred='yes'> |
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
