AdBlock Detector with HTML, CSS and JavaScript

Hello friends, in this article, you will learn how to create an AdBlock detector using only HTML, CSS and JavaScript. Previously I have shared another snippet based on how to create a To Do List. In this tutorial, I have created an AdBlock detector

Technically speaking, adblockers do now not block ads – they block web requests that down load content into the browser. In other phrases, adblockers prevent commercials from downloading on your browser, allowing web pages to load faster and offering a better browser revel in.

Below is the video tutorials. watch and practices

AdBlock generation is based on simple lists, referred to as filter out lists, that determine what to block and cover, or what to permit to appear on the pages you go to. those lists really encompass a list of URLs within the form of either an “allowlist” or “blocklist”.

when you go to a internet site, adblock quick assessments if that website is in such a clear out lists. If it is, then the request to external content material is blocked and the ad is not downloaded into the webpage. In a nutshell, adblock technology is a hard and fast of policies which might be mounted in these filter out lists that decide what must be blocked or now not blocked on webpages you are travelling.

Benefits of ads

Commercials must gain each sellers and clients. As previously mentioned, corporations can promote their services thru commercials. alternatively, clients can access the vital records across the to be had services, discount deals, and other capability options available inside the market with a purpose to make knowledgeable choices.

Source Code:

If you like this AdBlock Detector, then feel free to use it in your project. Copy the code by clicking on Copy button provided below.

First, you have to create three files. One of them is HTML, other is CSS and third one is JavaScript. After creating the files, paste the code provided below.

HTML CODE:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Adblock detecter | By Code Info</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
        <img src="pic/logo.png">
        <p class="detect">Detecting...</p>
        <p class="ad-p">Please wait!</p>
    </div>

    <script src="main.js"></script>
</body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you have to create a file with .css extension.

CSS CODE:

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap");

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #1da1f2;
    font-family: "Poppins", sans-serif;
}

.wrapper{
    background: #fff;
    max-width: 400px;
    width: 100%;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1);
}
img{
    width: 120px;
    margin: 18px 30%;
}
.detect{
    background: #1da1f2;
    color: #fff;
    padding: 8px 15px;
    font-weight: 600;
    font-size: 22px;
    text-align: center;
    cursor: pointer;
}

.ad-p{
    margin-top: 20px;
    text-align: center;
}

.detect.ab{
    background: red;
}

.detect.no-ab{
    background: #1da1f2;
}

Third, create a JavaScript file with the name of main.js and paste the given codes in your JavaScript file. Remember, you have to create a file with .js extension.

JavaScript CODE:

setTimeout(() => {
    var adblockEnabled = false;

    document.body.innerHTML +='<div class="adsbygoogle" id="ad-detector"> </div>';
    var adElement = document.getElementById("ad-detector");
    var adElementStyle = getComputedStyle(adElement, null);

    if(adElementStyle.display === "none"){
        document.getElementsByClassName("detect")[0].innerHTML = "Adblock detected!";
        document.getElementsByClassName("detect")[0].classList.add("ab");
        document.getElementsByClassName("ad-p")[0].innerHTML = "Our website is made possible by displaying online advertisements to our visitors.Please consider supporting us by disabling your ad blocker on our website.";
    }

    else{
        document.getElementsByClassName("detect")[0].innerHTML = "Adblock disabled! :)";
        document.getElementsByClassName("detect")[0].classList.add("no-ab");
        document.getElementsByClassName("ad-p")[0].innerHTML = "Thank you for disabling ad blocker :)";
    }
}, 2000);

I hope you liked this snippet. If so, please share the blog and follow us in our social media profiles and stay connected with this blog. Thank you for visiting.

Benefits of ads

You may like this:

Source Code:

HTML CODE:

CSS CODE:

JavaScript CODE:

3 Comments

Post a Comment

About Us

Contact Form