Cara Memasang Cookies Consent di Blogger

Arsipbiru.com - Ketika menjelajahi situs di internet, tentunya Anda tidak asing lagi dengan pop up notifikasi berupa persyaratan tertentu. Umumnya notifikasi tersebut terletak di bagian bawah situs tersebut. Notifikasi tersebut dikenal dengan sebutan cookies.

Cookies atau biasa dikenal dengan kuki adalah suatu mekanisme yang dapat merekam atau menyimpan informasi dan setelan jejak seluruh riwayat aktivitas user ketika mengakses sebuah halaman pada situs tertentu. Selain meningkatkan kenyamanan pengguna, cookies memiliki fungsi lain, yaitu menyimpan informasi login, menyediakan konten dan referensi yang personal, mengingat pengaturan situs, serta bagus untuk iklan.

Terlepas dari semua itu, cookies dapat dikatakan aman, bisa juga tidak aman. Dapat dikatakan aman, karena cookies hanya menyimpan data aktivitas rekam jejak user di dalam suatu situs. Meskipun begitu, kita tetap harus waspada terhadap fitur yang menyimpan data pribadi pada cookie. Bisa saja data yang tersimpan dalam cookie tersebut disalahgunakan oleh situs tertentu.

Pada kesempatan kali ini, saya akan membagikan bagaimana cara memasang Cookies Consent di Blogger. Cookies Consent ini dapat berfungsi untuk meningkatkan kenyamanan pengunjung. Jadi, jika Anda tertarik ingin memasang Cookies Consent di blog, silahkan ikuti langkah-langkah berikut ini.

---

Cara Memasang Cookies Consent di Blogger

Sebelum memasang Cookies Consent di Blogger, alangkah baiknya Anda cadangkan dahulu template Anda. Jika sewaktu-waktu ada kesalahan, Anda dapat memulihkan template Anda ke pengaturan terakhir. Jika sudah, silahkan ikuti langkah-langkah berikut ini dengan seksama.

1. Pertama, masuk ke akun Blogger masing-masing.

2. Selanjutnya, pilih menu Tema > klik ikon panah ke bawah di samping menu Sesuaikan > klik Edit HTML.

3. Tambahkan kode CSS berikut ini di atas atau sebelum kode ]]></b:skin> atau </style>.

/* Notifikasi Cookie by Guntur */ .cookies{position:fixed;top:auto;left:40px;right:auto;margin-bottom:-6px;bottom:-600px;z-index:10;display:none;padding:20px;background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:15px;box-shadow:0 0 40px rgba(0,0,0,.1);animation:ckUpD 2.5s forwards;-webkit-animation:ckUpD 2.5s forwards;animation-delay:1s;-webkit-animation-delay:1s;max-width:400px} .cookies.v{display:block} .cookies.a{animation:ckDnD 2.5s backwards;-webkit-animation:ckDnD 2.5s backwards;animation-delay:.3s;-webkit-animation-delay:.3s} .ckH{margin-bottom:10px;font-size:1.1rem;font-weight:700;font-family:var(--fontBa)} .ckH::after{content:'';display:inline-block;vertical-align:middle;width:var(--widgetTa);margin:0 10px;border-bottom:1px solid var(--widgetTac);opacity:.5} .ckD{font-size:14px;line-height:1.4rem;font-family:var(--fontBa)} .ckF{margin-top:15px;display:flex;justify-content:center} .ckF >*{flex-grow:1;justify-content:center} .ckF >*:first-child{margin-right:10px;background:var(--linkB);color:#fffdfc} .ckF >*:last-child{flex:0 0 auto} .ckB{display:inline-flex;align-items:center;cursor:pointer;padding:10px 15px;outline:0;border:0;border-radius:3px;line-height:20px;color:rgba(0,0,0,.8);background:#e9e9e9;font-size:14px;font-family:var(--fontB);white-space:nowrap;overflow:hidden} .ckB:hover{opacity:.8} .Rtl .cookies{left:auto;right:40px} .Rtl .ckF >*:first-child{margin-right:0} .Rtl .ckF >*:last-child{margin-right:10px} @media screen and (max-width:768px){.cookies{left:20px;right:20px;animation:ckUpM 2.5s forwards;-webkit-animation:ckUpM 2.5s forwards} .cookies.a{animation:ckDnM 2.5s backwards;animation-delay:.3s;-webkit-animation:ckDnM 2.5s backwards;-webkit-animation-delay:.3s} .Rtl .cookies{left:20px;right:20px}} @keyframes ckUpD{100%{bottom:40px}} @keyframes ckUpM {100%{bottom:20px}} @keyframes ckDnD{0%{bottom:40px}100%{bottom:-600px}} @keyframes ckDnM{0%{bottom:20px}100%{bottom:-600px}} @-webkit-keyframes ckUpD{100%{bottom:40px}} @-webkit-keyframes ckUpM {100%{bottom:20px}} @-webkit-keyframes ckDnD{0%{bottom:40px}100%{bottom:-600px}} @-webkit-keyframes ckDnM{0%{bottom:20px}100%{bottom:-600px}} .drK .cookies{background:rgba(55,55,55,.8)} .drK .ckF >*:first-child{background:var(--darkU)} .drK .ckF >*:last-child{background:var(--darkBa);color:rgba(255,255,255,.8)}

4. Selanjutnya, tambahkan kode berikut ini untuk menonaktifkan Cookies Consent bawaan Blogger di atas tag </head> atau &lt;!--</head>--&gt;&lt;/head&gt;

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

5. Kemudian, tambahkan kode HTML dan JavaScript berikut ini di atas tag </body> atau &lt;/body&gt;

<div class='cookies' id='guntur'>

   <div class='ckA'>

      <div class='ckH'>Cookie Consent</div>

      <div class='ckD'>We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.</div>

   </div>

   <div class='ckF'>

      <button class='ckB' id='ckAccept'>Accept</button>

      <a class='ckB' href='/p/cookies.html'>More Details</a>

   </div>

</div>

<div id='ckError'/>

<script>/*<![CDATA[*/ /* JS Cookie by Guntur */ eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('N d=["\\l\\c\\k\\m","\\D\\E\\t\\n\\h\\t\\i","\\X\\t\\b\\i\\u\\Y\\b\\l\\b\\f\\h\\c\\i","\\D\\f\\o\\F\\f\\f\\b\\r\\h","\\D\\f\\o\\G\\i\\i\\c\\i","\\z\\g\\n\\r\\t\\h\\e\\f\\l\\k\\j\\j\\q\\p\\n\\O\\j\\e\\s\\g\\m\\m\\b\\n\\p\\e\\g\\m\\q\\p\\w\\c\\i\\v\\o\\G\\i\\i\\p\\e\\h\\u\\r\\b\\q\\p\\f\\s\\b\\f\\o\\x\\c\\H\\p\\I\\A\\z\\m\\g\\B\\e\\f\\l\\k\\j\\j\\q\\p\\n\\c\\O\\j\\p\\e\\m\\k\\h\\k\\P\\h\\b\\H\\h\\q\\p\\v\\c\\c\\o\\g\\b\\e\\f\\k\\n\\Z\\D\\1a\\1b\\1c\\J\\h\\e\\x\\b\\e\\j\\b\\h\\1d\\e\\C\\l\\b\\k\\j\\b\\e\\t\\n\\x\\l\\c\\f\\o\\e\\h\\s\\g\\j\\e\\j\\g\\h\\b\\e\\w\\i\\c\\K\\e\\h\\s\\b\\e\\f\\c\\c\\o\\g\\b\\e\\j\\b\\h\\h\\g\\n\\E\\e\\c\\w\\e\\u\\c\\t\\i\\e\\x\\i\\c\\1e\\j\\b\\i\\1f\\p\\A\\z\\l\\k\\x\\b\\l\\e\\w\\c\\i\\q\\p\\w\\c\\i\\v\\o\\G\\i\\i\\p\\A\\z\\I\\l\\k\\x\\b\\l\\A\\z\\I\\m\\g\\B\\A","\\B","\\k\\m\\m","\\f\\l\\k\\j\\j\\L\\g\\j\\h","\\c\\n\\f\\l\\g\\f\\o","\\f\\c\\c\\o\\g\\b","\\v\\c\\c\\o\\g\\b\\C\\c\\l\\g\\f\\u\\q\\F\\f\\f\\b\\r\\h\\b\\m\\J\\K\\k\\H\\P\\k\\E\\b\\q","\\J\\r\\k\\h\\s\\q\\I","\\Q\\s\\b\\e\\t\\j\\b\\i\\e\\s\\k\\j\\e\\k\\f\\f\\b\\r\\h\\b\\m\\e\\h\\s\\b\\e\\v\\c\\c\\o\\g\\b\\e\\C\\c\\l\\g\\f\\u","\\l\\c\\E","\\k","\\g\\n\\n\\b\\i\\1g\\Q\\1h\\L","\\v\\c\\c\\o\\g\\b\\C\\c\\l\\g\\f\\u\\q\\F\\f\\f\\b\\r\\h\\b\\m","\\g\\n\\m\\b\\H\\1i\\w","\\v\\c\\c\\o\\g\\b\\e\\C\\c\\l\\g\\f\\u\\e\\g\\j\\e\\F\\f\\f\\b\\r\\h\\b\\m","\\i\\b\\K\\c\\B\\b","\\k\\m\\m\\G\\B\\b\\n\\h\\L\\g\\j\\h\\b\\n\\b\\i"];1j[d[1k]](d[0],1l(){N a=y[d[2]](d[1]),R=y[d[2]](d[3]),S=y[d[2]](d[4]),T=d[5];M(a!=1m){a[d[8]][d[7]](d[6]);R[d[9]]=()=>{y[d[10]]=d[11]+U*U*1n*1o+d[12];M(y[d[10]]){V[d[14]](d[13]);a[d[8]][d[7]](d[15])}1p{S[d[16]]=T}};1q W=y[d[10]][d[18]](d[17]);M(W!=-1){V[d[14]](d[19]);a[d[8]][d[1r]](d[6])}}})',62,90,'|||||||||||x65|x6F|_0xcd64|x20|x63|x69|x74|x72|x73|x61|x6C|x64|x6E|x6B|x27|x3D|x70|x68|x75|x79|x43|x66|x62|document|x3C|x3E|x76|x50|x23|x67|x41|x45|x78|x2F|x3B|x6D|x4C|if|var|x4A|x2D|x54|_0x3662x2|_0x3662x3|_0x3662x4|60|console|_0x3662x5|x71|x53|x26|||||||||||x30|x33|x39|x21|x77|x2E|x48|x4D|x4F|window|21|function|null|24|30|else|let|20'.split('|'),0,{})) /*]]>*/</script>

6. Terakhir, simpan Tema dan lihat hasilnya.

Silahkan sesuaikan background dengan keinginan Anda dengan mengubah value pada property background:var(--linkC)
Sesuaikan juga fitur dark mode dengan class yang Anda gunakan dengan mengganti class .drK
Ganti juga link /p/cookies.html dengan link yang mengarah ke halaman kebijakan cookies Anda.