Every visitor finds advertisements annoying, especially pop-up advertising. This is the reason why many internet junkies promote AdBlock, which gives users a rewarding experience but causes the most mental torment for bloggers. When a user uses ad-blocking software to prevent adverts from being displayed A blogger loses a lot of earning prospects as a result, which has a big impact on their income.
You may have seen that several WordPress Plugins have been developed to block intrusive advertising, however, a blogger needs to catch up in optimization. Because of this, Blogger does not have scripts exactly like WordPress, but what we do have is still important to take into account. Until they turn off AdBlock, this script will continue sending messages to visitors.
I'm going to give a tutorial on installing an anti-adblock notification script on a blogger blog in this post today.
What is AdBlock?
One of the browser's functions, AdBlock, is helpful for preventing adverts from appearing in the currently-accessed article. One of the numerous purposes users utilizes this function is to stop their devices from being forcibly led to harmful websites.
Installing AdBlock is typically done to allow users to read articles on a website without being bothered by intrusive advertisements. Because it is increasingly typical for site owners to include excessive adverts in an effort to increase cash, this can obviously irritate blog visitors.
Anti Adblock Notification: What is it?
Most internet users today use ad blockers, making it simple for them to turn off the advertisements on our website or blog. When you enable the Anti Adblock Notification script on the blog, a message stating that the browser's installed adblock must be disabled in order to access the site will show up.
Its operation has also been rather transparent. Before closing their AdBlock or adding our URL to their white list, readers using these ad blockers are not permitted to view the page.
Why is Anti Adblocker Script needed for the blog?
As we all know, if advertising does not appear on our blog or other websites when viewed through the web browser, how are we optimizing our blog earnings? Many people today use the Adblocker plugin to prevent ads in their web browsers. Therefore, we must find a technique to stop AdBlock from preventing the display of adverts.
As a result, I'm going to provide a script that detects when the user uses AdBlock and immediately displays a pop-up message requesting them to deactivate it. This script is made entirely of javascript and doesn't use jquery, so it will obviously be much lighter than those that do.
How Can Anti Adblock be Installed On A Blogger Blog?
You may easily create adblock notifications on Blogspot by simply pasting the following javascript code into the widget section of your blog. Please follow the instructions below:
First of All, You Need to Login With Your Blogger Account.
Then Click on Theme Menu.
Now Click on Edit HTML.
Paste the following css 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 button.active,#anti-adblock button:hover.active{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 div.active{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}}{codeBox}
Copy the javascript code below and place it above the </body> (before closing body tag).
<script type='text/javascript'>
//<![CDATA[
// Anti AdBlocker
!function(){function f(){var a=document.createElement("div");a.id="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="https://blogger.googleusercontent.com/img/a/AVvXsEjVV5qnf6xlAUeAoxM_HAtOWW9gHNIXFdhuZwNEUJVEgEfUIB9Hig1RMRFc-kQO4ZuRvG12-HvfvNq3eGWoITBH3dVN8BN-SQBLSKoQe7j1zLPZLWqqFni4AD7YRMMHaPRxOM3QGFyU2j5UAxYbvLGhbO2ccRvHtnulvELksahT-SoYd9JXIqURmqtN" alt="Adblock"></li> <li>Choose, Don\'t run on pages on this domain<br /><img src="https://blogger.googleusercontent.com/img/a/AVvXsEhfac1Bx5KMgXBVzdNq8Mw_kobbUgaRunIDbyQx-WHyM0-rvCj-QxM3IhKQEUovXytA1XOYFmK6luHwhNnVlOYhsjOE_j65N7VQiKvNS63EXcr4KCSrJ1RgG3Ivb7sF7AZ2SARMHHZHCvB5zNHG013RMBnNN3gXSB8bk8qqhFkyDL4ojZ1FxHphQ1iQ" alt="Adblock" width="100%" max-width="300px"></li> <li>A new window will appear. Click on the "Exclude" button<br /><img src="https://blogger.googleusercontent.com/img/a/AVvXsEi6PBdCbDVAMwflDr3oGGEgaWc-IXlNy47uZ37SS2Y7CrGn8VTtUizW1IUc9FUMQb9H6AbMaepOM-gNcYNmRVzYVcf0ORDEis2yWhGuJlaVDsq_Xv1nxU1X-X3Biv5UdBo4dv06bqHObSBeOUesq85hqbh2-9fVYuR5qYcsAk--XTLw7nn6IkHIhQpn" alt="Adblock" width="100%" max-width="300px"></li> <li>The browser icon should have turned grey<br /><img src="https://blogger.googleusercontent.com/img/a/AVvXsEjMN1MgI-QJWgMlLhLsRVpk3AZCqdT2huCk80o-2TtLUTiQUWHm6wfNL_0DPDJXPIRl7jF0u65XM8apgppNz3rH4_POoy7_B71RIKNDn7OfBFI5AiEQytfUjX8r4Jn9lmPrUdzereXkbH8G4Zv3nlY92EFP8nN3DgiGq2lwQnyN870zbpkWLMAK5ota" 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="https://blogger.googleusercontent.com/img/a/AVvXsEinXHNBxCdHMkpohhgHfLngIDAwB5MBPzM12BvmOjpQHj1H5R6TcqQCdv-3lgAlGSWL7U_KKixkyxKyMNUrWS91s8kap-j7webwqlx87KYRUMtohIvBS8_BFy2XkVf2kLAsOuq3nxUVO605lN1Nc797YN85pMhxvuUxffbZvHBiNKGK2YK1Wo-lQj8n" alt="Adblock"></li> <li>Click on "Enabled on this site" position<br /><img src="https://blogger.googleusercontent.com/img/a/AVvXsEi5ekBmhGQSvOdmaiEdOT035KwOpnBw3y-7A7fOzxJenZlEY-vJNyCcJra1LRB7fChSm-F0YQxzQoxdQnxepPYOWuVyIe2xG9V5DfFmvUytmvG9ik86BteC4Z1DDDbaLxsxEDQiQo79mSpsqcg3fXwCoWySuPulGArgD3Tjq4jwiHtuWLp0Ny2COWpo" alt="Adblock" width="100%" max-width="250px"></li> <li>Once clicked, it should change to "Disabled on this site"<br /><img src="https://blogger.googleusercontent.com/img/a/AVvXsEh-jicavDWSvrxMtWYRY-L662ThBbR2nuaEdlxmOk_yKNagUOpifvto_vejEs9zsHj-g2tNldrCodYeegITHb-TqhWUk696IUb4n5TJBR3wf3f5zNkMlJuT_SHnQgBqWaJo0OjyDDWiQTXVkuLMvpcTQiSiaERE1JxS69DKTDc3apCmTBHr-8fu38hg" alt="Adblock" width="100%" max-width="250px"></li> <li>The browser icon should have turned grey<br /><img src="https://blogger.googleusercontent.com/img/a/AVvXsEh9QLA68ighvUEcutw_661Ue7SIP4c6WtfMO9dezT6NwmsPsNHTX5t7uaWOVVA5Vwcq5tr8DAHP42rEM2oBgXddN1U7vpDSboigTct8a-4w-dmYGV3TejQAPCiVjAVKQtjDdtsSC744pTZFcQ5FNK33Ii2F1vBam2Z8PI9w2BFr-bjH2z6pwhuibgtT" alt="Adblock"></li> <li>Refresh the page if it didn\'t refresh automatically. Thanks!</li> </ul> </div> </div> </div> </div>',document.body.append(a),document.body.style.overflow="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="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js",b.onerror=function(){f(),window.adblock=!0};var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(b,e)}();
//]]>
</script>{codeBox}
Now Save the template.
Advantages or drawbacks Install Adblock Notifications on Blogger If you run Adsense or other forms of advertising on your blog, using this script can help you make more money. If you put this anti-adblock script on the blog, there are still other risks.
Disadvantages of Using Anti Adblock Scripts
Adding adblock notifications to your site might also negatively impact how well it performs. Some drawbacks to using this script include:
- Blog loading takes a little longer The loading of your blog will take a bit longer because connecting this adblock script code requires JavaScript.
- The blog's audience size could decline
- Some consumers might still be unsure of how to make their browser's adblock feature inoperable.
- Because they are unable to turn off the adblock message that appears when they open your website, they will depart.
- If the information they are seeking is not crucial, they can even decide not to visit your website again.
The Benefits of Anti-Adblock Scripts
In addition to the drawbacks, implementing this Adblock notification script has the following benefits:
Your ad impression will rise if the visitor has disabled their ad blocker, and you can make money through bid types, active view RPM, or by having visitors click on your advertisement. in order for income to rise by equipping the blog with adblock notifications.
Conclusion
Well, those are excellent instructions for installing anti-adblock software in Blogger. I hope it is helpful to everyone. Please leave a comment if you have any issues with this post.