Hướng dẫn cách tạo Popup thông báo bằng html css cho Wordpress

Nội dung chính

Tạo Popup thông báo bằng html css cho WordPress
Kết luận

Tạo Popup thông báo bằng html css cho WordPress: Trong bài viết này, mình sẽ hướng dẫn các bạn cách thiết kế thông báo Popup thông báo trang web của mình bằng HTML, CSS và JavaScript. Tôi hy vọng bạn sẽ thấy điều này hữu ích.

Tạo Popup thông báo bằng html css cho WordPress

Đoạn Popup thông báo này được tạo từ Html, Css và Javascript, nên các bạn không cần phải cài thêm Plugin gì cả và nó cũng rất là nhẹ.

# Code Popup thông báo

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;800&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="toast-container">
      <div class="image">
        <img src="images/cover.png" alt="" />
      </div>

      <div class="text-content">
        <h3>
          Hi, you may like our new ebook called 'Introduction to AR'. Please
          click <a href="#">here</a> to know more.
        </h3>
        <p class="author-name">Live Blogger</p>
      </div>

      <div class="close">
        <img src="images/close-icon.png" alt="" />
      </div>
    </div>

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

# Css Popup thông báo

.toast-container {
  position: fixed;
  bottom: -140px;
  width: 90%;
  max-width: 720px;
  display: flex;
  align-items: center;
  background: #000;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  padding: 0 16px;
  border-radius: 24px;
  box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.2);
  left: 50%;
  transform: translateX(-50%);
  transition: all 1800ms ease;
}

.toast-container.active {
  bottom: 20px;
}

.toast-container h3 {
  font-weight: 800;
  line-height: 1.5;
  font-size: 16px;
}

.toast-container .text-content {
  padding: 0 24px;
  padding-right: 40px;
}

.toast-container p.author-name {
  color: #aaa;
  font-size: 14px;
}

.toast-container a {
  color: #5f64f3;
}

.toast-container .close {
  position: absolute;
  top: 16px;
  right: 16px;
  cursor: pointer;
}

# Javascript Popup thông báo

const toastContainer = document.querySelector(".toast-container");
const closeBtn = document.querySelector(".toast-container .close");
const toastLink = document.querySelector(".toast-container a");

if (!localStorage.getItem("displayToast")) {
  setTimeout(() => {
    toastContainer.classList.add("active");
  }, 1000);
}

const stopDisplayingToast = () => {
  localStorage.setItem("displayToast", false);
  toastContainer.classList.remove("active");
};

closeBtn.addEventListener("click", stopDisplayingToast);
toastLink.addEventListener("click", stopDisplayingToast);

# Icon Popup thông báo

Các bạn tải mấy hình ảnh icon này về và thay link vào trong code nhé: IMAGE ICON

Kết luận

Việc tạo Popup thông báo cho WordPress có rất nhiều Plugin có thể dễ dàng tạo được những Popup rất đẹp. Tuy nhiên bạn thích vọc nó thì bạn có thể thử với cách tạo Popup thông báo bằng html css cho WordPress mà Blog thủ thuật máy tính f4vnn chia sẻ nhé. Chúc bạn thành công.

Bài Viết Cùng Chuyên Mục
Game & Apk Mod Acapella Việt Nhạc DJ Liên Kết URL