Ditulis oleh: Ditulis pada: 11/27/2017
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.
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 != "static_page" and data:blog.pageType != "error_page"'>
<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 != "static_page" and data:blog.pageType != "error_page"'>
<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>