Cara Buat Notifikasi Adblockers Adsense

Mei 12, 2017

Notifikasi Adblockers Versi Komi Ajaib

XDTPD Blogs | Kali ini saya ingin berbagai cara memasang notifikasi adblockers adsense pada blog kita. Notifikasi ini sangat bermanfaat untuk mencegah orang yang memakai ektensi adblock di browser mereka saat mengunjungi blog kita. Cara ini saya dapatin dari Blog Kompi Ajaib dan Arlina Design. Dalam tutorial ini saya memabagikan script notifikasi yang telah di modif oleh mbak arlina yang bisa diclose saat notifikasi tersebut tampil.

#Langkah-Langkah Menambah Notifikasi Adblockers Adsense

Pertama, silahkan sobat masuk kedashboard blogger seperti biasanya, kemudian klik pada menu Theme > Edit HTML dan tambahkan CSS dibawah 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)}}

Tambahkan juga CSS berikut untuk tampilan Smartphone ataupun versi Seluler

<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 dibawah ini sebelum 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>

Kemudian, tambahkan kode HTML dibawah ini bebas diantara kode <body> dan </body>

<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.xdtpd.net/2017/05/jasa-pembuatan-blog-full-optimasi.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()'>×</div> </div> </div>

Kemudian edit URL ataupun link yang ada pada kode HTML tersebut dengan alamat URL milik blog sobat dan save templatenya. Nah, itulah langkah-langkah menambahkan notifikasi adblockers ala versi ajaib. Semoga bermanfaat dan berguna bagi semuanya. Dan jangan lupa untuk berkunjung dilain waktu karena blog ini akan slelau update berbagai artikel menarik lainnya.

XDTPD Network

Cara Buat Notifikasi Adblockers Adsense

XDTPD Blogs

TAUTAN CEPAT

FOLLOW XDTPD BLOGS