Thêm tiện ích thông báo cookie tùy chỉnh cho chủ đề Blogger với AMP HTML

Dưới đây là cách thêm Thông báo cookie EU tùy chỉnh này trên blog Blogger với tích hợp AMP HTML.

Cách thêm thông báo cookie tùy chỉnh trên các chủ đề Blogger AMP 

Trong ví dụ này, chúng tôi sẽ hiển thị thông báo cookie ở đâu đó trong phầnchân trang của blog.

• Chuyển đến Chủ đề> Chỉnh sửa HTML
• tìm thấy <footer>
• sao chép và dán mã bên dưới / trước <footer>thẻ.

      <b:section class='blogramp-cookie' id='blogramp-cookie' showaddelement='no'>
        <b:widget id='HTML101' locked='false' title='Cookie Notify' type='HTML' version='1'>
          <b:widget-settings>
            <b:widget-setting name='content'>&lt;p&gt;This website uses cookies to enhance user experience browsing web pages.
&lt;br /&gt;
View our &lt;a href=&quot;/p/privacy.html&quot;&gt;Privacy Policy&lt;/a&gt; for more information.
&lt;/p&gt;</b:widget-setting>
          </b:widget-settings>
          <b:includable id='main'>
    <amp-accordion class='cookies' expr:id='&quot;cookies-&quot; + data:widget.instanceId + &quot;?m=0&quot;'>
      <section expanded='expanded'>
        <h4><span>x</span></h4>
        <div>
        <data:content/>
        </div>
      </section>
    </amp-accordion>  
</b:includable>
        </b:widget>
      </b:section>

• Nhấp vào Lưu chủ đề

Nếu trong khi Lưu chủ đề xảy ra lỗi, hãy cập nhật ID tiện ích thành ID duy nhất mới. Hiện tại một ID duy nhất đã được chỉ định.

Thêm kiểu cho thông báo cookie tùy chỉnh trên Blog Blogger.

• Cuộn lên mã chủ đề của bạn và tìm <style amp-custom>thẻ
• sao chép và dán dưới CSS trên / trước các   </style> tag

.blogramp-cookie {
  background-color: #3b3b3b;
  color: #fff;
  text-align: center;
  font-size: 85%;
}

.blogramp-cookie a {
  color: inherit;
  border-bottom: 1px dotted #fff;
}

.blogramp-cookie p {
  margin-bottom: 0;
}

.blogramp-cookie amp-accordion section {
  padding: 1em 0;
}

.blogramp-cookie amp-accordion,
.blogramp-cookie amp-accordion div {
  border: 0;
  border-radius: 0;
  margin: 0;
  padding:0;
}

.blogramp-cookie amp-accordion h4 {
  font-size:100%;
  color: inherit;
  background-color: transparent;
  border:0;
  border-radius:0;
  margin:0;
  display:inline-block;
  padding:0;
}

.blogramp-cookie amp-accordion h4>span {
  display:inline-block;
  float: right;
  height: 40px;
  width:40px;
  position: relative;
}

.blogramp-cookie amp-accordion div {
  margin: -40px 50px 0;
}

.blogramp-cookie amp-accordion section {
  display: none;
}

body .blogramp-cookie amp-accordion section[expanded] {
  display: block;
}

nhấp vào Lưu chủ đề

Cập nhật màu nền và màu văn bản thông báo cookie cho phù hợp.

Cập nhật văn bản cho thông báo cookie tùy chỉnh

• Chuyển đến bảng bố trí
• Làm mới bảng Bố trí của bạn nếu trình duyệt chưa làm như vậy.
• Tìm tiện ích mới được thêm với tiêu đề "Thông báo cookie"
• nhấp vào Chỉnh sửa và thực hiện các thay đổi của bạn ở đây.
• nhấn Save để lưu các thay đổi của bạn.

Thông báo cookie tùy chỉnh như thế này cho phép người dùng tùy chỉnh văn bản và sử dụng tính năng cookie loại bỏ để ẩn chúng nếu người dùng yêu cầu. Hành động loại bỏ này cũng được lưu bởi <amp-accordion/>thành phần & sẽ không hiển thị nếu nó được nhấp cho đến khi cùng một người dùng xóa cookie & bộ nhớ cache của trình duyệt.