Donation  Momo Buy me a coffee!

How to Add Anti Ads Blocker Notification in Blogger Template?

Today in this post I am going to share a tutorial on How To Install Anti Adblock Notification Script on Blogger blog.
How to Add Anti Ads Blocker Notification in Blogger Template?
How to Add Anti Ads Blocker Notification in Blogger Template?

Installing an anti adblocker notification on the blog makes everyone have to deactivate the adblock they use in the browser they use to be able to read or open your blog. By installing this adblock notification, your blog visitors will see a message or notification to turn off the adblock that is in the browser they are using.

Today in this post I am going to share a tutorial on How To Install Anti Adblock Notification Script on Blogger blog.

What is AdBlock?

Before understanding how adblock works, you need to understand how ad types work. All the ad formats we see whether banner, video, flash or text are stored on the ad servers and every time a web page is loaded, the ad code in the website sends requests to the ad servers. and then new ads are downloaded from these ad servers and displayed on the website.

Adblock applications like (Adblock Plus, uBlock, etc.) are actually browser extensions that are able to intercept HTTP and HTTPS requests of ad servers as well as prevent iframes, scripts and Flash from being loaded on the browser. These apps can also automatically hide text ads on website content instead of blocking them. These Adblocks work both on desktop browsers and on mobile phone browsers although the mobile version is not as stable as it is and depends on whether the device is rooted or not.

What is Anti Adblock Notification?

Nowadyas most internet users are using an ad blocker on their web browser, so they can easily disable our blog's or website's ads. when you install the Anti Adblock Notification script on the blog a notification will appear that adblock installed on the browser must be deactivated in order to be able to visit the site.

The way it works has also been quite clear. Readers using these ad filters are not allowed to access the page before closing their AdBlock Or the reader puts our URL in the white list.

How to detect adblock users and why we need to add Anti Adblocker Script in the blog?

Ablock means that ads will be blocked -> web users will not be able to see ads -> ad revenue will be reduced for that website. This is not a good thing for websites that live mainly on advertising revenue. And the numbers on the upper part make website managers feel more anxious than ever.

Some publishers and websites have responded to this situation by using a number of methods to detect adblock users to take appropriate action. 

How to Install Anti Adblock on Blogger Blog?

Making adblock notifications on blogspot is very easy, you only need to enter the javascript code below in the section of your blog widget, please follow the steps below:
Step 1: First of all Login to your Blogger Dashboard..
Step 2: On Blogger Dashboard., click Theme.
Step 3: Click the arrow down icon  next to 'customize' button.
Step 4: Click Edit HTML, you will be redirected to editing page.
Step 5: Now pressing Ctrl + F to find the code ]]></b:skin> and paste the following CSS Codes just Above the ]]></b:skin>  tag .

 #anti-adblock {

background: rgba(28, 39, 51, 0.67); position: fixed; margin: auto; left: 0; right: 0; top: 0; bottom: 0; overflow: auto; z-index: 999999; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px) } #anti-adblock .header { margin: 10px 0 20px 0; position: relative; top: initial; left: initial } #anti-adblock .header h2 { color: #222; font-size: 1.8rem } #anti-adblock .inner { background: #fff; border-radius: 8px; color: #222; box-shadow: 0 0 2rem -1rem rgba(0, 0, 0, 0.5); text-align: center; width: 100%; max-width: 640px; padding: 30px; margin: 7% auto 2% auto; animation: flipInX 1s } #anti-adblock button { position: relative; overflow: hidden; padding: 6px 20px; background: #f5aa33; color: #fff; margin: 20px 5px; cursor: pointer; border-radius: 8px; font-size: 13px; font-weight: 500; border: 2px solid #f5aa33; transition: initial; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.01), 0 5px 10px rgba(0, 0, 0, 0.1) } #anti-adblock button:hover { background: #fff; color: #f5aa33; outline: none; border-color: #f5aa33 } #anti-adblock, #anti-adblock { background: #ee5253; color: #fff; border-color: #ee5253; outline: none } #anti-adblock .method { background: #f7f9f8; text-align: left; color: #000; padding: 20px; height: 250px; overflow: auto; line-height: 30px; border-radius: 8px; border: 1px solid rgba(155, 155, 155, 0.15) } #anti-adblock .method div { display: none } #anti-adblock .method { display: block; animation: fadeInUp .5s } #anti-adblock ul { margin-left: 20px } #anti-adblock button:after, #anti-adblock button:before { content: ''; display: block; position: absolute; bottom: 0; right: 0; left: 0; height: 50%; background: rgba(155, 155, 155, 0.15); background-repeat: no-repeat; transition: all .3s } #anti-adblock button:before { height: 0; top: 0; bottom: initial } #anti-adblock button:hover:after { height: 0 } #anti-adblock button:hover:before { height: 50% } @media only screen and (max-width: 680px) { #anti-adblock .inner { width: calc(100% - 20px); margin: 10px auto; padding: 15px } }
Step 6: Then pressing Ctrl + F to find the code </body> and Copy the javascript codebelow and place it above the </body> (before closing body tag). 

 <script type = 'text/javascript' >

//<![CDATA[ // Anti AdBlocker - www.SoiPro.Com ! function () { function f() { var a = document.createElement("div"); = "anti-adblock", a.innerHTML = '<div class="inner"> <div class="header"> <h2>Ad Blocker Detected</h2> </div> <div class="contents"> <p>Please consider supporting us by disabling your ad blocker</p> <div class="anti-adblock-button"><button class="1 active">Adblock</button><button class="2">Adblock Plus</button></div> <div class="method"> <div class="1 active"> <ul> <li>Click on the AdBlock icon in your browser<br /><img src="" alt="Adblock"></li> <li>Choose, Don\'t run on pages on this domain<br /><img src="" alt="Adblock" width="100%" max-width="300px"></li> <li>A new window will appear. Click on the "Exclude" button<br /><img src="" alt="Adblock" width="100%" max-width="300px"></li> <li>The browser icon should have turned grey<br /><img src="" alt="Adblock"></li> <li>Refresh the page if it didn\'t refresh automatically. Thanks!</li> </ul> </div> <div class="2"> <ul> <li>Click on the AdBlock Plus icon in your browser<br /><img src="" alt="Adblock"></li> <li>Click on "Enabled on this site" position<br /><img src="" alt="Adblock" width="100%" max-width="250px"></li> <li>Once clicked, it should change to "Disabled on this site"<br /><img src="" alt="Adblock" width="100%" max-width="250px"></li> <li>The browser icon should have turned grey<br /><img src="" alt="Adblock"></li> <li>Refresh the page if it didn\'t refresh automatically. Thanks!</li> </ul> </div> </div> </div> </div>', document.body.append(a), = "hidden"; var b = a.querySelectorAll("button"); a.querySelector(".close"); var d = a.querySelectorAll(".method > div"); for (a = 0; a < b.length; a++) b[a].addEventListener("click", function (a) { a.preventDefault(), a = this.getAttribute("class").split(" ")[0]; for (var c = 0; c < d.length; c++) d[c].classList.remove("active"), b[c].classList.remove("active"); b[a - 1].classList.add("active"), d[a - 1].classList.add("active") }) } var b = document.createElement("script"); b.type = "text/javascript", b.async = !0, b.src = "", b.onerror = function () { f(), window.adblock = !0 }; var e = document.getElementsByTagName("script")[0]; e.parentNode.insertBefore(b, e) }(); //]]> </script>
Step 7: Lastly, Save the changes by clicking on this icon 

Advantage or disadvantage Install Adblock Notifications on Blogger

For those of you who place adsense ads or other types of ads on a blog maybe by installing this script your income can increase.But, there are still other risks if you install this anti adblock script on the blog.

Disadvantage Using Anti Adblock Scripts

It turns out that installing adblock notifications on a blog can also affect the performance of your blog, some of the disadvantages you will face when installing this script include:

  • Loading blogs becomes a little longer Connecting this adblock script code uses JavaScript so loading your blog will be a little longer.
  • The number of visitors to the blog can decrease
  • Some people may still not know how to disable adblock on the browser they are using.
  • So when they open your site then an adblock notification appears and they don't know how to disable it, so they will leave your site or blog.
  • Or even they will not come to your website again if the content they are looking for is not so important.

Advantages of Using Anti Adblock Scripts

Besides the disadvantages, of course there are advantages to installing this Adblock notification script, namely:

  • If the visitor has disabled the adblock your ads impression will increase and you can earn through bid types and active view RPM or there will be a possibility that visitors click on your ad. So that income will increase By installing adblock notifications on the blog.


Well Thats's great tuts on How To Install Install Anti Adblock in Blogger. I hope it is useful for All. If you face any problem to regarding this post put your coment.

About the Author

Hello this is NVH Corp, I am Web Designer and Expert at SoiPro(dot)Com

Đăng nhận xét

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.