Membuat Slot Iklan Adsense Billboard Dengan Tombol Show Hide Ad Untuk Blog Non AMP HTML

Sebelumnya saya sudah membagikan cara membuat slot iklan billboard 970x250 untuk blog AMP, nah kini saya akan membagikan cara membuat slot iklan billboard untuk blog Non AMP dengan tombol show hide ad.

Perlu diketahui bahwa size iklan yang tampil di unit billboard ini adalah unit iklan dengan size 970x250 dan 300x250.

Maka iklan yang ditampilkan kita atur dengan responsive media query. Di layar 1024px ke atas maka akan ditampilkan ukuran 970x250 sementara di layar 1024px ke bawah akan ditampilkan iklan dengan ukuran 300x250.

Untuk demonya silahkan lihat di link berikut: Demo

Jika ada yang ingin mencobanya silahkan ikuti langkah-langkahnya di bawah ini.

Silahkan simpan CSS style berikut di atas kode </head>


<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;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}

#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 berikut 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-xxxxxxxxxxxxxx"

     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 sesuaikan data-ad-clien dan data-ad-slot dengan unit iklan responsive Adsense Anda.

Dan pastikan Anda sudah memasang js Adsense di atas kode </body>

Membuat Slot Iklan Adsense Billboard Dengan Tombol Show Hide Ad Untuk Blog Non AMP HTML

Related Post