How to

Disable Ad block Warning Message On Blogger [ Updated]

Disable Ad block Warning Message On Blogger [ Updated]

Nowadays disable Adblock warning message on blogger very important for Running Google Adsense ads. These ads show on my blogs and users click on ads and we earn money so we told you how to show warning disable Adblock warning message on blogger. We have Update Anit ad blocker Script to latest version

Disable Ad block Warning Message On Blogger

I will share a tutorial on how to provide Adsense ad blocker notifications when users access the blog and activate the ad block extension in the browser.

What is Adblock?

Adblock is an extension for browsers which disables the ads on websites to increase loading speed and to show the real content of the website. They simply block the script of ads so that they can’t appear and work.

Many people are using this extension and you can see that by the number of downloads. Recently, ad block website said that their extension is being used by over 50 million people worldwide.

What will this code do?

This code will show a warning message to every visitor who has Adblock extension in their browser. They wouldn’t be able to access your blog until they disable their Adblock extension.

That’s a huge number and I think it will somehow affect on your blog too. Well, you’re working hard on your blog because you want to earn from your blog so you must work on this point also.

New: How To Add Anti Adblock Script for blogger

/* Notification 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}{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);}
.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)}}

Also add CSS below (smartphone display only)

<b:if cond='data:blog.isMobileRequest == "true"'>
<style type='text/css'>
.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;}
<script type='text/javascript'>
// 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);
<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='' 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>

Here I add a font awesome icon and make sure on your blog you have added the CSS font awesome library. If not, you can delete the marked code.

How to Hide Blog Content If Javascript Is Disabled

Here is an additional trick if the user disables/blocks Javascript specific site addresses in browser settings, this usually happens when the user wants to disable certain functions on the site he is blocking. The way this trick works is to hide the contents of the blog content with a notification display like in the tutorial above. Here I take advantage of NoScript conditions when a webpage is loaded, below are examples of images of sites that are blocked

Here’s How to Hide Blog Content If Javascript is Disabled, add the following code before < / head >

<div class='noscript'>
<p>Please Enable Javascript to view our site content</p>
<p>Thank you</p>

Now Add This Code Before Closing Body Tag

<div class='noscript'>
<p>Please Enable Javascript to view our site content</p>
<p>Thank you</p>

Finally, save the template. Thus a brief tutorial on Disable Ad block Warning Message On Blogger [ Updated]. Hopefully useful for all friends, thank you.

Related Articles

Leave a Reply