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.
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 -->
Join the conversation