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

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.

Itulah sekilas pemahaman saya tentang Cara Membuat Header Menjadi 2 Kolom. Semoga bermanfaat. Baca juga: Cara Membagi Header Menjadi 2 Kolom (2). Jika mencari artikel serupa, silahkan cek di bawah ini:

Artikel Terkait

Cara Membuat Header Menjadi 2 Kolom

4/ 5

Oleh Bonita Benz