Postingan sekarang akan membahas tentang cara memasang Notifikasi Adblock Simpel. Sebelumnya, Adblock adalah ekstensi browser yang digunakan untuk mencekal iklan untuk muncul pada blog. Kebanyakan orang menggunakan adblock untuk iklan-iklan yang mengganggu dalam blog. Namun iklan Google Adsense juga dapat terkena adblock.
Tetapi, blogger siapa yang tidak kesal jika pengunjung menggunakan adblock mengunjungi blog nya? Tentu iklan tidak akan muncul pada pengunjung sehingga tidak terdeteksi oleh pengiklan. Dengan begitu sama saja mengurangi penghasilan walau hanya beberapa puluh pengunjung.
Untuk kode atau script notifikasi adblock yang diberikan di postingan ini awalnya bersumber dari blog http://www.arlinadzgn.com/2017/02/notifikasi-adblocker-adsense-ala-kompi-ajaib.html kemudian saya edit sedikit sesuai keinginan saya.
Notifikasi akan muncul apabila mengaktifkan ekstensi adblock pada browser dan website yang tidak masuk dalam whitelist.
Tampilan:
Cara Memasang Notifikasi Adblock
1. Buka Blogger.com > Template > Edit HTML. Lalu simpan CSS berikut diatas ]]></b:skin>
#keep-ads{padding:0;position:fixed;bottom:400px;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{border-radius:5px;background:#3498DB;color:#fff;position:absolute;text-align:center;padding:0 30px 30px 30px;margin:auto;top:25%;left:0;right:0;font-size:1.5rem;line-height:2.0;font-family:monospace;max-width:80%;box-shadow:0 20px 10px -10px rgba(0,0,0,0.15);transition:all .6s cubic-bezier(.25,.8,.25,1);border:15px solid rgba(0,0,0,.07);overflow:hidden;}
.keep-adsme:hover{box-shadow:0 20px 10px -10px rgba(0,0,0,0.2);}
.keep-adsme h4{display: inline-block;background: rgba(0,0,0,.04);padding: 5px 25px 5px 25px;font-size: 2.2rem;border-radius: 5px;margin-top: 20px;}
#keep-ads p{margin:0;font-size:15pt;}
#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:#e74c3c;text-align:center;position:absolute;bottom:10px;right:10px;font-size:42px;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)}}2. Selanjutnya simpan Javascript berikut tepat diatas </body>
<script type='text/javascript'>
//<![CDATA[
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>3. Untuk yang terakhir, simpan HTML berikut dibawah kode <body>
<div id='keep-ads'>
<div class='keep-adsme'>
<p><h4>Adblock Detected</h4></p>
<p>Kami mendeteksi bahwa Adblock anda aktif.</p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWr75gJbKyiBJz4MRe4VI7niHWNo5IO_JfhlEEVVjWWIpzffDjlRO2uKkCWOan3vVTvyuHxIM4wRpVnQZRBYNyqiUyOrj9pi-NGXVFOa0gftv6NUqL1lrkZymsw2FtywdvySX06vrjP3s/s1600/AdblockKakzer.png" width="150" alt="Adblock Detected"/>
<p>Mohon untuk menonaktifkan adblock untuk menghargai blog ini.</p>
<p>Atau <a href="#" target="_blank" title="Adblock">filter adblock</a> pada blog ini.</p>
<p>Terima kasih.</p>
<div class='close-keep-ads' onclick='hidekeep()'>×</div>
</div>
</div>Untuk kode yang saya beri warna kuning bisa dengan link postingan anda. Dan untuk kode CSS berwarna biru bisa diganti dengan selera anda.
4. Setelah itu save, nyalakan adblock dan lihat hasilnya.
Semoga kamu suka dengan notifikasi Adblock. Mungkin hanya itu saja untuk postingan tentang Cara Memasang Notifikasi Adblock Simpel kali ini. Semoga bermanfaat dan apabila ada kesalahan kode, segera beritahu lewat komentar.