Như chúng tôi biết, luật pháp của Liên minh Châu Âu (EU) yêu cầu bạn cung cấp cho du khách EU thông tin về cookie được sử dụng trên blog của bạn. Trong nhiều trường hợp, những luật này cũng yêu cầu bạn phải có được sự đồng ý.
|
| Cách tạo tiện ích thông báo chấp thuận cookie thích ứng trên Blogger |
Cookie là gì?
Cookie là các tập tin được tạo ra bởi các trang web mà bạn truy cập. Chúng giúp trải nghiệm trực tuyến của bạn dễ dàng hơn bằng cách lưu trữ thống kê duyệt web. Nhờ cookie, các trang web có thể giữ cho bạn đăng nhập, ghi nhớ tùy chọn trang web của bạn và cung cấp cho bạn nội dung phù hợp với vị trí của bạn.
Có hai loại cookies:
- Cookie của bên thứ nhất được tạo bởi trang web bạn truy cập. Trang web đó được hiển thị trong thanh địa chỉ.
- Cookie của bên thứ ba được tạo bởi các trang web khác. Những trang web này sở hữu một số nội dung, chẳng hạn như quảng cáo hoặc hình ảnh, mà bạn thấy trên trang web bạn truy cập.
Cách thêm thông báo chấp thuận cookie?
Theo mặc định, các blogger thông báo về cookie xuất hiện ở đầu trang web của blogger, nhưng nếu bạn muốn một tiện ích thông báo chấp thuận cookie chuyên nghiệp và đáp ứng mà bạn có thể thu thập sự đồng ý về cookie từ khách truy cập trang web của mình, thì bạn chỉ cần làm theo các bước bên dưới để có một tiện ích thông báo chấp thuận cookie hiện đại và đáp ứng cookie consent.
Thêm tiện ích thông báo chấp thuận cookie vào trang web Blogger sẽ không còn yêu cầu nhiều kiến thức về HTML, CSS hoặc JS nữa vì tôi đã thiết kế sẵn cho bạn. Việc bạn cần làm là chèn mã vào đúng vị trí trong tệp XML chủ đề Blogger của bạn.
Quan trọng!
Trước khi bắt đầu thêm mã XML, tôi khuyên bạn nên sao lưu giao diện hiện tại của mình.
Bước 01: Trước hết, hãy đăng nhập vào Bảng điều khiển Blogger.
Bước 02: Trên Bảng điều khiển Blogger, hãy nhấp vào Giao diện.
Bước 03: Nhấp vào bên cạnh nút 'tùy chỉnh'.
Bước 04: Nhấp vào Chỉnh sửa HTML, bạn sẽ được chuyển hướng đến trang chỉnh sửa.
Bước 05: Bây giờ hãy tìm đoạn mã ]]></b:skin> và
dán đoạn mã CSS sau vào ngay phía trên nó.
/* Cookies Consent Notice */
.ckWrap{position:fixed;right:20px;left:20px; margin-bottom: 80px; bottom:-600px;z-index:10;padding:20px;background:rgba(255, 255, 255, 0.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:30px 30px;box-shadow:0 -10px 25px -5px rgba(0,0,0,.1);align-items:center;justify-content:center;text-align:left;animation:ckUp 2.5s forwards;animation-delay:1s;-webkit-animation:ckUp 2.5s forwards;-webkit-animation-delay:1s}
.ckWrap.acptd{animation:ckDn 2.5s backwards;animation-delay:.3s;-webkit-animation:ckDn 2.5s backwards;-webkit-animation-delay:.3s}
.ckWrap.hidden{display:none}
.ckCont h2{margin-bottom: 10px; font-size: 1.1rem; font-weight: 700; font-family: var(--fontCo);}
.ckCont h2::after {content: ''; display: inline-block; vertical-align: middle; width: var(--widgetTa); margin: 0 10px; border-bottom: 1px solid var(--widgetTac); opacity: .5;}
.ckCont p{margin:10px 0;line-height:1.4rem;color:#08102b;font-size: 14px;font-weight:400;font-family: var(--fontCo);}
.ckF{margin-top: 15px; display: flex; justify-content: center;}
.ckB {display: inline-flex; align-items: center; cursor: pointer; padding: 10px 15px; outline: 0; border: 0; border-radius: var(--buttonR); line-height: 20px; color: rgba(0,0,0,.8); background: #e9e9e9; font-size: 14px; font-family: var(--fontB); white-space: nowrap; overflow: hidden;}
.ckF >*:first-child {margin-right: 10px; border-radius: 8px; background: var(--linkB); color: #fffdfc;}
.ckF >*:last-child {flex: 0 0 auto; border-radius: 8px;}
.ckF >* {flex-grow: 1; justify-content: center;}
@media screen and (min-width:768px){.ckWrap{max-width:400px; left: 20px; right: 20px; margin-bottom:20px; border-radius:10px; bottom:-600px;box-shadow:0 5px 35px rgba(0,0,0,.1);animation:ckdeskUp 2.5s forwards;animation-delay:1s;-webkit-animation:ckdeskUp 2.5s forwards;-webkit-animation-delay:1s}.ckWrap.acptd{animation:ckdeskDn 2.5s backwards;animation-delay:.3s;-webkit-animation:ckdeskDn 2.5s backwards;-webkit-animation-delay:0.3s}}
@-webkit-keyframes ckUp{100%{bottom:0}}
@keyframes ckUp{100%{bottom:0}}
@-webkit-keyframes ckdeskUp{100%{bottom:30px}}
@keyframes ckdeskUp{100%{bottom:30px}}
@-webkit-keyframes ckDn{0%{bottom:0}100%{bottom:-600px}}
@keyframes ckDn{0%{bottom:0}100%{bottom:-600px}}
@-webkit-keyframes ckdeskDn{0%{bottom:30px}100%{bottom:-600px}}
@keyframes ckdeskDn{0%{bottom:30px}100%{bottom:-600px}}
.darkMode .ckWrap{background:rgba(50, 50, 50, 0.8)}
.darkMode .ckCont h2, .darkMode .ckCont p, .darkMode{color:#fefefe}
Bước 06: Chúng ta cần vô hiệu hóa thông báo cookie mặc định của Blogger, vì vậy hãy thêm các mã JavaScript sau ngay phía trên thẻ </head>
<script>/*<![CDATA[*/ /* Disable default Blogger cookie notice */ cookieChoices = {}; /*]]>*/</script>
Bước 07: Bây giờ hãy thêm đoạn mã JavaScript sau vào ngay phía trên thẻ </body>. Nếu bạn không tìm thấy nó, có lẽ nó đã được phân tích cú pháp rồi, đó là </body>
<script>/*<![CDATA[*/ /* Cookies Consent Notice */ var ckBox=document.querySelector("#ckBox"),ckAcptBtn=document.querySelector("#ckAcptBtn"),ckErrMes="Cookie can't be set! Please unblock this site from the cookie setting of your browser.";if(null!=ckBox){ckAcptBtn.onclick=()=>{document.cookie="CookieConsentByFineshop=Accepted; max-age=2592000; path=/",document.cookie?ckBox.classList.add("acptd"):alert(ckErrMes)};let e=document.cookie.indexOf("CookieConsentByFineshop=Accepted");-1!=e?ckBox.classList.add("hidden"):ckBox.classList.remove("hidden")} /*]]>*/</script>Bước 08: Lưu các thay đổi bằng cách nhấp vào biểu tượng này
Bước 09: Sau đó, vào Menu Bố cục.
Bước 10: Tạo một tiện ích bằng cách nhấp vào Thêm tiện ích và chọn HTML/Javascript.
Bước 10: Dán các mã HTML sau vào đó.
<!--[ Cookies Consent Notice ]-->
<div class='ckWrap hidden' id='ckBox'>
<div class='ckCont'>
<!--[ Cookies Notice Heading ]-->
<h2>Cookies Consent</h2>
<!--[ Cookies Notice Detail ]-->
<p>We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.</p>
</div>
<div class='ckF'>
<button class='ckB' id='ckAcptBtn'>Accept Cookies!</button>
<a class='ckB' href='https://policies.google.com/technologies/cookies'>Learn More</a>
</div>
</div>Bước 12: Cuối cùng, lưu các thay đổi bằng cách nhấp vào biểu tượng này
Xong rồi! Giờ đây, trang web của bạn sẽ hiển thị một cửa sổ bật lên với các nút "Chấp nhận tất cả!" và "Tìm hiểu thêm" về Cookie.
