• Speedtest Internet
  • Test Code
  • Nén CSS
  • Chuyển đổi định dạng Webp
  • Mã Hóa URL
  • Shorturl
  • LYRICS
Blog thủ thuật máy tính f4vnn
No Result
View All Result
29 Tháng Năm , 2022
  • Login
  • Trang chủ
  • TIPS COMPUTER
    • WINDOWS
    • SERVER
    • OFFICE
    • SOFTWARE
    • GAME
    • INTERNET
    • SECURITY
  • TIPS MAC – IOS
  • TIPS MOBILE
  • TIPS SOURCE
    • TIPS WORDPRESS
    • TIPS BLOGSPOT
    • OTHER SOURCE
  • TIPS OTHER
  • REVIEWS
  • Trang chủ
  • TIPS COMPUTER
    • WINDOWS
    • SERVER
    • OFFICE
    • SOFTWARE
    • GAME
    • INTERNET
    • SECURITY
  • TIPS MAC – IOS
  • TIPS MOBILE
  • TIPS SOURCE
    • TIPS WORDPRESS
    • TIPS BLOGSPOT
    • OTHER SOURCE
  • TIPS OTHER
  • REVIEWS
No Result
View All Result
Blog thủ thuật máy tính f4vnn
No Result
View All Result
Home Tips Source Tips Wordpress

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

Blog Tips f4vnn by Blog Tips f4vnn
15/11/2021
Reading Time: 4 mins read
# QUÀ TẶNG VÀ KHUYẾN MẠI
  • Đăng ký tên miền tên miền .com,.com.vn, .vn giá rẻ: TẠI ĐÂY
  • Hosting giá rẻ chất lượng cao chỉ 49k/tháng: TẠI ĐÂY
  • Cloud VPS giá rẻ chất lượng cao chỉ 120k/tháng: TẠI ĐÂY

  • Nội dung chính

    • Tạo Popup thông báo bằng html css cho WordPress
      • # Code Popup thông báo
      • # Css Popup thông báo
      • # Javascript Popup thông báo
      • # Icon Popup thông báo
    • 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.

    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
    Tags: cách tạo Popup thông báo bằng html cssHow to create a Notification Popup with html css for WordpressHow to make a Notification Popup with html css for WordpressHướng dẫn cách tạo Popup thông báo bằng html css cho Wordpresstạo Popup thông báo bằng html css cho Wordpress
    ShareTweetPinShare1ShareShare

    Related Posts

    Hướng dẫn cách cài đặt WordPress trên Windows 10

    Hướng dẫn cách cài đặt WordPress trên Windows 10

    06/12/2021
    Chia sẻ danh sách Ping list tăng tốc độ index tốt nhất cho WordPress

    Chia sẻ danh sách Ping list tăng tốc độ index tốt nhất cho WordPress

    04/12/2021

    Hướng dẫn cách tùy biến Menu trên Mobile cho WordPress

    11/11/2021

    Giới thiệu 4 giao diện wordpress chia sẻ video miễn phí cực đẹp

    08/10/2021

    Chia sẻ Plugin BetterLinks Pro v1.0.6 rút gọn và quản lý URL cho WordPress

    05/09/2021

    Hướng dẫn chuyển Widgets mới về phiên bản cũ cho WordPress 5.8

    22/07/2021
    Next Post
    Hướng dẫn cách gộp nhiều files CSV vào 1 Excel workbook

    Hướng dẫn cách gộp nhiều files CSV vào 1 Excel workbook

    BitLocker Recovery Key là gì và cách tìm nó trên Windows 11

    BitLocker Recovery Key là gì và cách tìm nó trên Windows 11

    ☊ BLOG NGHE NHẠC DJ

    slide-dj24h

    Receive updates of our latest tutorials.

    By signing up, you agree to our Privacy Policy.

    Facebook logoTwitter logoLinked-in logo

    ✪ TÌM KIẾM NHANH TRÊN GOOGLE

    Mẹo để tìm kiếm nhanh cách sửa lỗi bạn vào Google gõ tên lỗi + từ khóa f4vnn!

    ☷ BÀI VIẾT MỚI NHẤT

    Chia sẻ 8 mẹo tối ưu hóa SSD để có hiệu suất tốt hơn trên máy tính

    Chia sẻ 8 mẹo tối ưu hóa SSD để có hiệu suất tốt hơn trên máy tính

    25/05/2022
    Hướng dẫn cách sửa thiếu tùy chọn Sleep trên Windows 11

    Hướng dẫn cách sửa thiếu tùy chọn Sleep trên Windows 11

    25/05/2022
    Hướng dẫn cách chơi Fortnite trên iPhone và iPad miễn phí

    Hướng dẫn cách chơi Fortnite trên iPhone và iPad miễn phí

    23/05/2022
    Hướng dẫn cách cập nhật bộ điều khiển không dây Xbox bằng máy tính

    Hướng dẫn cách cập nhật bộ điều khiển không dây Xbox bằng máy tính

    16/05/2022
    Hướng dẫn 3 cách cho phép người dùng thông thường chạy với quyền quản trị

    Hướng dẫn 3 cách cho phép người dùng thông thường chạy với quyền quản trị

    16/05/2022

    ☷ BÀI VIẾT XEM NHIỀU

    • Chuyển từ Google Slides sang PowerPoint và ngược lại 25.8k views
    • Làm thế nào để dừng Fixing Stage 1 trong Windows 10 24.4k views
    • Sửa lỗi A JavaScript error occurred in the main process trên Windows 10 15.2k views
    • Sửa lỗi Run-time error 1004 không thể chạy Macro trong Excel 13.5k views
    • Cách sửa lỗi Runtime Error 1004 trong Microsoft Excel 10.7k views
    • Cách sửa lỗi Bad Image 0xc000012f trong Windows 10 10.2k views
    Blog thủ thuật máy tính f4vnn

    © 2021 Blog Tips F4vnn - Chia sẻ thủ thuật công nghệ.

    Giới thiệu & Bạn bè

    • Chính sách
    • Quy định
    • About Us
    • DMCA
    • Nhạc DJ24h
    • Game & App
    • Vocal

    Follow Us

    No Result
    View All Result
    • Trang chủ
    • TIPS COMPUTER
      • WINDOWS
      • SERVER
      • OFFICE
      • SOFTWARE
      • GAME
      • INTERNET
      • SECURITY
    • TIPS MAC – IOS
    • TIPS MOBILE
    • TIPS SOURCE
      • TIPS WORDPRESS
      • TIPS BLOGSPOT
      • OTHER SOURCE
    • TIPS OTHER
    • REVIEWS

    © 2021 Blog Tips F4vnn - Chia sẻ thủ thuật công nghệ.

    Welcome Back!

    Login to your account below

    Forgotten Password?

    Retrieve your password

    Please enter your username or email address to reset your password.

    Log In