How to Add a AdBlocker Detector to Blogger (PageSpeed Optimized)

Administrator

Author

Last edited: Sunday, October 25, 2026

If you're a webmaster using Google AdSense and find that your current ad-blocker detection message isn't working properly, this tutorial is for you.

Using an ad-blocker detection script can help you recover lost ad revenue (somehow), but some scripts can negatively affect your Google PageSpeed score or create an intrusive user experience. In this tutorial, I'll guide you through installing a lightweight, responsive, and minimalist ad-blocker detection script designed specifically for Google Blogger.

How to Add a AdBlocker Detector to Blogger

It uses a dual-check detection method (Bait element CSS check + Asynchronous fetch network check) to reliably detect modern extensions (uBlock Origin lite, AdBlock Plus, Brave Shield, AdGuard, Opera’s built-in AdBlocker) without triggering false positives or hurting your Google PageSpeed Insights score.

Features

Minimalist Design: Showcases a professional dark-navy theme, a frosted-glass background blur, a sleek modal window, and clean typography inspired by standard forum interfaces.
100% PageSpeed-Friendly: Uses vanilla JavaScript that loads asynchronously after the page has fully rendered, helping maintain strong Core Web Vitals and high performance scores.
Dual-Layer Ad-Blocker Detection: Combines DOM bait-element checks to identify cosmetic filtering with asynchronous network requests to detect modern ad blockers (uBlock Origin, Brave, AdGuard, and AdBlock Plus).
Blogger XML Compatibility: Uses standard Blogger CDATA wrappers (//<![CDATA[ ... //]]>) to help prevent layout issues and compilation errors when editing or saving your template.

Step 1: Access Your Theme Editor

Log in to your Blogger Dashboard.
On the left sidebar menu, click on Theme
Click the down arrow right next to the Customize button.
Then, select Edit HTML

Step 2: Locate the Closing Body Tag

Inside the HTML editor, click anywhere inside the code box.
Press Ctrl + F (or Cmd + F on Mac) to open the search box.
Type </body> and press Enter to locate the end of your document.

Copy the complete code snippet below and paste it right above the </body> tag:

<style type="text/css">
  /* Source code: https://writewhim.blogspot.com/2026/10/adding-adblocker-detector.html */
.dida-adb-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(15,23,42,0.85);backdrop-filter:blur(4px);z-index:999999;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity 0.3s ease,visibility 0.3s ease;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}
.dida-adb-overlay.active{opacity:1;visibility:visible;}
.dida-adb-box{background:#252936;border:1px solid #3c4356;border-radius:8px;width:90%;max-width:460px;box-shadow:0 10px 25px rgba(0,0,0,0.5);overflow:hidden;color:#e2e8f0;transform:translateY(-20px);transition:transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);}
.dida-adb-overlay.active .dida-adb-box{transform:translateY(0);}
.dida-adb-header{background:#1e222d;padding:14px 20px;font-size:16px;font-weight:600;color:#2b7bb9;border-bottom:1px solid #323846;display:flex;align-items:center;gap:10px;}
.dida-adb-header svg{fill:#e0245e;width:20px;height:20px;}
.dida-adb-body{padding:20px;font-size:14px;line-height:1.6;color:#cbd5e1;}
.dida-adb-footer{background:#1e222d;padding:12px 20px;border-top:1px solid #323846;display:flex;justify-content:flex-end;gap:10px;}
.dida-adb-btn{background:#2577b1;color:#ffffff !important;border:none;padding:8px 16px;border-radius:4px;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:background 0.2s;}
.dida-adb-btn:hover{background:#1d6091;}
.ad-zone-container,.adsbygoogle,.ad-banner{position:absolute !important;left:-9999px !important;top:-9999px !important;width:1px !important;height:1px !important;}
</style>

<div id="xfAdbNotice" class="dida-adb-overlay" role="dialog" aria-modal="true">
  <div class="dida-adb-box">
    <div class="dida-adb-header">
      <svg viewbox="0 0 24 24"><path d="M12 2L1 21h22L12 2zm0 3.5L20.5 19h-17L12 5.5zM11 10v4h2v-4h-2zm0 6v2h2v-2h-2z"></path></svg>
      Adblock Detected
    </div>
    <div class="dida-adb-body">
      We noticed that you are using an <b>ad-blocking extension</b>. Our site relies on advertising to provide free content. Please consider whitelist/disabling your ad blocker for our domain to support us.
    </div>
    <div class="dida-adb-footer">
      <button class="dida-adb-btn" onclick="window.location.reload();">
        <svg width="14" height="14" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M23 4v6h-6M1 20v-6h6"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>
        I've Disabled AdBlock
      </button>
    </div>
  </div>
</div>

<div class="ad-zone-container adsbygoogle ad-banner" id="dida-ad-bait">&nbsp;</div>

<script type="text/javascript">//<![CDATA[
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('(3(){\'v t\';3 4(){5 7=6.i(\'u\');2(7){7.y.s(\'r\');6.w.A.z=\'j\'}}3 a(){5 1=6.i(\'q-x-1\');2(!1||1.B===o||1.g===0||1.l===0){4();f}5 8=h.k(1);2(8.p===\'m\'||8.n===\'j\'){4();f}5 b=\'U://Z.S.R/Q/c/P.c\';C(T Y(b,{X:\'W\',V:\'O-N\'})).G(3(9){2(9.F===\'E\'||9.D){2(1.g===0)4()}}).H(3(){4()})}2(6.I===\'M\'){d(a,e)}L{h.K(\'J\',3(){d(a,e)})}})();',62,62,'|bait|if|function|triggerNotice|var|document|overlay|computedStyle|response|checkAdBlocker|adUrl|js|setTimeout|500|return|offsetHeight|window|getElementById|hidden|getComputedStyle|clientWidth|none|visibility|null|display|dida|active|add|strict|xfAdbNotice|use|body|ad|classList|overflow|style|offsetParent|fetch|ok|opaque|type|then|catch|readyState|load|addEventListener|else|complete|cors|no|adsbygoogle|pagead|com|googlesyndication|new|https|mode|HEAD|method|Request|pagead2'.split('|'),0,{}))
//]]></script>

Step 3: Save and Test

Click the Save icon on the bottom right of the Blogger editor screen.
Once saved, open your blog in an Incognito window or a browser tab where an ad-blocker extension (like uBlock Origin or AdBlock) is active.
The notice overlay will appear over your page content.

How to Customize the Text or Styling

Change the Warning Message: Inside the HTML code block, look for <div class="dida-adb-body"> and modify the text between the tags to match your desired phrasing.
Adjust Colors:

Modal background color: Edit #252936 inside .dida-adb-box.
Header/Accent color: Edit #2577b1 or #2b7bb9.

Final Thoughts

I know ads can be annoying, especially when websites use ad networks filled with spammy ads or force you to open new tabs through unwanted redirects. But if you're a webmaster or blog owner, avoid placing too many ads on your website or using ad networks that display spammy content. You know how annoying these ads can be yourself, so don't subject your visitors to the same experience. Even if you rely on ads for income, keep them to a minimum and make sure your website remains safe, user-friendly, and enjoyable to browse.

Be careful with ad networks that offer low requirements. Many of them serve spammy ads that could cause your blog to be flagged for review.

Contact Form