Implementing Anti-Adblock Scripts in Blogger

Implementing Anti-Adblock Scripts in Blogger: A Step-by-Step Guide

Ad blockers are tools that prevent advertisements from displaying on websites, which can significantly impact the revenue of bloggers who rely on ads for income. To mitigate this, implementing an anti-adblock script in your Blogger site can prompt visitors to disable their ad blockers, ensuring your ads are displayed and your earnings are protected.

Steps to Install an Anti-Adblock Script in Blogger:

Access the Blogger Dashboard:

• Log in to your Blogger account.
• Navigate to the Theme section.
• Click on Edit HTML to modify your blog's template code.

Insert CSS Styling:

• Within the HTML editor, locate the closing </style> tag.
• Just before this tag, add the following CSS code to style the anti-adblock notification:

.popSc {
position: fixed;
z-index: 99999;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 20px;
background: #f3f5fe;
display: flex;
justify-content: center;
align-items: center;
}
.popSc.hidden {
display: none;
}
.popSc .popBo {
position: relative;
background: #fff;
max-width: 400px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 30px;
border-radius: 30px;
}
.popSc .popBo svg {
display: block;
width: 50px;
height: 50px;
fill: none !important;
stroke: #08102b;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.5;
}
.popSc .popBo h2 {
margin: 10px 0 15px 0;
font-size: 1.2rem;
font-weight: 800;
color: #08102b;
}
.popSc .popBo p {
margin: 0;
line-height: 1.7em;
font-size: 0.9rem;
color: #08102b;
}
.darkMode .popSc {
background: #1f1f1f;
}
.darkMode .popSc .popBo {
background: #2c2d31;
}
.darkMode .popSc .popBo svg {
stroke: #fefefe;
}
.darkMode .popSc .popBo p,
.darkMode .popSc .popBo h2 {
color: #fefefe;
}code-box

Add HTML Structure:

• Scroll to the bottom of the HTML editor to find the closing </body> tag.
• Place the following HTML code just before this tag
• 
  

<div class='popSc hidden' id='antiAdBlock'>
<div class='popBo'>
<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
<circle cx='12' cy='12' r='10'/>
<line x1='12' x2='12' y1='8' y2='12'/>
<line x1='12' x2='12.01' y1='16' y2='16'/>
</svg>
<h2>Ad-Blocker Detected!</h2>
<p>Sorry, we detected that you have activated Ad-Blocker.<br/>
Please consider supporting us by disabling your Ad-Blocker; it helps us in developing this Website.<br/>
Thank you!</p>
</div>
</div>code-box

Implement JavaScript Functionality:

• Directly after the HTML code added in the previous step, insert the following JavaScript:

<script>
/*<![CDATA[*/
var lazyAnti = false;
window.addEventListener("scroll", function() {
if ((document.documentElement.scrollTop !== 0 && !lazyAnti) || (document.body.scrollTop !== 0 && !lazyAnti)) {
(function() {
var antiAdBlock = document.querySelector("#antiAdBlock");
var e = document.createElement("script");
e.type = "text/javascript";
e.async = true;
e.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";
e.onerror = function() {
if (antiAdBlock != null) {
antiAdBlock.classList.remove("hidden");
window.lazyAnti = true;
}
};
var a = document.getElementsByTagName("script")[0];
a.parentNode.insertBefore(e, a);
})();
lazyAnti = true;
}
}, true);
/*]]>*/
</script>code-box

• Save Your Template:
• After completing the above steps, click the Save button to apply the changes to your blog.

Important Considerations:

User Experience: While it's essential to protect your revenue, ensure that the anti-adblock message is user-friendly and doesn't overly disrupt the visitor's experience. A polite request is more likely to persuade users to disable their ad blockers.

Testing: After implementing the script, test your blog using different browsers and devices to ensure the anti-adblock prompt functions correctly without affecting other site elements.

Compatibility: Some Blogger templates may have different structures or IDs. If the script doesn't work as expected, you might need to adjust the code to align with your template's specific configuration.

By following these steps, you can effectively implement an anti-adblock script on your Blogger site, helping to maintain your advertising revenue while fostering a supportive relationship with your audience.