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. 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ô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 src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<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>

Nếu Blog bạn có thư viên Jquery rồi thì xoá bỏ đoạn thẻ chứa thư viện Jquery ở trên đi nhé. Và 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!