Cookie consent footer banner

Codepelajar – Cookie consent merupakan salah satu aspek yang penting dalam penggunaan website saat ini. Hal tersebut terkait dengan privasi pengguna dalam hal pengumpulan dan penggunaan data mereka saat mereka mengakses suatu situs. Cookie consent adalah persetujuan yang diberikan oleh pengguna terhadap penggunaan cookie pada website yang mereka kunjungi.

Cookie consent footer banner:

Script ini terdiri dari HTML dan CSS beserta dapat digunakan pada berbagai plartform dari Blogspot, WordPress dan Website itu sendiri. Tentu hal ini akan menguntungkan para pengguna website karena tidak perlu membuat kode terlalu rumit untuk notifikasi Cookie sederhana.

HTML

<div class="cookie-consent-banner">
  <div class="cookie-consent-banner__inner">
    <div class="cookie-consent-banner__copy">
      <div class="cookie-consent-banner__header">THIS WEBSITE USES COOKIES</div>
      <div class="cookie-consent-banner__description">We use cookies to personalise content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you’ve provided to them or that they’ve collected from your use of their services. You consent to our cookies if you continue to use our website.</div>
    </div>

    <div class="cookie-consent-banner__actions">
      <a href="#" class="cookie-consent-banner__cta">
        OK
      </a>
      
      <a href="#" class="cookie-consent-banner__cta cookie-consent-banner__cta--secondary">
        Decline
      </a>
    </div>
  </div>
</div>

CSS

.cookie-consent-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 2147483645;
  box-sizing: border-box;
  width: 100%;

  background-color: #F1F6F4;
}

.cookie-consent-banner__inner {     
  max-width: 960px;
  margin: 0 auto;
  padding: 32px 0;
}

.cookie-consent-banner__copy { 
  margin-bottom: 16px;
}

.cookie-consent-banner__actions {    
}

.cookie-consent-banner__header {
  margin-bottom: 8px;
  
  font-family: "CeraPRO-Bold", sans-serif, arial;
  font-weight: normal;
  font-size: 16px;
  line-height: 24px;
}

.cookie-consent-banner__description {
  font-family: "CeraPRO-Regular", sans-serif, arial;
  font-weight: normal;
  color: #838F93;
  font-size: 16px;
  line-height: 24px;
}

.cookie-consent-banner__cta {
  box-sizing: border-box;
  display: inline-block;
  min-width: 164px;
  padding: 11px 13px;
    
  border-radius: 2px;
  
  background-color: #2CE080;
   
  color: #FFF;
  text-decoration: none;
  text-align: center;
  font-family: "CeraPRO-Regular", sans-serif, arial;
  font-weight: normal;
  font-size: 16px;
  line-height: 20px;
}

.cookie-consent-banner__cta--secondary { 
  padding: 9px 13px;
  
  border: 2px solid #3A4649;
  
  background-color: transparent;
  
  color: #2CE080;
}

.cookie-consent-banner__cta:hover {
  background-color: #20BA68;
}

.cookie-consent-banner__cta--secondary:hover {
  border-color: #838F93;
    
  background-color: transparent;
  
  color: #22C870;
}

.cookie-consent-banner__cta:last-child {
  margin-left: 16px;
}

Atur kode Cookie didalamnya sesuai kebutuhan dan sudah ditempatkan kata yang cocok untuk notifikasi, tapi jika Anda ingin mengubah kata tersebut maka gunakan dengan benar sesuai ketentuan yang berlaku.