How to Add New Powerful Anti Adblock Script in Blogger

How to Add New Powerful Anti Adblock Script in Blogger (Step-by-Step Guide)

Now a days, ads are one of the main sources of income for bloggers and website owners. But many visitors use AdBlock, which directly affects your revenue. Today, I’ll show you how to easily add a powerful Anti Adblock script to your Blogger site that will detect AdBlock users and display a polite message asking them to disable it.

Follow these simple steps:

Step 1: Add the CSS and Script

First, copy and paste the following CSS and JavaScript code into your Blogger template. Add it just before the closing </head> tag:

<style>
  .adsbox, .ad-banner, .ad-unit {
    height: 1px !important;
    width: 1px !important;
    position: absolute !important;
    left: -9999px !important;
    visibility: hidden !important;
  }
</style>

<script>
(function () {
    function detectAdBlock() {
        return new Promise(function (resolve) {
            var bait = document.createElement("div");
            bait.className = "adsbox ad-banner ad-unit";
            document.body.appendChild(bait);

            setTimeout(function () {
                var isBlocked = bait.offsetHeight === 0 || bait.clientHeight === 0 || window.getComputedStyle(bait).display === "none";
                document.body.removeChild(bait);
                resolve(isBlocked);
            }, 100);
        });
    }

    function showAdblockPopup() {
        var overlay = document.createElement("div");
        overlay.id = "adblock-overlay";
        overlay.style.position = "fixed";
        overlay.style.top = "0";
        overlay.style.left = "0";
        overlay.style.width = "100%";
        overlay.style.height = "100%";
        overlay.style.backgroundColor = "rgba(0, 0, 0, 0.8)";
        overlay.style.display = "flex";
        overlay.style.justifyContent = "center";
        overlay.style.alignItems = "center";
        overlay.style.zIndex = "9999";

        var box = document.createElement("div");
        box.style.cssText = "padding:20px;text-align:center;max-width:500px;border-radius:10px;background:#fff;color:#000;border:5px solid #c90076;font-family:sans-serif;";
        box.innerHTML = "<h2>AdBlocker Detected!</h2><p>Please disable your ad blocker to support our website.</p><button id='refresh-page' style='padding:10px 20px;background:#1a73e8;color:white;border:none;border-radius:5px;font-size:16px;cursor:pointer;'>I Disabled AdBlock</button>";
        overlay.appendChild(box);
        document.body.appendChild(overlay);

        document.getElementById("refresh-page").addEventListener("click", function () {
            location.reload();
        });
    }

    window.addEventListener("load", function () {
        detectAdBlock().then(function (adBlockDetected) {
            if (adBlockDetected) {
                showAdblockPopup();
            }
        });
    });
})();
</script>  

This script works by checking if ads are hidden (which usually happens when AdBlock is active). If AdBlock is detected, it shows a popup asking the visitor to disable it.

Step 2: Disable Right-Click on Your Website

To help protect your content from being copied, you can disable right-click. Add the following code right  before the closing </body> tag  in your Blogger template:

<script> 
// Disable right-click
document.addEventListener("contextmenu", function (event) {
    event.preventDefault();
});
</script> 

Benefits of Adding This Script

Helps recover lost ad revenue by politely asking visitors to disable AdBlock.

Makes it harder for visitors to copy your content directly.

Simple to implement and completely free.

Tips:

Always keep a backup of your Blogger template before making changes.

Feel free to customize the popup message and styling to better match your website's design.

Use responsibly: don’t make the popup too aggressive to keep a good user experience.

Download

Go to Link