Cara Membuat Header Menjadi 2 Kolom
Membuat header menjadi 2 kolom tentu didasari dengan maksud-maksud tertentu dari seorang Blogger. Penempatan widget seperti gambar atau iklan bisa menjadi opsi pilihan jika di samping judul blog bisa disisipkan sesuatu yang bisa membuat header blog kita terlihat padat dan menarik.
Tidak semua template memiliki 2 kolom header, karena itu saya akan mencoba menambahkan header baru untuk template yang cuma memiliki satu header saja. Lihat screenshoot-nya di bawah, ini adalah contoh blog dengan 2 kolom header:
Tertarik untuk membuatnya? Bagaimana caranya?
Cara Membuat Header Menjadi 2 Kolom
- Login ke akun Blogger
- Pilih Template >> Edit HTML
- Lalu cari kode header bawaan Template, kira-kira kode HTML nya mirip seperti di bawah ini: Ketik saja #header (gunakan ctrl F untuk mempermudah pencarian)
- Copy-paste script berikut di bawah elemen kode di atas:
- Kemudian cari kode yang mirip dengan kode berikut ini:
- Lalu copy-paste script berikut ini di bawah kode </b:section> di atas:
- Simpan Template. Lalu cek Tata Letak untuk memastikan muncul elemen baru di samping header.
/* Header */Perhatikan angka yang berwarna Biru: pastikan lebar width-nya 250px
#header {
background:#97C03E; float:left; width:250px; margin:0px; padding:10px; height:70px; overflow:hidden;
#header-right img {
width:auto; height:auto; display:block; margin:10px; padding:10px;
}
#header-right h1.title {
font:40px Elephant; font-weight:normal; color:#fff; text-align:left; margin:0px; padding:0px;
}
#header-right h1.logo, #header-right p.logo {
margin:0; padding:0;
}
#header-right .description {
text-align:left; color:#fff; margin:0px; padding:0px; font:20px
}
#header-baru {
float:right; width:500px; height:30px; text-align:center; overflow:hidden; margin:10px; padding:10px;
#header-baru img {
width:auto; height:auto; margin:5px; padding:5px;
}
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>
</b:includable>
<b:includable id='description'>---</b:includable>
<b:includable id='title'>---</b:includable>
</b:widget>
</b:section>
<!-- Header-Baru-Open -->
<b:section class='ads' id='header-baru' maxwidgets='1' preferred='yes' showaddelement='yes'/>
</div>
<div class='clear'/>
<!-- Header-Baru Closed -->
No comments