Membuat Slot Iklan Adsense Billboard Dengan Tombol Show Hide Ad Untuk Blog Non Amp Html
Sebelumnya aku sudah membagikan cara membuat slot iklan billboard 970x250 untuk blog AMP, nah sekarang aku akan membagikan cara menciptakan slot iklan billboard untuk blog Non AMP dengan tombol show hide ad.Perlu diketahui bahwa size iklan yang tampil di unit billboard ini yakni 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 isyarat
</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 isyarat HTML berikut di bawah isyarat
<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 isyarat
</body>Sumber https://www.kompiajaib.com/
0 Response to "Membuat Slot Iklan Adsense Billboard Dengan Tombol Show Hide Ad Untuk Blog Non Amp Html"
Posting Komentar