Ads fund a lot of the free content on the web—tutorials, themes, downloads, the whole shebang. But readers also want a calm, clean experience. Enter ad blockers. If you run a Blogger site with ads, you’ve probably noticed a drop in impressions when visitors use blockers. A balanced approach is to add a polite anti-adblock notification that detects ad blocking and asks users to allow ads (or whitelist your domain). If your model needs it, you can also implement a hard block that hides the article until the blocker is disabled.
This guide expands on the original idea and gives you practical, SEO-friendly code you can paste into your Blogger theme. You’ll find a simple script to detect blockers via Google’s ads script, two UI styles (inline message and overlay modal), clean CSS you can tweak to your brand, and a set of troubleshooting notes so you don’t get stuck. We’ll keep things lightweight—no heavy libraries—and add small extras like dark-mode styles and accessibility attributes.
What “Anti-Adblock” Means (and how it works)
Anti-adblock is simply a detection script that checks whether an ad-related file or element is blocked. If the check fails, you display a message. There are many detection strategies; the most reliable (and simplest for Blogger) is trying to load the official Google ads library (adsbygoogle.js) and triggering a fallback when it fails. That’s the approach we’ll use here.
There are two common UI patterns:
- Polite inline notice: Shows a message inside the post or above the content. Readers can still scroll. Good if you rely on a mix of ads + other monetization.
- Hard block overlay: Covers the page with a modal and disables scrolling until the blocker is turned off. Use sparingly—only if your site’s ads are the primary revenue and your message is crystal clear.
We’ll ship both patterns below. You can start polite and later switch to hard block if needed.
Before You Start: Goodwill and UX
- Keep it human: Use plain language. Explain why ads matter for your site (hosting costs, time writing tutorials, etc.).
- Avoid nag loops: If a user dismissed your polite notice once, don’t hammer them on every page view. Set a short-term cookie/localStorage to hide the notice for a day.
- Performance first: Your page should still be fast. The detection script in this guide is tiny and asynchronous.
- Accessibility matters: Add proper headings, focus traps for modals, and allow keyboard users to navigate.
Method A — Polite Inline Notice (Quickest)
Step 1 — Add the CSS (above </b:skin> or inside your theme CSS)
/* --- Anti-Adblock: inline notice --- */
.blockquote-info{position:relative;font-size:15px;margin:1.7em 0;padding:24px 22px 24px 86px;border-radius:8px;border:2px solid #e7e7e7;background:#fff}
.blockquote-info:before{
content:'\201D';position:absolute;top:6px;left:24px;font-weight:700;font-size:68px;color:rgba(0,0,0,.12);line-height:1
}
.blockquote-info strong{display:flex;align-items:center;margin-bottom:6px}
.blockquote-info svg{fill:currentColor;margin-right:10px}
.blockquote-info p{margin:.4em 0}
.blockquote-info a{color:#0ea5e9;text-decoration:none}
.blockquote-info a:hover{text-decoration:underline}
/* Variant when adblock is detected */
.blocked{padding:16px 24px;margin:0;border-radius:10px;border:2px solid #f59e0b;background:#fff7ed}
.blocked:before{display:none}
/* Dark mode (if your theme toggles .nightmode on <body>) */
.nightmode .blockquote-info{background:#0b1220;border-color:#1f2937;color:#e5e7eb}
.nightmode .blocked{background:#2a1f0f;border-color:#a16207;color:#fef3c7}
.nightmode .blockquote-info a{color:#38bdf8}
Step 2 — Add the detection script (before </body>)
This script tries to load Google’s ads file. If it fails (blocked), we replace the post body with a friendly message. You can soften this to only prepend the notice—see the commented line.
<script>//<![CDATA[
(function(){
"use strict";
function showNotice(){
var postBody = document.getElementById("post-body") || document.querySelector(".post-body");
if(!postBody) return;
var html = '<blockquote class="blockquote-info blocked" role="status" aria-live="polite">'
+ '<strong><svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true"><path d="M11,15H13V17H11V15M11,7H13V13H11V7M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20Z"></path></svg>Ad-Block Detected</strong>'
+ '<p>We noticed you’re using an ad blocker. Totally get it—ads can be loud. Our tutorials stay free thanks to modest, safe ads. Please consider whitelisting this site.</p>'
+ '<p>Need a cleaner layout? Try our <a href="#dark-mode">dark mode</a> and design tips—or see our <a href="#scrollbar-tips">Blogger CSS scrollbar</a> tweaks for smoother reading.</p>'
+ '</blockquote>';
// Hard replace (ensures readers must act):
postBody.innerHTML = html;
// Softer approach (prepend a notice, keep article visible):
// postBody.insertAdjacentHTML('afterbegin', html);
window.adblock = true;
}
// Attempt to load the Google Ads library; if blocked, onerror triggers.
var s = document.createElement("script");
s.async = true;
s.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";
s.onerror = showNotice;
var first = document.getElementsByTagName("script")[0];
first.parentNode.insertBefore(s, first);
})();
//]]></script>
Save your theme and open any post. If your browser uses an ad blocker, you’ll see the notice. Otherwise, the article loads as usual.
Method B — Hard-Block Overlay (Modal + Scroll Lock)
If your site depends heavily on ad revenue, you can place a full-screen modal that disables scrolling until the user disables their blocker. Be gentle—explain why, and ensure the “how to whitelist” link is easy to find.
Step 1 — Add the overlay HTML near the end of your template
<!-- Anti-Adblock Modal Overlay -->
<div class="adblock-overlay" aria-hidden="true" role="dialog" aria-labelledby="adb-title" aria-describedby="adb-desc">
<div class="adb-modal" role="document" tabindex="-1">
<h3 id="adb-title">We Rely on Ads to Keep Guides Free</h3>
<p id="adb-desc">Please pause your ad blocker or whitelist this site, then refresh. We only show safe, minimal ads.</p>
<ol class="adb-steps">
<li>Open your ad blocker’s menu.</li>
<li>Choose “Pause on this site” or “Whitelist domain”.</li>
<li>Reload the page.</li>
</ol>
<button class="adb-help" onclick="location.href='#how-to-whitelist'">How to whitelist</button>
</div>
</div>
Step 2 — Add overlay CSS (above </b:skin>)
/* --- Anti-Adblock: full overlay modal --- */
.adblock-overlay{
position:fixed;inset:0;background:rgba(17,24,39,.72);
display:none;align-items:center;justify-content:center;z-index:9999
}
.adblock-overlay.active{display:flex}
.adb-modal{
width:min(560px,92vw);background:#ffffff;color:#111827;border-radius:14px;
box-shadow:0 20px 60px rgba(0,0,0,.35);padding:22px 22px 16px;outline:0
}
.adb-modal h3{margin:0 0 8px}
.adb-modal p{margin:0 0 12px}
.adb-steps{margin:0 0 14px 1.25em}
.adb-help{
display:inline-block;border:0;border-radius:10px;background:#10b981;color:#fff;
padding:10px 14px;font-weight:600;cursor:pointer
}
/* Lock scrolling when overlay is open */
.body-locked{overflow:hidden}
/* Dark mode */
.nightmode .adb-modal{background:#0b1220;color:#e5e7eb}
Step 3 — Detection + overlay logic (before </body>)
<script>//<![CDATA[
(function(){
"use strict";
var overlay = document.querySelector(".adblock-overlay");
function openOverlay(){
if(!overlay) return;
overlay.classList.add("active");
document.body.classList.add("body-locked");
overlay.setAttribute("aria-hidden","false");
var dialog = overlay.querySelector(".adb-modal");
if(dialog) dialog.focus();
}
function detect(){
var s = document.createElement("script");
s.async = true;
s.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";
s.onerror = openOverlay;
var first = document.getElementsByTagName("script")[0];
first.parentNode.insertBefore(s, first);
}
detect();
})();
//]]></script>
With the overlay active, readers can’t interact with the page until they whitelist your site. If you prefer the friendlier inline notice, use Method A alone—or show the inline notice on the first pageview and the overlay on the second (tracked with localStorage).
Make It Yours: Design Tweaks
You can easily change colors, icons, and spacing to match your brand. A few ideas:
- Colors & border radius: Adjust
border-radiuson.blockedand.adb-modalto 6–16px for your design language. - Icons: Swap the SVG with any icon pack you use (Feather, Material Symbols). Keep
aria-hidden="true"for decorative icons. - Dark mode: If your site has a dark mode (
.nightmodeclass on<body>), this guide already includes a color set that looks good on dark backgrounds. - Scrollbar aesthetics: If you use a long overlay or drawer, consider a Blogger CSS scrollbar theme so the scroll track matches your site. For a quick start, see our custom scrollbar tutorial.
Step-By-Step (Summary)
- Open Blogger > Theme > Edit HTML.
- Paste CSS: Add the inline notice CSS and (optional) overlay CSS above
</b:skin>or in your stylesheet. - Insert HTML: For Method B, add the overlay HTML near the bottom of your template.
- Add JS: Paste the detector script(s) before
</body>. - Save & test: Load your site with an ad blocker on and off. Confirm the correct behavior.
Troubleshooting
- “Nothing appears” with blocker on: Ensure the detection script is placed before
</body>, and that your theme actually uses#post-bodyor.post-body. If your post wrapper uses another ID/class, update the selector. - Overlay shows but page still scrolls: Confirm
body.body-locked { overflow:hidden; }is applied by the script. Some themes overrideoverflowonhtml; add a rule forhtml.body-lockedas well. - The ads script loads but my ad units don’t render: This is an ad serving issue, not detection. Check your ad unit code, placement, and any console errors from your ad network.
- Console error about mixed content: Make sure all URLs use
https://. - Notice covers my header on mobile: Use CSS media queries to reduce padding or change placement for small screens.
- Performance concerns: The script is async and tiny. If you chain other checks, avoid synchronous calls or large libraries.
- Users complain: Consider the polite notice first and show the overlay only on repeat visits if adblock remains on.
FAQ
1) Is anti-adblock allowed with AdSense?
Policies change over time. In general, politely asking users to support your site by allowing ads is common. Avoid misleading UX or forcing clicks on ads. Always review your ad network’s latest policy pages.
2) Can I show the full article after a delay even if adblock stays on?
Yes, you can convert the hard block into a timed overlay that disappears after a few seconds. Whether that aligns with your revenue goals is up to you. Be transparent and respectful of readers’ choices.
3) How do I show the notice only once per user?
<script>
try{
var k = "adb_dismissed", ttl = 86400000; // 24h
var ts = parseInt(localStorage.getItem(k) || "0", 10);
if(Date.now() - ts > ttl){
// showNotice(); or openOverlay();
// After showing, record:
localStorage.setItem(k, String(Date.now()));
}
}catch(e){}
</script>
4) Can I combine with a donate button or membership?
Absolutely. Many sites display: “Not a fan of ads? Support via donation.” Provide a small link in the notice and track conversions.
5) Does anti-adblock help SEO?
Not directly. It can help your revenue and sustainability, which allows you to produce more consistent content—indirectly good for readers and long-term growth.
6) Can I style the notice to match my UI kit?
Yes. Swap colors, fonts, and border radii. The CSS is minimal. If your site already customizes UI (like a customize scrollbar Blogger snippet), keep visual language consistent.
Copy-Paste Blocks (Quick Reference)
Inline Notice CSS
.blockquote-info{position:relative;font-size:15px;margin:1.7em 0;padding:24px 22px 24px 86px;border-radius:8px;border:2px solid #e7e7e7;background:#fff}
.blocked{padding:16px 24px;margin:0;border-radius:10px;border:2px solid #f59e0b;background:#fff7ed}
Inline Notice JS (Detector)
(function(){
function showNotice(){ /* insert message; see full script above */ }
var s=document.createElement("script");
s.async=true;
s.src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";
s.onerror=showNotice;
document.scripts[0].parentNode.insertBefore(s, document.scripts[0]);
})();
Overlay HTML
<div class="adblock-overlay" aria-hidden="true" role="dialog" aria-labelledby="adb-title" aria-describedby="adb-desc">
<div class="adb-modal" role="document" tabindex="-1">...</div>
</div>
Overlay CSS
.adblock-overlay{position:fixed;inset:0;background:rgba(17,24,39,.72);display:none;align-items:center;justify-content:center;z-index:9999}
.adblock-overlay.active{display:flex}
.body-locked{overflow:hidden}
Overlay JS
(function(){
var overlay=document.querySelector(".adblock-overlay");
function open(){ if(!overlay) return; overlay.classList.add("active"); document.body.classList.add("body-locked"); }
var s=document.createElement("script");
s.async=true; s.src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";
s.onerror=open; document.scripts[0].parentNode.insertBefore(s, document.scripts[0]);
})();
Wrap-Up
Anti-adblock doesn’t have to be aggressive or ugly. A clear, respectful notice reminds readers that tutorials don’t write themselves; hosting and coffee aren’t free either. Start with the polite inline version and measure results. If you truly need a hard block, use the overlay with a short, friendly explanation and obvious steps to whitelist your site. Keep the code lean, the copy kind, and the UX accessible.
Did this help? Bookmark this guide, share it with a blogger friend, and subscribe for more hands-on Blogger tweaks—from dark mode to image optimization, and UI polish like a Blogger CSS scrollbar that matches your brand.
){kind=link}
izin saya terapkan ya kodenya..
ReplyDeleteboleh ka silahkan dicoba
Delete