- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Environmental Science
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- articles and Answers
- Effective Resume Writing
- HR Interview articles
- Computer Glossary
- Who is Who
How To Create AdBlock Detector using HTML & JavaScript
Hey Everyone, today in this tutorial you’ll learn How to Detect AdBlock using HTML & JavaScript. In the earlier blog, I have shared How to Build Weather App using HTML CSS & JavaScript and now it’s time to create a popup box using JavaScript that detects AdBlocker. If you’re new to this blog and it’s the first blog you’re viewing then click here to view playlists of our all JavaScript Projects on Codegyan.
AdBlocker is a content filtering or web browser extension that blocks different online ads that interrupt your browsing experience. It helps the user to prevent unintended pop-ups, flashing banners, online advertisements from being displayed. I don’t recommend you to use AdBlocker on a free site like ours which has the main income source is displaying ads and giving you helpful content because the website needs money to stay free and it’s only possible if you view or click on their ads.
In our AdBlock Detector using JavaScript, as you can see in the preview image there is a popup box with some text and a button to dismiss the popup. If the user has enabled AdBlocker then this popup will be displayed and if not then this popup will not be displayed.
You might like this:
Detect AdBlock using JavaScript [Source Codes]
To create AdBlock detector using JavaScript. Firstly, you need to create two Files one HTML and another one is CSS File. After creating these files just copy paste the following codes into your file. You can also download the source code files of this AdBlock Detector from the given download button.HTML
Firstly, You have to create an HTML file with the name of index.html and copy paste the given codes into your HTML file.
<!DOCTYPE html>
<!-- Coding By Codegyan - codegyan.in -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Detect AdBlock using JavaScript | Codegyan</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<div id="detect"></div>
<div class="wrapper">
<div class="content">
<div class="warn-icon">
<span class="icon"><i class="fas fa-exclamation"></i></span>
</div>
<h2>AdBlock Detected!</h2>
<p>Our website is made possible by displaying ads to our visitors. Please supporting us by whitelisting our website.</p>
<div class="btn">
<div class="bg-layer"></div>
<button>Okay, I'll Whitelist</button>
</div>
</div>
</div>
<script>
const detect = document.querySelector("#detect");
const wrapper = document.querySelector(".wrapper");
const button = wrapper.querySelector("button");
let adClasses = ["ad", "ads", "adsbox", "doubleclick", "ad-placement", "ad-placeholder", "adbadge", "BannerAd"];
for(let item of adClasses){
detect.classList.add(item);
}
let getProperty = window.getComputedStyle(detect).getPropertyValue("display");
if(!wrapper.classList.contains("show")){
getProperty == "none" ? wrapper.classList.add("show") : wrapper.classList.remove("show");
}
button.addEventListener("click", ()=>{
wrapper.classList.remove("show");
});
</script>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@700&family=Poppins:wght@400;500;600&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body{
width: 100%;
height: 100vh;
background: linear-gradient(135deg, #9b27ca 0%, #9927cf 0%, #d33639 100%, #f92121 100%);
}
::selection{
color: #fff;
background: #9b27ca;
}
.wrapper{
position: absolute;
max-width: 480px;
top: 50%;
left: 50%;
width: 100%;
padding: 40px 30px;
background: #fff;
border-radius: 15px;
opacity: 0;
pointer-events: none;
transform: translate(-50%, -50%) scale(1.2);
box-shadow: 10px 10px 15px rgba(0,0,0,0.06);
transition: opacity 0.2s 0s ease-in-out,
transform 0.2s 0s ease-in-out;
}
.wrapper.show{
opacity: 1;
pointer-events: auto;
transform:translate(-50%, -50%) scale(1);
}
.wrapper .content,
.content .warn-icon,
.warn-icon .icon{
display: flex;
align-items: center;
justify-content: center;
}
.wrapper .content{
flex-direction: column;
}
.content .warn-icon{
height: 115px;
width: 115px;
border-radius: 50%;
background: linear-gradient(#9b27ca 0%, #9927cf 0%, #d33639 100%, #f92121 100%);
}
.warn-icon .icon{
height: 100px;
width: 100px;
background: #fff;
border-radius: inherit;
}
.warn-icon .icon i{
background: linear-gradient(#9b27ca 0%, #9927cf 0%, #d33639 100%, #f92121 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 50px;
}
.content h2{
margin-top: 35px;
font-size: 32px;
}
.content p{
font-size: 19px;
text-align: center;
margin-top: 20px;
}
.btn{
height: 57px;
width: 223px;
margin-top: 30px;
border-radius: 50px;
position: relative;
overflow: hidden;
}
.btn .bg-layer{
height: 100%;
width: 300%;
position: absolute;
left: -100%;
background: -webkit-linear-gradient(135deg, #9b27ca, #d33639, #9b27ca, #d33639);
transition: all 0.4s ease;
}
.btn:hover .bg-layer{
left: 0;
}
.content button{
position: relative;
z-index: 1;
height: 100%;
width: 100%;
background: none;
font-size: 18px;
border: none;
outline: none;
color: #fff;
cursor: pointer;
}Final Word
In this way, we can create adblock detector using HTML & JavaScript. I hope you all like this tutorial. Keep with us for next tutorial. if you wann the source code of this code you can get this on our github account. If you have any query please free to contact us Or comment below.
Advertisements
ads
