Update! Notifikasi Untuk Pengguna AdBlocker Adsense

Ini adalah postingan untuk mengupdate postingan sebelumnya tentang cara membuat notifikasi ketika AdBlocker terdeteksi sehingga iklan adsense di blog tidak tampil.

Pada postingan sebelumnya, tanpa menonaktifkan AdBlock, notifikasi bisa dengan mudah dihilangkan dengan klik tombol close. Sehingga masih banyak pengguna yang mengabaikan notifikasi ini dan Adblock tetap menyala.

Tentunya hal ini seakan-akan notifikasi menjadi sia-sia.

Nah pada postingan kali ini, saya mengupdate notifikasi AdBlocker Adsense agar pengguna benar-benar mematikan AdBlocker.

Ketika AdBlocker terdeteksi, maka notifikasi akan muncul menutupi halaman dan mematikan scroll halaman. Tombol close saya ganti menjadi tombol refresh halaman, jadi meskipun tombol close diklik dan AdBlocker tidak dinonaktifkan maka akan me-refresh halaman namun notifikasi akan tetap muncul menutupi halaman.

Setelah AdBlocker dinonaktifkan, maka ketika tombol × (close) notifikasi diklik, halaman akan direfresh dan tentunya iklan Adsense akan muncul kembali dan otomatis notifikasi tidak akan muncul.

Silahkan coba akses halaman demo dengan AdBlocker

Jika Anda ingin mencobanya, silahkan copy kode-kode di bawah ini.

Silahkan copy kode CSS di bawah ini dan simpan di atas </head>


<style type='text/css'>
#keepads{position:fixed;bottom:-7000px;opacity:0;transition:all .3s;z-index:100000}
#keep-ads{background:#1C90F3;color:#fff;text-align:center;padding:20px;position:absolute;left:50%;top:25%;margin-left:-25%;font-size:160%;line-height:1.2em;transition:all .3s;width:50%;height:auto;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;z-index:2}
#keep-adslayer{position:absolute;bottom:0;left:0;right:0;top:0;background:#000;background:rgba(0,0,0,.9);z-index:1}
#keep-ads h3{margin:0 0 20px!important;font-size:30px}
#keep-ads p{margin:0!important;font-size:18px}
#keep-ads a{color:yellow;text-decoration:none}
#keepads.show{pointer-events:auto;opacity:1;bottom:0;left:0;right:0;top:0;}
.close-keep-ads{position:absolute;top:0;right:0;font-size:24px;font-weight:700;cursor:pointer;width:24px;height:24px;line-height:24px;text-align:center}
.flow{overflow:hidden}
@media screen and (max-width:640px){
#keep-ads{width:80%;margin-left:-40%;top:10%}
#keep-ads h3{margin:0 0 10px!important;font-size:20px}
#keep-ads p{margin:0!important;font-size:16px}
}
</style>

Lalu simpan kode HTML di atas kode </body>


<b:if cond='data:blog.url not in {&quot;http://www.freewaresofts.com/p/whitelisting-freeware-softs-in-your.html&quot;}'>
<div id='keepads'>
<div id='keep-ads'>
  <h3>AdBlock Detected!</h3>
  <p>Like this blog? Keep us running by whitelisting this blog in your ad blocker.</p>
  <p>This is <a href='http://www.freewaresofts.com/p/whitelisting-freeware-softs-in-your.html' target='_blank' title='how to whitelisting'>how to whitelisting</a> this blog in your ad blocker.</p>
  <p>Thank you!</p>
  <div class='close-keep-ads' onclick='refresh()'>&#215;</div>
</div>
  <div id='keep-adslayer'/>
  </div>
<script>
//<![CDATA[
setTimeout(function() {
  var body = document.body;
  var info = document.getElementById("keepads");
  var ads = document.querySelectorAll("ins.adsbygoogle");
  if ($(ads).height() === 0 ) {
    info.className = "show";
    body.className = "flow";
  }
}, 2000)
function refresh() {
    location.reload();
}
//]]>
</script>
</b:if>

Ganti URL http://www.freewaresofts.com/p/whitelisting-freeware-softs-in-your.html ini dengan URL halaman Whitelist blog Anda.

Dan pastikan blog Anda sudah menggunakan Jquery Library berapa pun versinya.

Reactions:

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser