Cara Memasang Anti Adblocker Adsense di Blogger
Selamat malam, kali ini saya akan berbagi tutorial cara memberikan notifikasi adblocker adsense saat pengguna mengakses blog dan mengaktifkan ekstensi adblock di browser.
Tampilan notifikasi Adblocker Adsense akan muncul jika sobat mengaktifkan ekstensi adblock di browsernya akan terlihat seperti gambar di bawah ini
Pertama, buka Blogger > Template > Klik Edit HTML > Tambahkan CSS berikut sebelum kode ]]></b:skin> atau </style>
Kemudian tambahkan Javascript di bawah ini sebelum kode </body>
Selanjutnya, tambahkan HTML di bawah ini bebas di dalam kode <body> dan </body>
Demikian tutorial singkat tentang Cara Memasang Anti Adblocker Adsense di Blogger Semoga bermanfaat bagi sobat semua, terima kasih.
Tampilan notifikasi Adblocker Adsense akan muncul jika sobat mengaktifkan ekstensi adblock di browsernya akan terlihat seperti gambar di bawah ini
/* 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 30px 30px 30px;margin:auto;top:30%;left:0;right:0;font-size:1.5rem;line-height:1.5;font-family:monospace;max-width:930px;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,.07);padding:5px 25px 15px 25px;font-size:2.2rem;margin:0 auto}
#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: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)}}Kemudian tambahkan Javascript di bawah ini sebelum kode </body>
<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>Selanjutnya, tambahkan HTML di bawah ini bebas di dalam kode <body> dan </body>
<div id='keep-ads'>
<div class='keep-adsme'>
<p><h4>Adblock Detected</h4></p>
<p><span><i aria-hidden='true' class='fa fa-exclamation-triangle'/></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.anampedia.net/p/adblock.html' target='_blank' title='Show me how'>how to whitelisting</a> this blog in your ad blocker</p>
<p>Thank you</p>
<div class='close-keep-ads' onclick='hidekeep()'>×</div>
</div>
</div>Demikian tutorial singkat tentang Cara Memasang Anti Adblocker Adsense di Blogger Semoga bermanfaat bagi sobat semua, terima kasih.
