Pehawe Official

Home
Blogger

Membuat Notifikasi (Pesan) Adblocker Adsense Ala Arlina Design

Dan pada kesempatan kali ini akan saya bagikan sebuah Cara Membuat Pesan atau Notikasi Adblocker Adsense Ala Arlina Design dan Kompi Ajaib. Jika mendengar nama kedua mastah blogger ini pasti sudah asing bagi para blogger jaman old dan jaman now
Adblocker merupakan sebuah Add-Ons atau Extensi sebuah browser yang berfungsi untuk memblokir iklan yang di tampilkan di blog kita tak terkecuali iklan Adsense yang sebenarnya tidak mengganggu pengunjung ketika mengakses blog kita. Akan tetapi tidak sedikit orang memasang Adblocker ini dikarenakan sudah banyak blog ataupun website yang menggunakan iklan Popup dan lainnya yang sering mengganggu aktifitas pengunjung. Adblocker ini mempunyai banyak macam seperti Adblock, Adblock Plus, uBlock Origin dan masih banyak yang lainnya yang fungsi utamanya adalah sama-sama memblokir iklan yang di tampilkan di sebuah blog.

Dengan adanya Adblocker ini pastinya akan cukup merugikan para Publisher Adsense, dikarenakan dengan adanya add ons yang satu ini otomatis iklan Adsense yang di pasang di blog tidak akan tampil. Dan untuk mengatasi hal tersebut, diperlukan sebuah cara halus agar pengunjung blog kita tidak mengaktifkan adblocker ketika berkunjung di blog kita.

Dan pada kesempatan kali ini akan saya bagikan sebuah Cara Membuat Pesan atau Notikasi Adblocker Adsense Ala Arlina Design dan Kompi Ajaib. Jika mendengar nama kedua mastah blogger ini pasti sudah asing bagi para blogger jaman old dan jaman now. Selain dari tips trik yang bermanfaat, kedua mastah blogger ini juga sudah banyak mendesain template keren yang sudah banyak digunakan oleh para blogger lokal bahkan nonlokal. Biar tidak panjang lebar, silahkan simak Cara Membuat Pesan atau Notifikasi Adblocker Adsense Arlina Design dan Kompi Ajaib berikut :


Membuat Notifikasi Pesan Adblocker Adsense Ala Arlina Design

Notikasi Adblocker Adsense disini ada 2 Style yang dapat agan pilih mana yang cocok untuk agan pasang di blog agan.

Style 1 (Standart)



Style 2 (Full Display)



Pertama, login blogger > Template > Edit HTML > Kemudian tambahkan kode CSS berikut tepat di atas kode ]]></b:skin> atau </style>

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:#1398ec;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:#0079c4;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)}}


CSS Style 2

/* Notifikasi Adblocker Adsense */
#keep-ads{background:rgba(255,255,255,.95);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;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)}}


CSS Tambahan khusus tampilan mobile (smartphone, iphone dll) agar tampilan notifikasi adblocker ini responsive (full display)

<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 Javascript berikut tepat 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>
<b:if cond='data:blog.pageType != "static_page"'>
<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  <i><b><a href='https://www.pehawe.me/p/pehawe-whitelisting.html' target='_blank' title='Show me how'>how to whitelisting</a></b></i>  this blog in your ad blocker</p>
<p>Thank you</p>
</div>
<div class='close-keep-ads' onclick='hidekeep()'>&#215;</div>
</div>
</div>
</b:if>

Di sini saya menambahkan ikon fontawesome dan pastikan di blog agan sudah menambahkan library css fontawesome. Jika tidak, agan bisa hapus pada kode yang ditandai warna merah jambu. Untuk menghilangkan tombol close pada notifikasi adblocker silahkan hapus kode yang ditandai warna kuning

Edit url yang di tandai dengan url halam whitelisting blog agan.
Selanjutnya Simpan Template

Notifikasi adblocker akan tampil disemua halaman, kecuali di halaman statis blog.
Source : https://www.arlinadzgn.com/2017/02/notifikasi-adblocker-adsense-ala-kompi-ajaib.html

Itulah Tutorial bagaimana Membuat Notifikasi (Pesan) Adblocker Adsense Ala Arlina Design yang dapat saya bagikan kali ini. Semoga bermanfaat teruntuk kalian para publisher adsense di indonesia dan Salam luar biasa.