Thêm thông báo sử dụng cookie cho Blog/Website

Chào các bạn, bài này mình sẽ chia sẻ cho bạn đoạn code để thêm hộp thoại thông báo sử dụng cookie vào cho Blog hoặc là Website của các bạn.
Thêm thông báo sử dụng cookie cho Blog/Website
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

Chào các bạn, bài này mình sẽ chia sẻ cho bạn đoạn code để thêm hộp thoại thông báo sử dụng cookie vào cho Blog hoặc là Website của các bạn. Code sử dụng HTML, CSS và Javascript, hộp thoại này tạo cho Blog của bạn thêm cảm giác chuyên nghiệp hơn khi mà đại đa số các Blog và Website nước ngoài đều sử dụng.

Thêm thông báo sử dụng cookie cho Blog/Website

Thông báo xuất hiện khi người dùng truy cập Blog lần đầu tiên sẽ thấy thông báo và click vào nút Accept! và khi truy cập trang khác hoặc tải lại trang hộp thoại sẽ không xuất hiện lại. Nếu người dùng không tắt thông báo thì khi truy cập trang khác hoặc tải lại trang thông báo vẫn sẽ xuất hiện cho đến khi người dùng tắt thông báo bằng nút Accept!. Và người dùng sẽ bị chặn không thể tắt thông báo khi chặn sử dụng cookie trên Blog của bạn.

Thông báo sử dụng cookie sẽ xuất hiện lại sau một khoảng thời gian cookie hết hạn mà chúng ta thiết lập. Nếu chưa hết hạn mà người dùng xóa lịch sử trình duyệt bao gồm cookie thì khi truy cập lại thông báo sẽ xuất hiện trở lại được tính bằng thời gian khi người dùng tắt thông báo.

Các bước thêm hộp thoại thông báo như sau:

Bước 1: Thêm đoạn HTML sau vào trước thẻ đóng </body>.

<div class='cookie-box'>
    <div class='cookie-row'>
     <div class='cookie-img'><svg viewBox='0 0 97.93 97.93' xmlns='http://www.w3.org/2000/svg'><path d='M44,23.76a2.47,2.47,0,1,0,.91,3.37A2.47,2.47,0,0,0,44,23.76Z'></path><path d='M25.9,40.32a2.47,2.47,0,0,0,0,4.93h0a2.47,2.47,0,1,0,0-4.93Z'></path><circle cx='32.08' cy='65.86' r='2.47'></circle><path d='M56.38,69.91a2.47,2.47,0,1,0,1.14,1.49A2.47,2.47,0,0,0,56.38,69.91Z'></path><path d='M72,52.68a2.47,2.47,0,0,0-2.38,1.83,2.44,2.44,0,0,0,.25,1.87,2.47,2.47,0,0,0,4.52-.59,2.44,2.44,0,0,0-.25-1.87A2.47,2.47,0,0,0,72,52.68Z'></path><path d='M89.51,52.86A14,14,0,0,1,81,47.2,14.09,14.09,0,0,1,61,35.68,14.09,14.09,0,0,1,49.49,15.73a14,14,0,0,1-5.66-8.55,44,44,0,0,0-21.09,6.15A44.26,44.26,0,0,0,71.46,87.08,44.24,44.24,0,0,0,89.51,52.86ZM28.28,43.42a2.47,2.47,0,0,1-2.38,1.83h0a2.47,2.47,0,1,1,2.38-1.83Zm3.8,24.9a2.47,2.47,0,1,1,2.47-2.47A2.47,2.47,0,0,1,32.08,68.32ZM44.92,27.13A2.47,2.47,0,1,1,44,23.76,2.47,2.47,0,0,1,44.92,27.13ZM57.28,73.27a2.47,2.47,0,1,1-.9-3.36,2.47,2.47,0,0,1,.9,3.36ZM74.42,55.79a2.47,2.47,0,1,1-.25-1.87A2.45,2.45,0,0,1,74.42,55.79Z' fill='#7577a9'></path><path d='M97.93,48.52v-.2A2.35,2.35,0,0,0,95.7,46a9.37,9.37,0,0,1-8-5.45,2.35,2.35,0,0,0-3.49-.93,9.51,9.51,0,0,1-5.44,1.72A9.4,9.4,0,0,1,69.39,31.1a2.35,2.35,0,0,0-2.55-2.55c-.28,0-.57,0-.85,0a9.39,9.39,0,0,1-7.68-14.81,2.35,2.35,0,0,0-.93-3.49,9.37,9.37,0,0,1-5.45-8A2.35,2.35,0,0,0,49.61,0H49a49,49,0,1,0,49,49C97.93,48.82,97.93,48.67,97.93,48.52ZM71.46,87.08A44.26,44.26,0,0,1,22.74,13.33,44,44,0,0,1,47.53,4.72a14,14,0,0,0,5.66,8.55A14.09,14.09,0,0,0,64.71,33.22,14.09,14.09,0,0,0,84.66,44.75a14,14,0,0,0,8.56,5.66A44.3,44.3,0,0,1,71.46,87.08Z'></path></svg></div>
    <div class='cookie-content'>
      <p>Our website uses cookies to improve your experience. <a href='https://policies.google.com/technologies/cookies' rel='nofollow noopener' target='_blank' title='Learn more'>Learn more</a></p>
      <button class='cookie-buttons'>Accept!</button>
</div>
</div>
</div>

Các bạn có thể thay Our website uses cookies to improve your experience bằng nội dung tuỳ chỉnh của các bạn.

Bước 2: Thêm CSS sau vào Blog của bạn.

.cookie-box.hide{display:none}
.cookie-box{position:fixed;width:100%;max-width:400px;min-height:100px;background-color:#ffffff;box-shadow:25px 12px 25px 12px rgb(30 30 30 / 4%);z-index:990;border-radius:6px;bottom:15px;left:15px;padding:15px}
.cookie-row{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;text-align:left}
.cookie-img{padding-right:20px}
.cookie-img svg{fill:#333;width:60px}
.cookie-content p{position:relative;width:100%;display:inline-block;font-size:15px;color:#666666;margin-top:0}
.cookie-content p a{text-decoration:underline;}
.cookie-buttons{position:relative;width:100%;margin-top:10px;float:left;background-color:#7577a9;font-family:inherit;font-size:14px;color:#ffffff;text-decoration:none;opacity:1;border:none;cursor:pointer;font-weight:500;padding:5px;border-bottom:2px solid rgba(0,0,0,0.1);border-radius:6px}

CSS các bạn chỉnh sửa màu sắc cũng như các thuộc tính phù hợp cho Blog của bạn nhé, đây là CSS tham khảo giống Blog mình.

Bước 3: Cuối cùng thêm tiếp đoạn Jacascript sau vào trước thẻ đóng </body> tiếp tục.

<script>//<![CDATA[
    const cookieBox = document.querySelector(".cookie-box"),
    acceptBtn = cookieBox.querySelector("button");
    acceptBtn.onclick = ()=>{
      document.cookie = "CookieBy=NguyenLuongDuy; max-age="+60*60*24*30;
      if(document.cookie){ 
        cookieBox.classList.add("hide"); 
      }else{ 
        alert("Cookie can't be set! Please unblock this site from the cookie setting of your browser.");
      }
    }
    let checkCookie = document.cookie.indexOf("CookieBy=NguyenLuongDuy");
    checkCookie != -1 ? cookieBox.classList.add("hide") : cookieBox.classList.remove("hide");
  //]]></script>

Bạn thiết lập thời gian hết hạn cookie ở đoạn này nhé max-age="+60*60*24*30 trong đó số 60 đầu tiên là giây, tiếp theo là phút, sau đó là giờ, cuối cùng là ngày như thiết lập trên mình đang để là 30 ngày.

Lời kết

Như vậy là mình đã chia sẻ xong cho các bạn cách thêm thông sử dụng cookie cho Blog/Website có thể áp dụng các nền tảng khác ngoài Blogspot nhé. Chúc các bạn thành công!

0/5
0 ratings
5
4
3
2
1
Có những thứ luôn quẩn quanh cuộc đời bạn và đôi lúc không có lời giải thích, liệu rằng đó có phải là duyên số?!

4 Nhận xét

Your email address will not be published.

Enter Image URL / Code Snippets / Quotes / name tag, then click parse button accordingly that you have entered. then copy the parse result and paste it into the comment field.


  1. Tomorrow

    Huong dan chia se list nhac di Duy oi, hay qua

    Trả lời Xóa
  2. Hoàng Văn Tú
    10/27/2021 02:23:00 CH

    cho mình xin code nhạc với ạ, cám ơn rất nhiều
    [email protected]

    Trả lời Xóa

Maybe You Like

Follow
Google Translate