Here’s a step-by-step guide using the code you provided.
Step 1: Open Your Blogger Theme Editor
Go to your Blogger Dashboard.
Click on Theme → click the small arrow next to Customize.
Select Edit HTML.
Step 2: Add the CSS Code (Anti AdBlock Styles)
Find the </head> tag in your theme and paste the following CSS code just above it:
<style>
.adsbox {
height: 1px !important;
width: 1px !important;
position: absolute !important;
left: -9999px !important;
top: -9999px !important;
visibility: hidden !important;
}
#adblock-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
z-index: 99999;
display: flex;
justify-content: center;
align-items: center;
}
#adblock-overlay-content {
background: #fff;
color: #000;
padding: 30px;
max-width: 400px;
text-align: center;
font-family: sans-serif;
border-radius: 12px;
border: 4px solid #ff5555;
}
#adblock-overlay-content h2 {
margin-top: 0;
font-size: 24px;
}
#adblock-overlay-content button {
padding: 10px 20px;
margin-top: 20px;
background: #1a73e8;
color: white;
border: none;
font-size: 16px;
border-radius: 8px;
cursor: pointer;
}
</style> Step 3: Add the HTML Overlay
Right after the <body> tag in your theme, paste this HTML code:
<div id="adblock-overlay" style="display:none;">
<div id="adblock-overlay-content">
<h2>AdBlock Detected</h2>
<p>Our website relies on ads. Please disable AdBlock or Private DNS to continue.</p>
<button onclick="location.reload()">I Disabled AdBlock</button>
</div>
</div> Scroll to just before the closing </body> tag and paste this script:
<script>
document.addEventListener("DOMContentLoaded", function () {
// DOM-based bait
var bait = document.createElement("div");
bait.className = "adsbox";
document.body.appendChild(bait);
// Image bait (for DNS-based AdBlock)
var img = new Image();
img.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";
img.onerror = function () {
showBlockerNotice();
};
// DOM Bait check after short delay
setTimeout(function () {
var isDomBlocked = bait.offsetHeight === 0 || bait.clientHeight === 0 || window.getComputedStyle(bait).display === "none";
bait.remove();
if (isDomBlocked) {
showBlockerNotice();
}
}, 300);
function showBlockerNotice() {
document.getElementById("adblock-overlay").style.display = "flex";
document.body.style.overflow = "hidden";
}
});
</script>
Step 5: Add Disable Right-Click
In the same place before (</body>), right after the above script, paste this additional script:
<script>
// Disable right-click
document.addEventListener("contextmenu", function (event) {
event.preventDefault();
});
</script>
This disables right-click on your website to prevent copying or saving content.
Done!
Now you have:
An Anti AdBlock system that shows a warning overlay when AdBlock is detected.
A script to disable right-click on your blog.
This keeps your content protected and encourages visitors to support your site by disabling ad blockers.