Update! Notifikasi Untuk Pengguna AdBlocker Adsense

Ditulis oleh: Adhy Suryadi

Ditulis pada: 3/16/2017

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.


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.