Cara Membuat Header Menjadi 2 Kolom

Tidak semua template memiliki 2 kolom header, karena itu saya akan mencoba menambahkan header baru untuk template yang cuma memiliki satu header saja. Lihatscreenshoot-nya di bawah, ini adalah contoh blog dengan 2 kolom header:

Tertarik untuk membuatnya? Bagaimana caranya?


Cara Membuat Header Menjadi 2 Kolom

1. Login ke akun Blogger
2. Pilih Template >> Edit HTML
3. 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)


/* Header */
#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
}

Perhatikan angka yang berwarna Biru: pastikan lebar width-nya 250px


4. Copy-paste script berikut di bawah elemen kode di atas:

#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;
}

5. Kemudian cari kode yang mirip dengan kode berikut ini:

<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>

6. Lalu copy-paste script berikut ini di bawah kode </b:section> di atas:



<!-- Header-Baru-Open -->
<b:section class='ads' id='header-baru' maxwidgets='1' preferred='yes' showaddelement='yes'/>

</div>
<div class='clear'/>
<!-- Header-Baru Closed -->

7. Simpan Template. Lalu cek Tata Letak untuk memastikan muncul elemen baru di samping header.