Membuat Notifikasi Adblocker Adsense

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

Tentu teman semua sudah mengetahui apa itu Adblocker, ialah tools yang menghalangi tampilannya suatu iklan pada blog yang dikunjungi oleh pembaca, ada sisi faktual dan negatifnya, disatu sisi dari pengunjung tentu ini akan mempermudah loading blog dan tiadkmenghambat tampilan alasannya banyak para blogger yang menurut aku 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 hingga menutupi isi dari konten.

Dari sisi si penerbit postingan tentu hal ini juga sangat mensugesti dari sisi pendapatan Iklan yang dipasangnya terutama bagi Publisher Adsense Google yang kalo menurut aku sih tampilan Iklan GA tidak menggangu isi dari konten alasannya 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 teman yang mau mencobanya mari kita bahas Cara Membuat Notifikasi Adblocker Adsense di Blog.

Langkah Pertama

Pastikan teman sudah memasang Library CSS Font Awesome pada template blognya alasannya cara ini akan mampu berjalan notifikasi Adblockernya menggunakan Library CSS Font Awesome.

Langkah Ke Dua

Disini akan kita berikan dua style atau mode dari tampilan notifikasi Adblockernya, silahkan teman salin aba-aba CSS dibawah ini lalu letakkan diatas aba-aba ]]></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 biar mampu tampil juga di smartphone tambahkan juga aba-aba 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 teman salin aba-aba Javascript ini lalu letakkan diatas aba-aba </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 teman salin aba-aba HTML ini lalu letakkan dibawah aba-aba <body>, aba-aba 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='https://justandmyguys.blogspot.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='https://justandmyguys.blogspot.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 aba-aba yang ditandai https://justandmyguys.blogspot.com/p/whitelisting.html silahkan teman ganti dengan url laman sobat.

Jika teman merasa sepertinya untuk tampilan device mobile dan untuk di halaman statis tidak perlu menggunakan Adblocker, teman mampu siasati dengan menambahkan tag kondisional, silahkan teman tambahkan aba-aba 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='https://justandmyguys.blogspot.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 mampu 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 teman hanya menambahkan sedikit aba-aba No Script CSS, silahkan teman salin aba-aba ini lalu letakkan diatas aba-aba </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 aba-aba No Script HTML ini lalu letakkan sempurna dibawah aba-aba <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 teman SAVE lalu coba tampilkan.