Cara Membuat Notifikasi AdBlock Detected Agar AdSense Bekerja di Blog - Adblock adalah ekstensi yang terdapat disuatu Browser untuk menhindari munculnya Annoying Ads saat sedang browsing.
Tapi bagi si pemilik situs, Adblock adalah salah satu hal yang dihindari, karena sebagian besar pendapatan si pemilik bergantung pada Iklan.
Baca Juga: Cara Membuat Kotak Script Responsive dan Flat di Postingan Blog
Nah bagi kamu yang ingin menambahkan notifikasi Adblock Detected agar penghasilan AdSense dapat berjalan dengan lancar, Simak caranya dibawah ini.
Cara Membuat Notifikasi AdBlock Detected Agar AdSense Bekerja di Blog
1. Masuk ke Blogger. Pilih Tema > Edit HTML > Tambahkan script CSS di bawah ini tepat diatas kode ]]></b:skin> atau </style>
2. Tambahkan juga CSS di bawah ini sesudah script CSS diatas (khusus tampilan smartphone)
3. Lalu tambahkan Javascript di bawah ini tepat di atas kode </body>
4. Kemudian tambahkan juga HTML dibawah ini bebas diantara kode <body> dan </body>
ganti link url blog ini dengan url tujuan. contoh isi dari link tersebut saya dapatkan dari blognya Arlina Design yang bersumber dari blog Kompi Ajaib.
Tapi bagi si pemilik situs, Adblock adalah salah satu hal yang dihindari, karena sebagian besar pendapatan si pemilik bergantung pada Iklan.
Baca Juga: Cara Membuat Kotak Script Responsive dan Flat di Postingan Blog
Nah bagi kamu yang ingin menambahkan notifikasi Adblock Detected agar penghasilan AdSense dapat berjalan dengan lancar, Simak caranya dibawah ini.
Cara Membuat Notifikasi AdBlock Detected Agar AdSense Bekerja di Blog
1. Masuk ke Blogger. Pilih Tema > Edit HTML > Tambahkan script CSS di bawah ini tepat diatas kode ]]></b:skin> atau </style>
/* 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)}} 2. Tambahkan juga CSS di bawah ini sesudah script CSS diatas (khusus tampilan smartphone)
<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> 3. Lalu tambahkan Javascript di bawah ini tepat di atas 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> 4. Kemudian tambahkan juga HTML dibawah ini bebas diantara 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='https://dirukmana-28.blogspot.com' 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> Disini saya menambahkan ikon fontawesome yaitu gambar segitiga peringatan dan pastikan di blog kamu sudah menambahkan css library fontawesome. jika tidak hapus kode yang berlatar belakang oren atau jika ingin memasang css library fontawesome kamu bisa cari di google.
ganti link url blog ini dengan url tujuan. contoh isi dari link tersebut saya dapatkan dari blognya Arlina Design yang bersumber dari blog Kompi Ajaib.
