Installing Anti-Adblock Script to your blogger website is for the purpose of maintaining revenue generation from digital/display advertisements most especially contextual ads provider by ad network companies like Google AdSense and Ezoic.
Ad revenue is a primary income source for many bloggers, especially those who don’t charge for content or have a subscription model. Adblockers prevent ads from displaying, which cuts into their earnings.
In this case, Bloggers install Anti-Adblock scripts on their blogs to help stops users blocking ads by either blocking content for them with powerful adblockers or encouraging them to whitelist the site.
In this article, I’m going to teach you how to install one of the best and powerful Anti-Adblocker plugins/scripts to your blogger/blog spot site. Let’s dive straight in to the primary reason of this article.
Powerful Anti-AdBlock Script
The Style Script
<style>
#adblockMessage {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #ffcccc;
color: #333;
padding: 20px;
text-align: center;
z-index: 1000;
}
</style>The HTML Script
<div id="adblockMessage">
We've detected that you're using an ad blocker. Please consider disabling it to support our content.
</div>
<!-- This is a dummy ad container to detect ad blockers -->
<div id="ad-test" style="display: none;"></div>
<script>
document.addEventListener("DOMContentLoaded", function() {
// Add a small delay to allow ad blockers to activate
setTimeout(function() {
// Check if the dummy ad container is blocked or hidden
const adTest = document.getElementById("ad-test");
if (adTest && (adTest.offsetHeight === 0 || adTest.offsetParent === null)) {
// Show the anti-adblock message if an adblocker is detected
document.getElementById("adblockMessage").style.display = "block";
}
}, 500);
});
</script>How it Works
The script includes a hidden div with the ID ad-test. This div simulates an ad container but is set to display: none initially, so it doesn’t actually show anything.
Many powerful adblockers target elements with common ad-related keywords in their IDs or classes, such as “ad,” “banner,” etc., hiding or removing them entirely.
Javascript Check
Once the page is loaded, a small delay allows any active adblocker to hide or block the ad-test element. After the delay, JavaScript checks the visibility of the ad-test div. Specifically:
- adTest.offsetHeight === 0: If the element has zero height, it may have been hidden by an adblocker.
- adTest.offsetParent === null: If the parent of ad-test is null, it’s likely removed by the adblocker.
If either of the above conditions is true (indicating an adblocker), the script displays the #adblockMessage div. This message prompts the user to consider disabling their adblocker to support the content.
How to Use or Install
Follow these steps to install the Anti-Adblock Script on your Blogger/Blogspot website:
- Login to your Blogger/Blogspot dashboard.
- Click “Theme” and select “Edit HTML”.
- Add “The Style Script” in the
<head>tag before closing</head>tag. - Add “The HTML Script” to body under opening
<body>tag or before closing</body>tag. - Click “Save” to save your script.
Warning!
Ensure to backup your template before you start adding the anti-adblocker scripts.
Lastly, you can further customize the message or style to be more friendly or informative. This script provides a simple, user-friendly way to encourage visitors to whitelist the site without being too intrusive.
