Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Cách Phát Hiện AdBlock Dành Cho Website

Cách Phát Hiện AdBlock Dành Cho Website


Ngày 5 Tháng 7 Năm 2021

Ngày hôm nay chúng ta sẽ đi vào tìm hiểu cách tạo chức năng nhận biết AdBlock (chức năng chặn quảng cáo) của người dùng khi truy cập vào website bằng HTML, CSS và Javascript nhé!

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cách Nhận Biết Adblock Cho Website</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>Xin Bạn Hãy Tắt Adblock Để Ủng Hộ Trang Web Nhé!</p>
      <div class="btn">
        <div class="bg-layer"></div>
        <button>Tôi Đồng Ý</button>
      </div>
    </div>
  </div>
</body>
</html>

CSS

Bây giờ chúng ta sẽ trang trí cho bảng thông báo adblock detected nhé!

@import url('https://fonts.googleapis.com/css2?family=Roboto:[email protected];500;700&display=swap'); *{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Roboto", sans-serif;
}
body{
  width: 100%;
  height: 100vh;
   background: linear-gradient(to right, #4286f4, #373B44);
}
::selection{
  color: #fff;
  background: #4286f4;
}
.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: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
  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(to right, #e44d26, #f16529);
}
.warn-icon .icon{
  height: 100px;
  width: 100px;
  background: #fff;
  border-radius: inherit;
}
.warn-icon .icon i{
  background: linear-gradient(to right, #e44d26, #f16529);
  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: linear-gradient(to right, #24FE41, #FDFC47);
  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;
}

Javascript

Bây giờ chúng ta sẽ đi vào tạo chức năng nhận biết adblock bằng Javascript nhé!

   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");
    });

Và đây là hình ảnh kết quả của chúng ta nhé!

Detect Adblock

Còn dưới đây là dự án trên Codepen nhé!

See the Pen by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn cách tạo chức năng Detect Adblock cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!