Membuat Notifikasi (Pesan) Adblocker Adsense Ala Arlina Design

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 sebetulnya tidak mengganggu pengunjung saat mengakses blog kita. Akan tetapi tidak sedikit orang memasang Adblocker ini dikarenakan sudah banyak blog ataupun website yang memakai iklan Popup dan lainnya yang sering mengganggu aktifitas pengunjung. Adblocker ini memiliki banyak macam menyerupai Adblock, Adblock Plus, uBlock Origin dan masih banyak yang lainnya yang fungsi utamanya yakni 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, diharapkan sebuah cara halus biar pengunjung blog kita tidak mengaktifkan adblocker saat berkunjung di blog kita.

Dan pada kesempatan kali ini akan aku bagikan sebuah Cara Membuat Pesan atau Notikasi Adblocker Adsense Ala Arlina Design dan Kompi Ajaib. Jika mendengar nama kedua mastah blogger ini niscaya 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 dipakai 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 sanggup 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 arahan CSS berikut sempurna di atas arahan ]]></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) biar 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 sempurna diatas arahan </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://info.materialapk.comp/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 aku menambahkan ikon fontawesome dan pastikan di blog agan sudah menambahkan library css fontawesome. Jika tidak, agan sanggup hapus pada arahan yang ditandai warna merah jambu. Untuk menghilangkan tombol close pada notifikasi adblocker silahkan hapus arahan 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://info.materialapk.com/search?q=notifikasi-adblocker-adsense-ala-kompi-ajaib

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

Share this post