Mẹo nhỏ: Để tìm kiếm chính xác các chia sẻ của f4vnn.com, hãy search trên Google với cú pháp: "Từ khóa" + "f4vnn". (Ví dụ: tắt update windows f4vnn). Tìm kiếm ngay

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

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.

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

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

Theo dõi trên

Logo Google new
Rate this post