Hướng dẫn tùy chỉnh thanh thông báo cookies của EU trên Blogger

Hôm nay, truy cập vào trang web của mình thì lại thấy thanh thông báo Cookie của Blogger hiện lên. Ngay lập tức, mình đã kiểm tra xem tại sao lại như vậy và thấy rằng IP nhà mình đang nằm ở Bỉ, ôi thật là khó hiểu cho nhà mạng.

Và mình bâng khuâng nếu như khách truy cập từ nước ngoài vào trang web của mình liệu có thấy thanh thông báo xấu xí này hay không? Sự thật là có và nó chỉ hiện lên cho các nước ở châu Âu mà thôi.

Đây là hình ảnh của thanh thông báo này:

Bởi vì, cách đây không lâu thì Google đã có thông báo đến toàn thể cộng đồng người dùng Blogger về một điều luật mới vừa được ban hành của Liên minh châu Âu:

❝Luật của Liên minh châu Âu yêu cầu bạn cung cấp cho khách truy cập ở Liên minh châu Âu thông tin về các cookie 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 nhận được sự chấp thuận.

Với trách nhiệm của mình, chúng tôi đã thêm thông báo trên blog của bạn để giải thích về việc Google sử dụng một số cookie nhất định của Blogger và của Google, kể cả việc sử dụng các cookie của Google Analytics và AdSense.

Bạn có trách nhiệm xác nhận rằng thông báo này thực sự có hiệu lực đối với blog của bạn và thông báo có hiển thị. Nếu bạn sử dụng các cookie khác, ví dụ như bằng cách thêm các tính năng của bên thứ ba, thì thông báo này có thể không có hiệu lực đối với bạn. Tìm hiểu thêm về thông báo này và trách nhiệm của bạn.❞

Nói ngắn gọn thì điều luật này yêu cầu trang blog của bạn phải hiện một thông báo về các cookie dùng trên blog cho khách truy cập từ Liên minh châu Âu. Điều luật này ra đời có thể vì lý do gần đây Liên minh châu Âu (EU) đang “siết chặt” Google ở tất cả các dịch vụ, họ còn đệ trình cả 1 dự luật cấm cửa Google tại châu Âu.

Làm thế nào để thấy thông báo cookie bên ngoài EU

Nếu bạn đang sử dụng một tên miền phụ blogspot thì bạn có thể nhìn thấy thanh thông báo bằng cách thay đổi mã quốc gia. Ví dụ – thay vì tên miền của bạn kết thúc bằng .blogspot.com thì bạn thay đổi nó thành .blogspot.fr hoặc .blogspot.ie

Nếu bạn đang sử dụng tên miền tùy chỉnh trên Blogger ( ví dụ: .com, .net, .info, .biz … ), bạn có thể thử một proxy web như Teleport hoặc Local Browser để xem blog của bạn bằng cách sử dụng một máy chủ ở châu Âu.

Cách ẩn hoặc vô hiệu hóa thông báo cookie EU của Blogger

1. Vào Theme ➔ Edit HTML và tìm </head>
2. Bạn thêm ở phía trên </head> đoạn mã sau:

<script type="text/javascript">cookieChoices = {};</script>

Nhưng vì đây là thông báo bắt buộc (vì nó là luật mà!), do đó bạn không nên tắt nó đi vì như thế, bạn có thể bị Google ra lệnh cấm.
3. Lưu mẫu của bạn.

CÁCH TUỲ CHỈNH VĂN BẢN THÔNG BÁO COOKIE CỦA EU

Để tùy chỉnh văn bản được hiển thị trong thông báo, hãy làm theo các bước sau:
1. Vào Theme ➔ Edit HTML và tìm </head>
2. Bạn thêm ở phía trên </head> đoạn mã sau:

<!-- START ALLFREEVN.COM Custom EU Cookies Notice --> 
<script type="text/javascript"> 
  cookieOptions = { 
    msg: "This site uses cookies from Google to deliver its services, to personalise ads and to analyse traffic. Information about your use of this site is shared with Google. By using this site, you agree to its use of cookies.", 
    link: "https://www.blogger.com/go/blogspot-cookies", 
    close: "Okay!", 
    learn: "Learn More" }; 
</script> 
<!-- END ALLFREEVN.COM Custom EU Cookies Notice -->

3. Chỉnh sửa các giá trị ở trên (văn bản ở giữa dấu ngoặc kép của msg, link, close, learn), xem trang này để được giúp đỡ.
4. Lưu mẫu của bạn.

CÁCH TUỲ CHỈNH THIẾT KẾ CỦA THÔNG BÁO COOKIE CỦA EU

Bạn có thể tùy chỉnh thiết kế của thanh thông báo để phù hợp hơn với thiết kế website của bạn hoặc không xung đột với thiết kế của bạn.
1. Vào Theme ➔ Edit HTML và tìm ]] </b:skin>
2. Thêm đoạn CSS vào trên ]] </b:skin>

.cookie-choices-info {}
.cookie-choices-info .cookie-choices-text{}
.cookie-choices-info .cookie-choices-button {}
.cookie-choices-info #cookieChoiceDismiss {}

3. Lưu mẫu của bạn.

Cách DI CHUYỂN THÔNG BÁO COOKIES CỦA EU xuống dưới MÀN HÌNH

1. Vào Theme ➔ Edit HTML và tìm ]] </b:skin>
2. Thêm đoạn CSS vào trên ]] </b:skin>

.cookie-choices-info {position: fixed; top: auto !important; bottom: 0px !important;}

3. Lưu mẫu của bạn.

Đây là mẫu thử nghiệm cho trang web của mình

.cookie-choices-info {position: fixed; top: auto !important; bottom: 0px !important;background-color: rgb(234, 247, 247) !important;}
.cookie-choices-info .cookie-choices-text{color: rgb(92, 114, 145)!important;font-size: 16px;margin: 10px 20px;}
.cookie-choices-info .cookie-choices-button {color: #ff9800 !important;}
.cookie-choices-info #cookieChoiceDismiss {color:#fff !important;padding: 8px 16px !important;background: #F44336 !important;background: -webkit-linear-gradient(to left, #ff9800, #f44336)!important;background: linear-gradient(to left, #ff9800, #f44336)!important;transition: all .3s ease !important;-webkit-transition: all .3s ease !important;-moz-transition: all .3s ease !important;-o-transition: all .3s ease !important;border-radius:4px !important}
.cookie-choices-info #cookieChoiceDismiss:hover{background:#000 !important}