Blog iTeam OS
Trang chủ
Blogspot Tips

Thêm tiện ích thông báo đồng ý cookie đáp ứng vào Blogger

Cookie là các tệp được tạo bởi các trang web bạn truy cập. Chúng làm cho trải nghiệm trực tuyến của bạn dễ dàng hơn bằng cách lưu thông tin duyệt web.

Theo luật của Liên minh Châu Âu, nếu blog của bạn có khách truy cập từ EU, trong trường hợp đó, bạn có thể cần cung cấp thông tin về Cookie và nhận được sự đồng ý.

Xin chào! Chào mừng bạn đến với Blog iTeam OS.

Xin chào người xem Bạn có khỏe không, tôi hy vọng bạn đang làm tốt. Trân trọng chào mừng bạn đến với blog Tech Aadi của tôi.

Thêm tiện ích thông báo đồng ý cookie đáp ứng vào Blogger
Thêm tiện ích thông báo đồng ý cookie đáp ứng vào Blogger

Cookies là gì??

Cookie là các tệp được tạo bởi các trang web bạn truy cập. Chúng làm cho trải nghiệm trực tuyến của bạn dễ dàng hơn bằng cách lưu thông tin duyệt web. Với cookie, các trang web có thể giữ cho bạn đăng nhập, ghi nhớ các 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 địa phương.

Có hai loại cookie:

  • 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ị trên thanh địa chỉ.
  • Cookie của bên thứ hai được tạo bởi các trang web khác. Các trang web này sở hữu một số nội dung, như quảng cáo hoặc hình ảnh, mà bạn thấy trên trang web bạn truy cập.

Làm cách nào để thêm Thông báo về sự đồng ý của Cookie??

Theo mặc định, blogger thông báo về Cookie xuất hiện trên đầu trang web Blogger nhưng nếu bạn muốn có Tiện ích thông báo đồng ý về cookie chuyên nghiệp và đáp ứng, qua đó bạn có thể nhận được Sự đồng ý liên quan đến Cookie từ khách truy cập của mình. Sau đó, bạn chỉ cần làm theo các bước bên dưới để nhận Tiện ích thông báo đồng ý cookie phong cách và đáp ứng.

Việc thêm Tiện ích Thông báo Đồng ý Cookie to vào Trang web Blogger sẽ không yêu cầu nhiều kiến ​​thức về HTML, CSS hoặc JS vì tôi đã thiết kế nó cho bạn. Những gì bạn cần làm là triển khai các mã ở đúng vị trí trong XML Chủ đề Blogger của bạn..

Quan trọng!Trước khi chúng tôi bắt đầu thêm mã trong XML, tôi khuyên bạn nên tạo một Bản sao lưu của chủ đề hiện tại của bạn. Tình cờ nếu có bất kỳ sự cố nào xảy ra, bạn có thể khôi phục lại sau.

Bước 1: Trước hết Đăng nhập vào Trang tổng quan Blogger.

Bước 2: Trên Bảng điều khiển Blogger, nhấp vào Chủ đề.

Bước 3: Nhấp vào biểu tượng mũi tên xuống bên cạnh nút 'Tùy chỉnh' .

Bước 4: Nhấp vào Chỉnh sửa HTML, bạn sẽ được chuyển đến trang chỉnh sửa.

Bước 5: Bây giờ tìm kiếm mã ]]></b:skin> và dán các Mã CSS sau ngay trên vào nó.

Nếu mẫu của bạn có tính năng chế độ tối và nếu bạn muốn có màu khác khi ở chế độ tối, bạn có thể tùy chỉnh các mã theo nhu cầu của mình. Mỗi mẫu có thể có một lớp chế độ tối khác nhau, vì vậy hãy điều chỉnh nó, bạn có thể thay thế lớp đã đánh dấu bằng lớp chế độ tối mẫu của mình.

/* 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 6: Chúng tôi phải tắt Thông báo cookie mặc định của Blogger, vì vậy hãy thêm các Mã JavaScript sau ngay bên trên vào </head>.

<script>/*<![CDATA[*/ /* Disable default Blogger cookie notice */ cookieChoices = {}; /*]]>*/</script>

Bước 7: Bây giờ, hãy thêm Mã JavaScript sau ngay bên trên vào thẻ </body> Nếu bạn không tìm thấy nó, nó có thể đã được phân tích cú pháp &lt;/body&gt;.

<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>

Khách truy cập có thể cần phải đồng ý Cookie Consent sau mỗi 30 ngày. Thay đổi không có được đánh dấu. mã theo nhu cầu của bạn (trong vài giây). Ví dụ. 5184000 = 60 ngày

Bước 8: Lưu các thay đổi bằng cách nhấp vào biểu tượng này

Chúng tôi sẽ thêm mã HTML trong tiện ích HTML / Javascript thông qua Trình đơn bố cục để chúng tôi có thể bật, tắt hoặc thực hiện thay đổi thông qua Trình đơn bố cục. Bạn cũng có thể thêm mã HTML trong Theme XML, để dán các mã HTML được cung cấp bên dưới ngay bên trên vào JavaScript mà chúng tôi đã thêm ở Bước 7..

Bước 9: Sau đó vào Menu Bố cục .

Bước 10: Tạo tiện ích bằng cách nhấp vào Thêm tiện ích và chọn HTML/Javascript.

Bước 11: 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 8: Cuối cùng, Lưu các thay đổi bằng cách nhấp vào biểu tượng này

Vậy là xong! Bây giờ trang web của bạn sẽ hiển thị 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 liên quan đến Cookie.

Demo

Bạn có muốn thấy nó hoạt động không?
Bạn có thể kiểm tra/xem Kiểu tiện ích con thông báo đồng ý cookie trước khi áp dụng nó trên Trang web Blogger của mình.
Hãy cùng xem!

Kết luận

Đây là tất cả về việc thêm Tiện ích Thông báo Đồng ý Cookie vào Trang web Blogger. Tôi hy vọng bạn thích bài viết này. Xin vui lòng chia sẻ bài viết này. Và nếu bạn đang gặp vấn đề trong bất kỳ phần nào hoặc bạn có bất kỳ câu hỏi nào thì hãy hỏi chúng tôi trong hộp bình luận. Cảm ơn bạn!

© Copyright:
https://iteamos.blogspot.com

Truy cập Bypass Google Account APK để tải file APK nhé