Cara Memasang Script Anti Adblocker AdSense Di Blog - Cari Aja Disini

Cara Memasang Script Anti Adblocker AdSense Di Blog


Cara Memasang Script Anti Adblocker AdSense Di Blog

Pada artikel kali ini saya akan membahas bagaimana cara memasang sebuah script yang dapat digunakan untuk mencegah atau anti adblocker yang biasa di gunakan pada browser pengguna untuk mencegah iklan adsense atau lainnya tampil.

Saya sering sekali membaca postingan di forum blogger, dimana banyak yang mengeluh tentang pendapatan adsense nya yang menurun atau tidak pernah naik padahal visitor banyak namun yang klik iklan sedikit sekali bahkan tidak ada. Ada banyak faktor yang bisa menjadi penyebab hal itu terjadi, yaitu salah satunya adalah pengunjung blog memasang plugin adblocker di browser mereka, sehingga jika mereka sedang membuka situs tidak terganggu oleh iklan. Tentu kita tidak dapat serta merta menyalahkan pengguna yang menggunakan plugin tersebut, karena browser itulah yang menyediakan itu, yang harus dilakukan adalah mencari cara bagaimana mengatasi blog terhindar dari adblocker.

Berikut ini akan dijelaskan tutorial menampilkan notifikasi jika pengguna terdeteksi menggunakan plugin adblocker.

Cara Memasang Script Anti Adblocker AdSense


1. Notifikasi Style 1

Notifikasi Anti Adblocker
Pertama buka Dashboard blogger -> pilih Tema -> klik Edit HTML->tambahkan CSS berikut sebelum 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)}}

Kemudian tambahkan juga CSS untuk tampilan Mobile berikut ini:


/* Notifikasi Adblocker Adsense */
<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>

Selanjutnya tambahkan kode Javascript berikut sebelum tag </body>

/* Notifikasi Adblocker Adsense */
<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>

Lalu tambahkan kode HTML berikut dibawah tag <body> atau sebelum </body>

/* Notifikasi Adblocker Adsense */
<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.cariajadisini.com/p/whitelisting-cari-aja-disini.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()'>&#215;</div>
</div>
</div>

Rubah tulisan bewarna merah di atas dengan halaman yang kamu miliki

2. Notifikasi Style 2

Notifikasi Anti Adblocker 2

Tambahkan CSS berikut sebelum 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;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)}}

Lalu tambahkan CSS untuk tampilan Mobile

/* Notifikasi Adblocker Adsense */
<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>

Kemudian tambahkan kode berikut sebelum tag </body>

/* Notifikasi Adblocker Adsense */
<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 kode berikut dibawah tag <body> atau sebelum </body>

/* Notifikasi Adblocker Adsense */
<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'/></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.cariajadisini.com/p/whitelisting-cari-aja-disini.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>

Silahkan rubah tulisan bewarna merah di atas dengan alamat halaman yang kamu miliki.

Baca Juga:
Cara Memasang Script lazy Load Adsense Di Blog
Cara Mengatasi Iklan Adsense Tidak Tampil (Blank)
Cara Menghilangkan Credit Link Redirect Template Blog
Cara Memasang Cookies Blog Beserta Manfaatnya

Kesimpulan


Nah itu tadi tutorial cara memasang script anti adblocker iklan adsense di blog, cara kerja dari script di atas adalah mendeteksi browser yang menggunakan plugin adblocker selanjutnya notifikasi peringatan akan muncul di browser pengguna jika dia terdeteksi menggunakan plugin tersebut. Sehingga pengguna mengharuskan mematikan adblocker browser miliknya untuk dapat melihat atau membaca artikel pada blog kita. Semoga artikel ini dapat membantu dan bermanfaat bagi kita semua. Jangan lupa share dan komen apakah kamu mempunyai cara lain untuk mengatasi adblocker yang lebih efektif. Terimakasih :)

Jangan lupa bagikan artikel ini ya!

Berikan pendapatmu tentang artikel ini

Notification
Ini adalah popup notifikasi.
Done