Cara Membuat Cookie Consent Pada Website

Membuat Notifikasi cookie

Cookie yang biasa kita temui di kehidupan sehari-hari adalah sebuah cemilan berbentuk bulat yang berasa manis. Tetapi cookie yang berada di internet adalah hal yang berbeda, HTTP Cookie atau yang disebut juga Internet cookie,Browser cookie adalah sebuah data kecil yang disimpan pada komputer pengguna oleh browser saat kita mengunjungi sebuah website.

Tipe-Tipe Cookie

Pada internet terdapat banyak macam cookie diantaranya yaitu:

Session cookies

Session cookies atau yang sering disebut temporary cookies (kuki sementara) adalah cookie yang hanya ada dalam memori sementara saat pengguna berada di suatu situs web. cookie ini akan terhapus ketika kalian menutup browser kalian. cookie ini biasanya terdapat di situs e-commerce atau situs belanja online.

Persisten cookies

Persisten cookies atau yang bisa disebut permanent cookies adalah tipe cookie yang tidak akan hilang saat kita menutup browser kita melainkan cookie ini akan hilang pada waktu tertentu. contohnya informasi login seperti password dan username, jadi kita tidak perlu mengetik ulang username dan password ketika kita ingin login.

Nah, biasanya ketika kita mengunjungi situs-situs yang menggunakan cookie pada situsnya terdapat semacam notifikasi atau pemberitahuan kepada pengunjung untuk menginformasikan bahwa situs mereka menggunakan cookie.

Notifikasi ini wajib dimiliki situs kalian jika kalian memiliki pengunjung dari negara Uni eropa karena terdapat undang-undang uni eropa yang mewajibkan kalian untuk memberi informasi tentang cookie yang kalian gunakan kepada pengunjung.

Lalu, bagaimana cara membuatnya? caranya bisa dibilang mudah, jika kalian tertarik, simak tutorial berikut.

Cara Buat Notifikasi Cookie

• Pertama, tambahkan CSS berikut ini terlebih dahulu ke blog kalian.

.cookie-notification{position:fixed;left:0;bottom:0;z-index:999999;color:#fff;visibility:hidden}.cookie-notification a:hover{color:#fff}.wp-block-column.cookie-svg{max-width:20%;float:left;margin-right:10px}@media (max-width:479.98px){.cookie-notification>div{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}}@media (max-width:689.98px){.cookie-notification{right:0}.cookie-notification>div{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-top:15px;padding-bottom:15px}}@media (max-width:689.98px){.cookie-notification{background:#fff}}@media (min-width:690px){.cookie-notification{padding:0 25px 25px 25px}.cookie-notification .ct-cookies-content{margin-bottom:15px}}.cookie-notification .container{position:relative}@media (max-width:689.98px){.cookie-notification .container{width:88%;margin:0 auto}}@media (min-width:690px){.cookie-notification .container{background:#fdfdfd;-webkit-box-shadow:0 5px 30px -5px rgba(34,56,101,.15);box-shadow:0 5px 30px -5px rgba(34,56,101,.15);padding:25px;border-radius:3px;max-width:330px}}.cookie-notification .ct-cookies-content{font-family:inherit;color:#000;line-height:1.4}.cookie-notification .ct-cookies-content a{text-decoration:underline;color:#115cfa}@media (max-width:479.98px){.cookie-notification .ct-cookies-content{text-align:center;margin-bottom:15px}}@media (max-width:689.98px){.cookie-notification .ct-cookies-content{font-size:12px}}@media (min-width:690px){.cookie-notification .ct-cookies-content{font-size:13px}}.cookie-notification .ct-accept{color:#fff;background:#115cfa;border:0;padding:0 20px;height:35px;border-radius:3px;cursor:pointer;text-transform:capitalize;--buttonShadow:none;--buttonTransform:none}@media (max-width:479.98px){.cookie-notification .ct-accept{width:100%}}@media (min-width:480px) and (max-width:689.98px){.cookie-notification .ct-accept{margin-left:20px}}.cookie-notification .ct-close{color:#000!important;position:absolute;top:0;right:0;border:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;font-size:17px;width:45px;height:45px;padding:0;opacity:.5;color:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;-webkit-transition:opacity .2s ease;transition:opacity .2s ease}.cookie-notification .ct-close:focus{outline:0}.cookie-notification .ct-close:hover{opacity:1}@media (max-width:689.98px){.cookie-notification .ct-close{display:none}.wp-block-column.cookie-svg{display:none}}

• Jika sudah, selanjutnya tambahkan Javascript berikut ini ke blog kalian.

function acceptCookie() {
                document.cookie = "cookieaccepted=1; expires=Thu, 18 Dec 2030 12:00:00 UTC; path=/", document.getElementById("cookie-notice").style.visibility = "hidden"
            }
            document.cookie.indexOf("cookieaccepted") < 0 && (document.getElementById("cookie-notice").style.visibility = "visible");
function myFunction() {
  document.getElementById("cookie-notice").style.visibility = "hidden";
}

• Terakhir, buat gadget baru untuk pengguna blogger dan pilih html/javascript dan masukkan kode berikut.

<div id="cookie-notice" class="cookie-notification">
	<div class="container">
		<div class="wp-block-column cookie-svg">
		<div>
			<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewbox="0 0 40 40"><g fill="none" fill-rule="evenodd"><circle cx="20" cy="20" r="20" fill="#D5A150"></circle><path fill="#AD712C" d="M32.44 4.34a19.914 19.914 0 0 1 4.34 12.44c0 11.046-8.954 20-20 20a19.914 19.914 0 0 1-12.44-4.34C8.004 37.046 13.657 40 20 40c11.046 0 20-8.954 20-20 0-6.343-2.954-11.996-7.56-15.66z"></path><path fill="#C98A2E" d="M10.903 11.35c-.412 0-.824-.157-1.139-.471a4.432 4.432 0 0 1 0-6.26 4.397 4.397 0 0 1 3.13-1.297c1.183 0 2.294.46 3.13 1.296a1.61 1.61 0 0 1-2.276 2.277 1.2 1.2 0 0 0-.854-.354 1.208 1.208 0 0 0-.854 2.06 1.61 1.61 0 0 1-1.137 2.749z"></path><circle cx="12.894" cy="7.749" r="2.817" fill="#674230"></circle><path fill="#7A5436" d="M10.09 7.48l-.003.032a1.566 1.566 0 0 0 1.624 1.683 2.824 2.824 0 0 0 2.703-2.578 1.566 1.566 0 0 0-1.624-1.683 2.823 2.823 0 0 0-2.7 2.546z"></path><path fill="#C98A2E" d="M4.464 24.227c-.412 0-.824-.157-1.138-.471a4.432 4.432 0 0 1 0-6.26 4.398 4.398 0 0 1 3.13-1.297c1.182 0 2.294.46 3.13 1.297a1.61 1.61 0 0 1-2.277 2.276 1.2 1.2 0 0 0-.853-.353 1.208 1.208 0 0 0-.854 2.06 1.61 1.61 0 0 1-1.138 2.748z"></path><circle cx="6.456" cy="20.626" r="2.817" fill="#674230"></circle><path fill="#7A5436" d="M3.651 20.356a1.566 1.566 0 0 0 1.62 1.716 2.824 2.824 0 0 0 2.703-2.578 1.566 1.566 0 0 0-1.622-1.683 2.824 2.824 0 0 0-2.7 2.546z"></path><path fill="#C98A2E" d="M10.098 32.276c-.412 0-.824-.158-1.138-.472a4.432 4.432 0 0 1 0-6.26 4.397 4.397 0 0 1 3.13-1.297c1.182 0 2.294.46 3.13 1.297a1.61 1.61 0 0 1-2.277 2.276 1.2 1.2 0 0 0-.853-.353 1.208 1.208 0 0 0-.854 2.06 1.61 1.61 0 0 1-1.138 2.749z"></path><circle cx="12.089" cy="28.674" r="2.817" fill="#674230"></circle><path fill="#7A5436" d="M9.285 28.405a1.566 1.566 0 0 0 1.62 1.716 2.824 2.824 0 0 0 2.703-2.578 1.566 1.566 0 0 0-1.622-1.684 2.824 2.824 0 0 0-2.7 2.546z"></path><path fill="#C98A2E" d="M18.95 37.91c-.411 0-.823-.158-1.137-.472a4.432 4.432 0 0 1 0-6.26 4.397 4.397 0 0 1 3.13-1.297c1.182 0 2.294.46 3.13 1.297a1.61 1.61 0 0 1-2.277 2.276 1.2 1.2 0 0 0-.853-.353 1.208 1.208 0 0 0-.854 2.06 1.61 1.61 0 0 1-1.138 2.748z"></path><circle cx="20.942" cy="34.308" r="2.817" fill="#674230"></circle><path fill="#7A5436" d="M18.138 34.038l-.002.033a1.566 1.566 0 0 0 1.623 1.684 2.824 2.824 0 0 0 2.703-2.578 1.566 1.566 0 0 0-1.623-1.684 2.824 2.824 0 0 0-2.7 2.546z"></path><path fill="#C98A2E" d="M20.56 15.385c-.411 0-.823-.157-1.138-.471a4.432 4.432 0 0 1 0-6.26 4.397 4.397 0 0 1 3.13-1.297c1.183 0 2.294.46 3.13 1.296a1.61 1.61 0 0 1-2.276 2.277 1.2 1.2 0 0 0-.854-.354 1.208 1.208 0 0 0-.854 2.06 1.61 1.61 0 0 1-1.137 2.75z"></path><circle cx="22.552" cy="11.784" r="2.817" fill="#674230"></circle><path fill="#7A5436" d="M19.748 11.514l-.003.033a1.566 1.566 0 0 0 1.624 1.683 2.824 2.824 0 0 0 2.703-2.578 1.566 1.566 0 0 0-1.624-1.683 2.823 2.823 0 0 0-2.7 2.546z"></path><path fill="#C98A2E" d="M30.219 29.861c-.412 0-.824-.157-1.139-.471a4.432 4.432 0 0 1 0-6.26 4.397 4.397 0 0 1 3.13-1.297c1.183 0 2.294.46 3.13 1.296a1.61 1.61 0 0 1-2.276 2.277 1.2 1.2 0 0 0-.854-.354 1.208 1.208 0 0 0-.854 2.06 1.61 1.61 0 0 1-1.137 2.75z"></path><circle cx="32.21" cy="26.26" r="2.817" fill="#674230"></circle><path fill="#7A5436" d="M29.406 25.99a1.566 1.566 0 0 0 1.62 1.716 2.824 2.824 0 0 0 2.703-2.578 1.566 1.566 0 0 0-1.623-1.683 2.824 2.824 0 0 0-2.7 2.546z"></path><path fill="#C98A2E" d="M29.414 14.57c-.412 0-.824-.158-1.139-.472a4.432 4.432 0 0 1 0-6.26 4.397 4.397 0 0 1 3.13-1.297c1.183 0 2.295.46 3.13 1.297a1.61 1.61 0 0 1-2.276 2.276 1.2 1.2 0 0 0-.853-.353 1.208 1.208 0 0 0-.854 2.06 1.61 1.61 0 0 1-1.138 2.748z"></path><circle cx="31.405" cy="10.968" r="2.817" fill="#674230"></circle><path fill="#7A5436" d="M28.601 10.698a1.566 1.566 0 0 0 1.62 1.716 2.824 2.824 0 0 0 2.703-2.578 1.566 1.566 0 0 0-1.622-1.683 2.824 2.824 0 0 0-2.7 2.546z"></path><path fill="#C98A2E" d="M17.341 24.227c-.412 0-.824-.157-1.138-.471a4.432 4.432 0 0 1 0-6.26 4.397 4.397 0 0 1 3.13-1.297c1.183 0 2.294.46 3.13 1.297a1.61 1.61 0 0 1-2.276 2.276 1.2 1.2 0 0 0-.854-.354 1.208 1.208 0 0 0-.854 2.06 1.61 1.61 0 0 1-1.138 2.75z"></path><circle cx="19.333" cy="20.626" r="2.817" fill="#674230"></circle><path fill="#7A5436" d="M16.529 20.356l-.003.033a1.566 1.566 0 0 0 1.623 1.684 2.824 2.824 0 0 0 2.703-2.578 1.566 1.566 0 0 0-1.623-1.684 2.824 2.824 0 0 0-2.7 2.546z"></path><g fill="#AD712C" transform="translate(2.656 1.875)"><circle cx="7.485" cy="21.143" r="1"></circle><circle cx="11.509" cy="21.143" r="1"></circle><circle cx="9.497" cy="17.521" r="1"></circle><circle cx="2.253" cy="24.765" r="1"></circle><circle cx="10.301" cy="33.618" r="1"></circle><circle cx="12.716" cy="30.399" r="1"></circle><circle cx="16.74" cy="25.57" r="1"></circle><circle cx="23.179" cy="23.155" r="1"></circle><circle cx="21.569" cy="24.765" r="1"></circle><circle cx="23.984" cy="27.179" r="1"></circle><circle cx="23.984" cy="32.008" r="1"></circle><circle cx="32.837" cy="15.107" r="1"></circle><circle cx="30.422" cy="31.203" r="1"></circle><circle cx="18.35" cy=".62" r="1"></circle><circle cx="3.863" cy="7.863" r="1"></circle><circle cx=".644" cy="12.692" r="1"></circle><circle cx="9.899" cy="13.9" r="1"></circle><circle cx="12.314" cy="12.692" r="1"></circle><circle cx="9.899" cy="11.485" r="1"></circle><circle cx="21.167" cy="17.521" r="1"></circle><circle cx="15.935" cy="5.449" r="1"></circle><circle cx="23.581" cy="12.692" r="1"></circle><circle cx="24.788" cy="16.314" r="1"></circle><circle cx="27.203" cy="16.314" r="1"></circle><circle cx="27.203" cy="18.729" r="1"></circle><circle cx="22.776" cy="4.242" r="1"></circle><circle cx="25.191" cy="3.034" r="1"></circle></g></g></svg>
		</div>
    </div>
		<div class="wp-block-column cookie-content">
			<div class="ct-cookies-content">We use cookies to ensure that we give you the best experience on our website. For more info read our <a href="https://wpfy.org/privacy-policy/" target="_blank">Privacy Statement</a> &amp; <a href="https://wpfy.org/cookie-policy/" target="_blank">Cookies Policy</a>.</div></div>
			<button class="ct-accept" onclick="acceptCookie();">Accept</button><button class="ct-close" onclick="myFunction()" >×</button>
  </div>
</div>

Demo

Untuk demo/tampilannya kalian bisa lihat di codepen saya berikut ini.

Demo

Akhir Kata

Oke, mungkin itu saja tutorial singkat dari saya, jika kalian memiliki pertanyaan silahkan komen dibawah.