Update! Notifikasi Untuk Pengguna Adblocker Adsense

Ini ialah postingan untuk mengupdate postingan sebelumnya wacana cara menciptakan notifikasi dikala AdBlocker terdeteksi sehingga iklan adsense di blog tidak tampil.

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

Tentunya hal ini seolah-olah notifikasi menjadi sia-sia.

Nah pada postingan kali ini, aku mengupdate notifikasi AdBlocker Adsense semoga pengguna benar-benar mematikan AdBlocker.

Ketika AdBlocker terdeteksi, maka notifikasi akan muncul menutupi halaman dan mematikan scroll halaman. Tombol close aku 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 dikala tombol × (close) notifikasi diklik, halaman akan direfresh dan tentunya iklan Adsense akan muncul kembali dan otomatis notifikasi tidak akan muncul.

DEMO

Silahkan coba terusan halaman demo dengan AdBlocker

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

Silahkan copy aba-aba 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 aba-aba HTML di atas aba-aba </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 gosip = 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 memakai Jquery Library berapa pun versinya.


Sumber https://www.kompiajaib.com/

Share this post