How to Setup Anti Ads Blocker Notification in Blogger Website?

Table of Contents

• What is AdBlock?
• The Importance of User Experience
• Introducing Anti Adblock Notifications
• The Need for Anti Adblocker Script
• How to Install Anti Adblock on Blogger Blog
• Weighing the Pros and Cons
• Conclusion
• FAQs

What is AdBlock?

AdBlock is a browser feature designed to block the display of ads on web pages. This functionality is often used by readers to avoid being redirected to malicious websites and to enhance their overall browsing experience. By using AdBlock, visitors can read articles without the interruption of annoying ads that might clutter the page.

The Importance of User Experience

User experience is paramount when it comes to retaining visitors on your blog. An excessively ad-heavy layout can be off-putting and disrupt the reading flow. Readers may feel frustrated and discouraged from exploring your content further. By considering the balance between ads and content, you can create a more engaging and enjoyable experience for your audience.

Introducing Anti Adblock Notifications

Anti Adblock notifications are a solution to counter the rise of adblock usage. Many internet users employ ad blockers to suppress ads on websites. When you integrate an anti adblock script into your blog, a notification will pop up, requesting users to deactivate their adblockers to access your site’s content. This ensures that your blog’s revenue-generating ads are seen by a wider audience.

The Need for Anti Adblocker Script

Adblockers have become increasingly popular, posing a challenge for bloggers and website owners who rely on advertising revenue. To maximize your earnings and provide valuable content, it’s crucial to prevent adblockers from obstructing your ads. An anti adblock script with pure JavaScript can detect whether a user has an active adblocker and display a notification urging them to disable it.

How to Install Anti Adblock on Blogger Blog

Logging into Your Blogger Account

To get started, log in to your Blogger account using your credentials.

Adding Anti Adblock Script to Your Blog

1. Click on the “Theme” menu.
2. Select “Edit HTML.”
3. Paste the provided CSS code 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}}

4. Copy the JavaScript code and place it above the </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>

5. Save the template to implement the changes.

Weighing the Pros and Cons

Disadvantages of Using Anti Adblock Scripts

1. Increased Loading Time: The inclusion of JavaScript code for the anti adblock script can slightly lengthen the loading time of your blog.
2. Potential Decrease in Visitors: Some users may not be familiar with adblock deactivation methods, causing them to leave your site.
3. Impact on Performance: Installing the script can impact your blog’s performance, especially on devices with slower processing speeds.

Advantages of Using Anti Adblock Scripts

1. Boosted Revenue: By persuading users to disable their adblockers, you increase the chances of them viewing and interacting with your ads, thus improving your income.
2. Enhanced User Experience: A well-implemented ad experience can lead to increased reader satisfaction and a greater willingness to explore your content.
3. Higher Ad Impressions: Once adblockers are disabled, you’ll notice an increase in ad impressions, contributing to your revenue growth.

Conclusion

Incorporating an anti adblock notification on your Blogger blog is a strategic move that can greatly impact your ad revenue and user engagement. By striking a balance between user experience and advertising, you can create a more harmonious environment for your readers. Implementing the provided steps will help you ensure that your content and ads are appreciated by a wider audience.

FAQs

1. What is the purpose of an anti adblock notification?
   An anti adblock notification encourages users to disable their adblockers, ensuring they can access your site’s content and generating more ad revenue.

2. Does installing an anti adblock script affect performance?
   Yes, adding JavaScript code for the script can slightly increase loading times. However, the impact is usually minimal.

3. Can an anti adblock notification increase ad impressions?
   Absolutely. By prompting users to turn off their adblockers, you increase the chances of your ads being seen and interacted with, leading to higher ad impressions and potential revenue growth.

4. What are the potential drawbacks of using anti adblock scripts?
   Some users might not know how to disable adblockers, leading to frustration or abandonment of your site. Additionally, the script’s presence can impact your blog’s performance on certain devices.

5. Is an anti adblock notification suitable for all types of blogs?
   While an anti adblock notification can benefit many blogs, it’s important to consider your audience’s preferences and needs before implementing it.