CSS Codes
CSS Layouts

<html>

<head>
<style>

#blockedmessage{
top: 0;
left: 0;
position: fixed;
width: 100%;
padding: 10px;
border: none;
font-size: 1em;
background: #FFE2E2;
font-family: Georgia;
line-height: 1.5;
border: 1px solid #eee;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
box-shadow: 0 5px 3px rgba(0,0,0,.3);
visibility: hidden; /* By default, hide this message from non ad blocking users. Use visibility instead of display so the message can be animated into view using CSS3 */
-webkit-transform: translate3d(0px, -110%, 0px);
transform: translate3d(0px, -110%, 0px);
-webkit-transition: transform .5s, visibility 0s .5s;
transition: transform .5s, visibility 0s .5s;
}

#blockedmessage .title{
text-transform: uppercase;
color: #E20000;
font-size: 1.1em;
margin-bottom: 6px;
display: block;
}

#blockedmessage > div{
border-left: 6px solid #E20000;
padding-left: 10px;
}

#blockedmessage #dismissmsg{
float: right;
margin-top: 5px;
margin-right: 5px;
cursor: pointer;
text-transform: uppercase;
color: #E20000;
background: #eee;
border-radius: 8px;
padding: 3px 5px;
box-shadow: 0 0 3px gray;
font-size: 14px;
}

#blockedmessage.showmsg{
visibility: visible; /* Use visibility instead of display so the message can be animated into view using CSS3 */
-webkit-transform: translate3d(0px, 0px, 0px);
transform: translate3d(0px, 0px, 0px);
-webkit-transition: transform .5s;
transition: transform .5s;
}

/* style or show/hide arbitrary content on your page by doing something like the below: */
html.adblocked #targetelement{
// style for #targetelement when ad blocker enabled
}


</style>

<script>

;(function(){

// Dynamic Drive Adblock Checker and Notifier Script v 1.0: http://www.dynamicdrive.com/

var debug = true // set debug to true to always display ad block message, for ease of styling and debugging. Set to false on production page

function adblockaction(){
var msg = document.getElementById('blockedmessage');
var dismiss = document.getElementById('dismissmsg');
var hideblockedmessage = getCookie('hideblockedmessage');
if (hideblockedmessage && debug === false){ // message shown already (per session cookie)?
msg.style.display = 'none' // complete dismiss the message
}
else{
msg.classList.add('showmsg');
}
dismiss.addEventListener('click', function(){
msg.classList.remove('showmsg');
setCookie('hideblockedmessage', 'yes');
})
}

function getCookie(Name){
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return null
}

function setCookie(name, value){
document.cookie = name+"="+value+"; path=/"
}


// Main Adblock Detect function
// When Ad Blocker detected
// Adds "adblocked" CSS class to HTML root element
// Calls function adblockaction()

var targetclass = 'adsbox' // CSS class that should trigger most ad blockers when found

document.addEventListener('DOMContentLoaded', function(){
var testunit = document.createElement('div');
testunit.innerHTML = '&nbsp;';
testunit.className = targetclass;
document.body.appendChild(testunit);
setTimeout(function() {
if (testunit.offsetHeight === 0 || debug) {
if (typeof adblockaction == 'function'){
adblockaction()
}
document.documentElement.classList.add('adblocked');
}
testunit.remove();
}, 400);
})
})();

</script>
</head>

<body>

<div id="blockedmessage">
<b class="title">Oh oh, Ad Block Alert!</b>
<div>
It looks like you've enabled <b>Ad Blocking</b> on our site. Please consider enabling ads on this site, as Dynamic Drive relies solely on ads to keep producing and offering free content to you.
<b id="dismissmsg">Thank YOU!</b>
</div>
</div>
</div>

</body>