Jumat, 26 Januari 2018

Memasang Iklan Adsense Billboard dibawah Menu Navbar Blog

Sebenarnya tidak terfikir sebelumnya untuk bikin tutorial Pasang Billboard Adsense didalam blog. Tapi karena sudah ada Sahabat KangWira yang request tadi pagi, jadi saya sempatkan untuk menulisnya saat ini.

Spot iklan Billboard ini memang dapat meningkatkan nilai BPK yang cukup bagus lho teman-teman. Hal ini saya buktikan sendiri saat pertama kali menggunakan Iklan Adsense Billboard dalam blog ini.

Memasang Iklan Adsense Billboard dibawah Menu Navbar Blog
Bahkan menurut pendapat dari sahabat saya yang menjadi salah satu pakar Adsense menyarankan untuk memasang spot iklan Billboard ini didalam blog jika ingin meningkatkan pendapatan Adsense nya.

Tapi perlu diketahui bahwa meningkatnya BPK pada adsense itu harus seimbang dengan jumlah traffic yang baik yah teman-teman.

Blogger yang memiliki system open source ini sebenarnya memang lebih nyaman untuk modifikasi tampilan templatenya. Kita cukup memberikan sedikit sentuhan pada kode CSS yang sudah ada, maka tampilan blog kita akan menjadi lebih indah untuk dipandang oleh visitor.

Blog KompiAjaib milik Kang Adhy sebenarnya sudah pernah membahas tutorial untuk memasang slot iklan Billboard ini dengan menggunakan fungsi Show Hide, karena beliau menyarankan untuk memasang Iklan Billboard ini sebelum header blog.

Billboard Banner diatas Header Blog

Menurut pendapat Kang Adhy, Tidak semua orang menyukai iklan, jadi beliau menyisipkan fungsi Show Hide pada script yang dibagikan pada tutorialnya agar pengunjung dapat dengan mudah menyembunyikan Billboard jika dirasa mengganggu.

Bagaimana jika kita mau pasang Billboard Banner ini dibawah Menu Navigasi pada Blog seperti pada gambar dibawah ini?

Billboard Banner dibawah Navigasi Menu Blog

Nah saat ini, Blog Kang Wira akan memberikan Tutorial Pasang Iklan Billboard Adsense tanpa fungsi Show Hide yang diletakkan dibawah menu navigasi.

Sebenarnya hanya tinggal dihapus saja script Show Hide pada Script yang dibuat oleh kang Adhy itu, jadi saya hanya sedikit memodifikasi script itu.

Bagaimana Cara Pasang Iklan Billboard di bawah Navbar Blog?

Karena ukuran Iklan Billboard ini memang cukup besar, maka kita akan menggunakan Unit Iklan berukuran 970x250 dan 300x250. Apakah ini tandanya kita memerlukan 2 unit iklan didalam billboard tersebut?

Tidak.. Adsense kan sudah menyediakan Unit iklan Responsive, jadi kita cukup membuat 1 unit iklan responsive pada dashboard adsense, lalu salin kode nya kedalam notepad dulu yah teman-teman.

Jika sudah dibuat unit iklannya, maka selanjutnya kita buka dashboard blog kita. Lalu buka Tema dan pilih Edit HTML.

Cari kode </head> pada template menggunakan CTRL+F agar lebih mudah.
Selanjutnya, salin kode CSS dibawah ini dan letakkan tepat diatas kode </head>.
<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;error_page&quot;'>
<style type='text/css'>
/* Banner Billboard */
.banner_billboard{margin:20px auto;padding:0 10px 20px;position:relative;width:100%;max-width:990px;height:auto;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
.wiraresponsive{width:970px;height:250px;}
@media screen and (max-width:960px){
.banner_billboard{max-width:320px;}
.wiraresponsive{width:300px;height:250px;}
}
</style>
</b:if>

Selanjutnya cari kode </nav> atau sejenisnya yang hampir sma seperti pada contoh gambar dibawah ini. Karena masing-masing template pasti berbeda struktur elemen HTML nya.
Contoh Elemen HTML Navbar
Klik untuk perbesar gambar

Jika sudah ketemu, salin HTML dibawah ini lalu letakkan setelah kode <div class='clear'/> yang sudah kamu masukkan kebawah Navigasi Menu template kamu sesuai Gambar.
<!-- TOP Banner -->
<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;error_page&quot;'>
<div class='banner_billboard'>
   <ins class='adsbygoogle wiraresponsive adsense' data-ad-client='ca-pub-xxxxxxxxxxxxxxxx' data-ad-slot='xxxxxxxxxx' style='display:block'/>
   <script>
      (adsbygoogle = window.adsbygoogle || []).push({});
   </script>
</div>
</b:if>

Perhatikan kode yang saya tandai diatas. Wajib kamu ganti xxxxxxxxxx dengan data-ad-client dan data-ad-slot='' yang sudah kamu salin kedalam notepad tadi

Setelah itu coba save template, lalu periksa hasilnya.

Jika terlihat kurang sesuai dengan template yang kamu gunakan, bisa disesuaikan CSS nya agar cocok dengan keinginan teman-teman, seperti margin, padding, position dan lainnya.

Mungkin sekian dulu tutorial pasang iklan Billboard nya. Semoga tidak ada kendala saat praktek yah teman-teman.

Jika ada yang mau ditanyakan, bisa tanya di kolom komentar ya. Jangan lupa untuk tetap berlangganan di artikel blog ini untuk mendapatkan notifikasi ketika ada postingan terbaru dari blog ini melalui email kamu.