Trang chủ
Bảng tin
Lưu trữ
Giới thiệu
Tìm luôn
1
Theme WordPress Zibll Nulled Việt Hoá
52 Xem
2
Typecho - Mã Nguồn Typecho Đã Việt Hoá
52 Xem
3
Test bài viết mới
31 Xem
4
Hướng Dẫn Lấy Site Key, Secret Key Google reCaptCha
30 Xem
5
Chỉ Cần Hai Bàn Tay Và Một Cái Mồm
24 Xem
Share Code
Thủ Thuật
Truyện Hay
Ứng Dụng
Ảnh Đẹp
Chưa Phân Loại
Đăng nhập
/
Đăng ký
Tìm luôn
Tag tìm kiếm
Share Code
Source
JohnCMS
Hosting
Share
Free
Code
Blog
TypeCho
PHP
Mod
Truyện Ngắn
Ảnh Đẹp
Twig
Hot Girl
Girl Xinh
Thủ Thuật
Hack
Dorew
Ý Nghĩa
Bài viết:
0
Bình luận:
0
Trang chủ
Chủ đề
Share Code
Thủ Thuật
Truyện Hay
Ứng Dụng
Ảnh Đẹp
Chưa Phân Loại
Tab
Bảng tin
Lưu trữ
Giới thiệu
Đăng ký
◉
Đăng nhập
Tổng cộng
1
Bài viết của
Cookie
20-08-2022
Tạo Thông Báo Trang Web Đang Sử Dụng Cookie
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.Hướng dẫn cài đặtBước 1: Thêm đoạn HTML sau vào trước thẻ đóng .<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 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.[tip type="green"]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!  ̄﹃ ̄[/tip]
20/08/2022
5 Lượt xem
0 Bình luận
0 Lượt thích