Membuat Notifikasi Adblocker Adsense

Halo sobat Blogger ketemu lagi setelah kemarin 1 minggu tidak posting dikarenakan sibuk menyambut Idul Fitri 1438 H, sebelumnya saya mengucapkan Selamat Hari Raya Idul Fitri bagi kita semua Muslim yang merayakan. Dispostingan kali ini kita akan membahas kembali Tutorial Blogger yaitu Membuat Notifikasi Adblocker Adsense.

Tentu sobat semua sudah mengetahui apa itu Adblocker, yaitu tools yang menghalangi tampilannya suatu iklan pada blog yang dikunjungi oleh pembaca, ada sisi positif dan negatifnya, disatu sisi dari pengunjung tentu ini akan mempermudah loading blog dan tiadkmenghambat tampilan karena banyak para blogger yang menurut saya cara menempatkan iklannya menggangu tampilan dari isi postingan, terutama untuk jenis iklan yang popup tentu aka membuat jengkel juga pengunjung yang tiba-tiba iklan muncul bahkan sampai menutupi isi dari konten.

Dari sisi si penerbit postingan tentu hal ini juga sangat mempengaruhi dari sisi pendapatan Iklan yang dipasangnya terutama bagi Publisher Adsense Google yang kalo menurut saya sih tampilan Iklan GA tidak menggangu isi dari konten karena memang sudah menjadi aturan dasar dari GA yang wajib dilaksanakan oleh Semua Publishernya.

Nah terkait dengan hal tersebut pada postingan kali ini kita akan membahas Cara mensiasati Tool Adblocker untuk di pasang pada Blog kita, untuk sobat yang mau mencobanya mari kita bahas Cara Membuat Notifikasi Adblocker Adsense di Blog.

Langkah Pertama

Pastikan sobat sudah memasang Library CSS Font Awesome pada template blognya karena cara ini akan bisa berjalan notifikasi Adblockernya menggunakan Library CSS Font Awesome.

Langkah Ke Dua

Disini akan kita berikan dua style atau mode dari tampilan notifikasi Adblockernya, silahkan sobat salin kode CSS dibawah ini lalu letakkan diatas kode ]]></b:skin> atau </style>.

Kode CSS Style 1

/* 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)}}

Kode CSS Style 2

/* 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)}}

Kemudian untuk tampilan device mobile agar bisa tampil juga di smartphone tambahkan juga kode CSS ini.

<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>

Langkah Ke Tiga
Silahkan sobat salin kode Javascript ini lalu letakkan diatas 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>

Langkah Ke Empat
Silahkan sobat salin kode HTML ini lalu letakkan dibawah kode <body>, kode HTML ini pun disajikan dalam 2 style atau bentuk tampilan.

Tamplilan HTML style 1

<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.dibalikseo.com/p/whitelisting.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>

Tampilan HTML style 2

<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.dibalikseo.com/p/whitelisting.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>

Perhatikan kode yang ditandai http://www.dibalikseo.com/p/whitelisting.html silahkan sobat ganti dengan url laman sobat.

Jika sobat merasa sepertinya untuk tampilan device mobile dan untuk di halaman statis tidak perlu menggunakan Adblocker, sobat bisa siasati dengan menambahkan tag kondisional, silahkan sobat tambahkan kode dibawah ini.  

<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<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.dibalikseo.com/p/whitelisting.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>
</b:if>
</b:if>

Selesai silahkan SAVE.

Namun terkadang ada beberapa diantara pengunjung yang sengaja mengnonaktifkan Javascript pada Browsernya, hal ini bisa kita tambahakan juga trik untuk mengatasinya biar sekalian konten atau postingan tidak dapat tampil sebelum pengunjung mengaktifkan kembali Javascript pada setingan browsernya.

Trik ini cukup mudah sobat hanya menambahkan sedikit kode No Script CSS, silahkan sobat salin kode ini lalu letakkan diatas kode </head>. 

<noscript>
<style type='text/css'>
/* No Script */
body,html{overflow:hidden}
.noscript{background:#e74c3c;color:#fff;padding:8% 0 0 0;position:fixed;bottom:0;left:0;top:0;right:0;z-index:1000;height:auto;-webkit-transform:translateZ(0);transform:translateZ(0);overflow:hidden}
.noscript p{margin:0;text-align:center;padding:0 20px 10px 20px;margin:auto;font-size:3rem;line-height:1.5;font-family:monospace;max-width:1010px;text-transform:uppercase;font-weight:700}
.noscript p span{color:#ffe88b;font-size:10rem;line-height:normal;font-weight:normal}
</style>
</noscript>

Setelah itu tambahkan kembali kode No Script HTML ini lalu letakkan tepat dibawah kode <body>.

<noscript>
<div class='noscript'>
  <p><span>&#9888;</span></p>
  <p>Please Enable Javascript to view our site content</p>
  <p>Thank you</p>
</div>
</noscript>

Dan SELESAI, silahkan sobat SAVE lalu coba tampilkan.