Cara Membuat Kotak Iklan Adsense di Samping Judul Blog

Kotak iklan atau space iklan di samping judul blog memiliki tingkat keterlihatan yang sangat tinggi, baik pada perangkat desktop maupun seluler. Dengan kondisi seperti itu, tentunya ruang iklan pada header blog memiliki nilai tawaran yang jauh lebih besar daripada space iklan lainnya di Blog.

Ada dua cara membagi Header Blogspot menjadi dua bagian. Cara pertama menggunakan model persen yang tutorialnya sudah pernah saya bagikan dengan judul Cara membuat space iklan pada header Blogspat. Dan untuk cara yang kedua adalah dengan memberi nilai pasti pada lebar salah satu bagian header blog.

Namun, jika kalian ingin membuat kotak iklan disamping judul blog untuk memasang iklan Adsense, sebaiknya gunakan model kedua.

Berikut cara membuat kotak iklan disamping judul blog, versi kedua.

1. Cari kode HTML yang mirip seperti 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. Salin kode berikut, kemudian letakkan tepat di atas kode pertama.

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

3. Salin kode berikut, kemudian letakkan tepat di bawah kode pertama.

</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. Letakkan kode CSS berikut di atas kode </head>

<style type='text/css'>
  .header-outer{overflow: hidden; margin: 0 0 20px;}
  .header-inner .columns{padding-left: 0!important; padding-right: 728px!important;}
  .header-inner .column-right-outer{width: 728px!important; margin-right: -728px!important;}
  .header-inner .Header .titlewrapper, .header-inner .column-right-outer{padding: 10px 0 0;}
  .Header h1, .Header .description{text-align: center!important;}
  .Header h1{font-size: 30px;}
  .Header .description{font-size: 10px}
  @media screen and (max-width:970px){
    .header-inner .columns{padding-left: 0!important; padding-right: 0!important;}
    .header-inner .column-right-outer{width: 100%!important; margin-right: 0!important; padding: 0!important;}
    .Header h1{font-size: 50px;}
    .Header .description{font-size: 15px;}
  }
</style>

5. Simpan Tema / Template

Baca juga:

1. Cara memindahkan Unit iklan main_Blog1 kedalam artikel.
2. Tips agar permohonan Adsense cepat diterima sepenuhnya
3. Daftar template default Blogger responsive & cocok untuk daftar Adsense

Catatan:

1. Meskipun posisi header-ads pada tata letak tidak saling bersebelahan dengan judul blog, namun hal itu tidak mempengaruhi tampilan aslinya.
2. Jika Anda telah menyembunyikan widget CSS Bundle, copot sementara kodenya. Setelah iklan terpasang, silahkan pasang lagi kodenya.
3. Untuk header blog dengan background gelap, biasanya butuh waktu sedikit lebih lama untuk iklan bisa tayang.