How To Show Message To AdBlock Users On A Web Page

This guide teaches you how to detect AdBlock and display a custom message to AdBlock users to persuade them into disabling the program or adding the website to their whitelist. This is achieved with HTML, CSS and jQuery.

View the end result of following this tutorial (works well with responsive themes) :

Detecting AdBlock and displaying content to AdBlock users :

Add the following somewhere within the web page’s HEAD tags :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

This isn’t needed if you already have Google’s jQuery CDN on the website or you host jQuery yourself.

Next, add the following script before your closing BODY tag on your web page :

<script>

$(document).ready(function () {
if ($('.FixedAd').length == 0 || $('.FixedAd').height() == 0)
{
$('.BrokenAd').removeClass('hide');
}
});

</script>

Writing up the HTML :

Next we’re going to write up the HTML and add our custom message to display to AdBlock users.

<div class="BrokenAd hide">
   <div class="brokenheading">It seems like you have AdBlock enabled.</div>
   <div class="brokentext">
We get it! Ads are annoying but they help keep this website up and running. <br/>
Please consider disabling your ad block software or whitelist our domain so only our ads are displayed.
   </div>
</div>

The code above will display the custom message to AdBlock users on your web page. You can modify its heading and text to your liking or use as is. The code can be placed anywhere you wish to display it on your website.

After, you must wrap all of your ad tags with the following DIV :

<div class="FixedAd">

</div>

So wherever ads are placed in your web page’s source code, it should look like this :

<div class="FixedAd">

Ad script code goes here (eg. Adsense)

</div>

Of course, you should replace the substitute “Ad script code goes here (eg. Adsense)” with your ad network’s script.

Styling with CSS :

Finally we’re going to spice things up with some CSS.

Add the following to your CSS file :

.BrokenAd {
border: 1px solid #add8e6;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-khtml-border-radius: 4px;
text-align:center;
margin: 5px 0px 5px 0px;
padding: 10px;
}

.BrokenAd .brokenheading {
font-size: 20px;
font-weight: bold;
}

.BrokenAd .brokentext {
font-size: 16px;
margin-top: 5px;
}

.BrokenAd.hide {
display: none;
}

If there is a caching mechanism for your website, you may need to hit F5 (assuming you’re using a Windows OS computer) to hard refresh the page or clear your browser’s cache to view the newly added contents.