Rabu, 15 Februari 2017

Cara Membuat Notifikasi (Pesan) Anti-AdBlock Ala Arlina Design

Notifikasi Adblocker Adsense Ala Kompi Ajaib
Cara Membuat Notifikasi (Pesan) Anti-AdBlock Ala Arlina Design -  Mungkin sobat pernah mendengar atau bahkan menggunakan Plugin AdBlock, atau mungkin baru tau saat ini... AdBlock adalah add on pemblokir iklan yang sudah disediakan oleh browser FireFox, Chrome dll.

Sudah bukan rahasia lagi bahwa kebanyakan Blogger mencari keberuntungannya dari iklan di blog yang dikelolanya. Dan bukan rahasia pula bahwa para pengunjung kemudian merasa terganggu dengan iklan-iklan yang tampil pada suatu blog. Bagi para pengunjung blog yang sudah memahami konsep periklanan tentunya akan menghormati para pemilik blog yang sudah menghabiskan banyak waktunya hanya untuk menulis artikel dengan cara menonaktifkan perangkat lunak pemblokir iklan.

Cara kerja script ini, apabila pengunjung mengaktifkan AdBlock maka otomatis peringatan akan tampil.

Di blog Alfin Media ini sebenarnya kalau nggak salah. Saya sudah membuat dua artikel tentang  Anti-AdBlock.



Membuat Notifikasi "Pesan" Anti-AdBlock Ala Arlina Design (Adsense dan Iklan lainnya)


1. Kalian buka Blogger > Edit HTML.
2. Kemudian carilah kode </style> . Setelah itu kalian taruh kode CSS di bawah ini tepat di bawah kode </style> .

<b:if cond='data:blog.isMobileRequest == "true"'>
<style type='text/css'>
.keep-adsme{top:0;padding:15px;border:0;font-size:1.1rem;opacity:.99;bottom:0;font-family:arial;}
.keep-adsme h4{background:transparent;font-size:1.5rem;margin:40px auto 0 auto;}
.close-keep-ads{text-align:center;visibility:visible;opacity:1;color:#fff;bottom:20px;right:20px;padding:0;font-size:32px;width:38px;height:38px;line-height:32px;border-radius:100%;border:2px solid #fff;transform:translate(0,0);}
.close-keep-ads:hover,.keep-adsme:hover .close-keep-ads{background:#fff;color:#e74c3c;}
</style>
</b:if>
<style type='text/css'>
/* Notifikasi Adblocker Adsense */
#keep-ads{padding:0;position:fixed;bottom:0;opacity:0;height:auto;transition:all .6s cubic-bezier(.25,.8,.25,1);-webkit-transform:translateZ(0);transform:translateZ(0);backface-visibility:hidden;transition:all .2s ease-in-out,visibility 0s;transform-origin:bottom center;}
.keep-adsme{background:#e74c3c;color:#fff;position:absolute;text-align:center;padding:0;margin:auto;top:30%;left:0;right:0;font-size:1.2rem;line-height:1.5;max-width:930px;box-shadow:0 0 50px rgba(0,0,0,0.25);transition:all .6s cubic-bezier(.25,.8,.25,1);overflow:hidden}
.keep-adsme:hover{box-shadow:0 0 20px rgba(0,0,0,0.15);}
.keep-adsme h4{background:#d04537;color:#fff;padding:15px 25px;font-size:2.2rem;margin:0 auto;border-bottom:1px solid rgba(0,0,0,0.1);}
.keep-me{border-top:1px solid rgba(255,255,255,0.1);padding:10px 30px 50px 30px}
#keep-ads p{margin:0}
#keep-ads a{color:#ffe88b;}#keep-ads a:hover{color:#ffe88b;text-decoration:underline}
#keep-ads.show{left:0;top:0;right:0;z-index:1000;pointer-events:auto;opacity:1;visibility:visible;transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1);animation:wobble .7s;opacity:1;}
.close-keep-ads{visibility:hidden;opacity:0;color:#ffe88b;text-align:center;position:absolute;bottom:10px;right:10px;font-size:32px;cursor:pointer;width:30px;height:30px;line-height:30px;border-radius:100%;transition:all .6s cubic-bezier(.25,.8,.25,1);transform:translate(0,50px);}
.close-keep-ads:hover{color:#fff;transform:scale(1.0);}
.keep-adsme:hover .close-keep-ads{visibility:visible;opacity:1;color:#ffe88b;transform:translate(0,0);}
#keep-ads p span {font-family:fontawesome;font-size:5rem;}
@keyframes wobble{0%{transform:scale(0) rotate(-54deg) translatey(40px)}45%{transform:scale(1.1) rotate(20deg) translatey(0px)}60%{transform:scale(1) rotate(-15deg) translatey(0px)}77%{transform:scale(1) rotate(10deg) translatey(0px)}100%{transform:translatey(0)}}
</style>

3. Sesudah kalian melakukan langkah sebelumnya, selanjutnya kalian taruh kode Javascript dan HTML di bawah ini tepat di atas kode </body> .

<div id='keep-ads'>
<div class='keep-adsme'>
<p><h4>Adblock Detected</h4></p>
<div class='keep-me'>
<p><span><i aria-hidden='true' class='fa fa-exclamation-triangle'></i></span></p>
<p>Like this blog? Keep us running by whitelisting this blog in your ad blocker</p>
<p>This is <a href='http://www.alfinauzikri.xyz/p/whitelist.html' target='_blank' title='Show me how'>how to whitelisting</a> this blog in your ad blocker</p>
<p>Thank you</p>
</div>
<div class='close-keep-ads' onclick='hidekeep()'>&#215;</div>
</div>
</div>
<script type='text/javascript'>
//<![CDATA[
// Notifikasi Adblocker Adsense
function hidekeep(){document.getElementById("keep-ads").style.display="none"}setTimeout(function(){var e=document.getElementById("keep-ads"),t=document.querySelectorAll("ins.adsbygoogle");0===$(t).height()&&(e.className="show")},2e3);
//]]>
</script>

4. Simpan Template .
5. Kemudian tes dengan mengaktifkan AdBlock di browser kalian. Jika berhasil terpasang dengan baik notifikasi ( pesan ) Anti - AdBlock akan muncul.


Jadi jika ada pengunjung yang mengunjungi website kita. Secara otomatis notifikasi ( pesan ) anti-adblock tersebut akan muncul untuk memperingati pengguna tersebut agar mematikan adblock nya. Selain pesan ini sangat ringan di muat " Loading " dan Responsive. Dan notifikasi ini tidak akan mengganggu pengguna yang mengunjungi website kita karena jika pengunjung tetap mengaktifkan Adblock nya pengunjung tetap bisa berada di dalam website kita untuk membaca.

Sekian tutorial dari saya. Jika ada kesalahan atau error silahkan bisa berkomentar.

Sumber : Arlina Design & Kompi Ajaib

Artikel Terkait

Hidup itu sederhana, namun seringkali kita lah yang membuatnya menjadi sulit.