PANDUANEKA

Aneka Panduan & Solusi Anda

30 November 2017

Membuat Slot Iklan Adsense Billboard Diatas Header untuk Blog Non AMP

Setelah beberapa artikel sebelumnya saya membahas cara memasang iklan Adsense di beberapa tempat dalam blog, yaitu di sidebar ataupun memasang iklan Adsense di dalam postingan, maka pada artikel kali ini saya akan memberikan panduan cara memasang iklan Adsense billboard di atas header untuk blog non AMP.

Perlu diketahui, ukuran iklan yang tampil dalam iklan billboard ini adalah unit iklan ukuran 970x250 dan 300x250.

Untuk membuat iklan responsive dengan berbagai ukuran layar, maka iklan yang akan tampil harus diatur dengan responsive media query. Nantinya iklan yang tampil pada layar ukuran 1024px adalah ukuran 970x250 sedang untuk layar ukuran di bawah 1024px unit iklan akan ditampilkan dalam ukuran 300x250.

Untuk contohnya sendiri sudah saya terapkan pada blog ini dan dapat tampil dengan baik.
Membuat Slot Iklan Adsense Billboard Diatas Header untuk Blog Non AMP

Membuat Slot Iklan Adsense Billboard untuk Meningkatkan Pendapatan Adsense

Jika anda ingin mencobanya seperti yang telah saya terapkan pada blog ini, silahkan ikuti panduannya berikut ini :

Silahkan anda copy kode dibawah ini lalu paste di atas kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;
<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;error_page&quot;'>
<style type='text/css'>
/* Top Banner */
.top_banner{margin:20px auto;padding:0 10px 20px;position:relative;width:100%;max-width:990px;height:auto}
#close_topbanner,#open_topbanner{font-family:inherit;position:absolute;padding:0;bottom:0;background:0 0;border:none;cursor:pointer;color:#888;font-size:15px;font-weight:500;height:20px;line-height:20px;}
#close_topbanner{right:10px}
#open_topbanner{width:100px;text-align:center;right:50%;margin-right:-50px}
#close_topbanner:focus,#open_topbanner:focus{outline:0}
.adsenseresponsive{width:970px;height:250px;}
@media screen and (max-width:960px){
.top_banner{max-width:320px;}
.adsenseresponsive{width:300px;height:250px;}
}
</style>
</b:if>

Kemudian simpan kode HTML ini tepat di bawah kode <body>
<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;error_page&quot;'>
<div class='top_banner'>
<div id='topbanner'>
<!-- Kode iklan simpan di bawah ini -->
<ins class="adsbygoogle adsenseresponsive"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
  </div>
<button id='close_topbanner' onclick="document.getElementById('topbanner').style.display='none';close_topbanner.style.display='none';open_topbanner.style.display='block';" role='button' tabindex='0' title='Close'>Close Ad</button>
<button hidden='' id='open_topbanner' onclick="document.getElementById('topbanner').style.display='block';close_topbanner.style.display='block';open_topbanner.style.display='none';" role='button' tabindex='0' title='Open'>Open Ad</button>
  </div>
</b:if>

Silahkan anda ganti ca-pub-xxxxxxxxxxxx pada data-ad-client dan "xxxxxxxxx" pada data-ad-slot dengan kode Adsense anda.

Pastikan juga anda sudah memasang kode asinkron di bagian <head> atau tepat di bawah ]]></b:skin>

Untuk panduan lengkap mengenai kode asinkron ini, silahkan baca Satu Script Kode Asinkron Adsense untuk Mempercepat Loading Halaman Blog

Demikian artikel mengenai cara membuat slot iklan Adsense Billboard di atas header untuk blog non AMP, semoga bermanfaat dan meningkatkan pendapatan Adsense anda.

Jika ada pertanyaan atau tambahan informasi, silahkan berkomentar di kolom komentar yang sudah tersedia di bawah. Terima kasih

Sumber kode script http://www.kompiajaib.com/2017/11/membuat-slot-iklan-adsense-billboard_27.html

No comments:

Post a Comment

- Silahkan berkomentar sesuai topik.
- Mohon centang pada Notive me agar tahu balasan dari kami.
- Sebelum bertanya, silahkan Anda cari terlebih dahulu di kotak pencarian (Search)
- Untuk setiap komentar saya akan lakukan kunjungan balik ke situs Anda dengan atau tanpa komentar
Terima kasih atas kunjungan dan komentarnya