Cara Membuat Space Iklan pada Header Blogspot

Kali ini saya ingin berbagi cara membagi Header blog (Blogspot) menjadi 2 kolom, dimana nantinya kolom pertama (kiri) difungsikan sebagai tempat judul dan kolom kedua (kanan) bisa digunakan sebagai tempat / space iklan. Hasilnya bisa Anda lihat pada gambar tangkapan layar (layout) di bawah ini.

Untuk membuat header blog pada template standar Blogger (versi lawas) menjadi 2 kolom, caranya tidak sama seperti pada template custom yang tutorialnya sudah banyak dibagikan oleh kawan-kawan Blogger. Nah, khusus buat Anda pengguna template bawaan blogger yang ingin membuat space iklan di samping Header (judul blog), silahkan ikuti tutorial berikut ini.

1. Cari kode seperti / serupa di bawah ini

      <b:section class='header' id='header' maxwidgets='1' name='Header' showaddelement='no'>
        <b:widget id='Header1' locked='true' title='Bakul Oreg (Header)' type='Header' version='1'>⋯</b:widget>
      </b:section>

2. Tambahkan kode di bawah ini tepat di atasnya

<div class='columns-outer'>
  <div class='column-center-outer'>
    <div class='column-center-inner'>

3. Tambahkan kode di bawah ini tepat di bawahnya

    </div>
   </div>
   <div class='column-right-outer'>
     <div class='column-right-inner'>
       <b:section class='header' id='header-2' maxwidgets='1' name='Header-Ads' showaddelement='yes'/>
      </div>
    </div>
  <div style='clear: both;'/>
</div>

4. Hasil akhir akan terlihat seperti di bawah ini

<div class='columns-outer'>
  <div class='column-center-outer'>
    <div class='column-center-inner'>
      <b:section class='header' id='header' maxwidgets='1' name='Header' showaddelement='no'>
        <b:widget id='Header1' locked='true' title='Bakul Oreg (Header)' type='Header' version='1'>⋯</b:widget>
      </b:section>
    </div>
   </div>
   <div class='column-right-outer'>
     <div class='column-right-inner'>
       <b:section class='header' id='header-2' maxwidgets='1' name='Header-Ads' showaddelement='yes'/>
      </div>
    </div>
  <div style='clear: both;'/>
</div>

5. Tambahkan kode CSS di bawah ini tepat di atas kode ]]></b:skin>

.header-outer {overflow: hidden;}
.header-inner .column-center-outer {width: 40%;}
.header-inner .column-right-outer {float: right; width: 60%;}
@media screen and (max-width: 768px) {
.header-inner .column-center-outer, .header-inner .column-right-outer {float: none; width: 100%!important;}
}

Nilai (max-width: 768px) relatif, silahkan ubah sesuaikan kebutuhan.

6. Simpan tema / template, kemudian lihat halaman tata letak, jika hasilnya seperti pada gambar di atas, itu artinya Anda telah berhasil membuat header blog menjadi dua kolom yang bisa Anda gunakan untuk memasang iklan di samping judul blog.

Baca juga:

1. Cara membuat kotak iklan Adsense di samping judul Blog
2. Cara memindahkan Unit iklan main_Blog1 kedalam artikel, untuk meningkatkan keterlihatan

Catatan : Cara di atas berhasil diterapkan pada tema Simple (responsive), untuk tema lain mungkin akan berbeda hasilnya. Sebaiknya Anda atur font-size untuk judul blog (kecilkan ukurannya), agar tampilannya tidak menjadi dua baris.