Cara Memasang Cookies Consent di Blogger

Widget notifikasi cookies blogger terbaru responsive - cara mudah memasang notifikasi cookies di blogger
Notifikasi cookies di blog

Notifikasi cookies - ketika melakukan eksplorasi di internet, mungkin kalian sering menjumpai pop up notifikasi yang muncul berupa persyaratan tertentu? Biasanya, pemberitahuan tersebut terletak di bagian bawah website/blog.

Pasti banyak yang belum mengetahui hal ini, Notifikasi tersebut adalah cookies. Untuk penjelasannys  baca lebih lanjut kebawah. Sebelum lebih melanjutkan cara pemasangan cookie alangkah baiknya ketahui lebih dulu apa yang dimaksud itu cookies, fungsi dan manfaatnya bagi situs.

Apa Itu Cookie?

Cookies atau dalam bahasa indonesia disebut Kuki dapat merekam atau menyimpan informasi dan setelan jejak seluruh riwayat aktivitas user ketika mengakses sebuah halaman pada situs tertentu.

Bagaimana mana bisa menyimpan riwayat ? jadi begini penjelasan singkatnya, pasti kalian pernah mendaftar atau registrasi sebuah akun di suatu website dengan mengisikan data username dan password. Lalu setelah beberapa hari, kalian bisa masuk kembali ke halaman login situs terkait tanpa perlu memasukkan kembali ussername dan password atau bisa dibilang tidak perlu login ulang . Itu merupakan salah satu fungsinya yang bisa menyimpan aktivitas user tersimpan di device saat browsing.

Pada dasarnya, cookies diciptakan agar website dapat mengetahui aktivitas yang telah dilakukan user pada waktu sebelumnya. 

Tahukah kalian, pihak platform Blogger saja sudah merekomendasikan semua penggunanya untuk menggunakan fitur notifikasi cookie consent ini. hal ini tidak lain hanya untuk meningkatkan user experience / kenyamanan pengunjung situs.

Apa Fungsi Cookie?

Dikutip dari glints.com berikut fungsi yang ada pada cookie.
  1. Menyimpan informasi login

    Salah satu fungsi utama dari cookies pada website adalah untuk menyimpan informasi login milik user.

    Hal ini cukup penting, terutama untuk meningkatkan user experience di dalam website. Dengan cookies, user tidak perlu menulis berulang kali username dan password ketika mengunjungi website yang sama.

  2. Menyediakan konten dan referensi yang personal

    Cookies adalah teknologi dalam situs yang mampu menyediakan konten dan referensi kepada para user. Sebagai contoh, cookies akan mengingat jenis konten yang sering kamu konsumsi hingga pilihan fitur favoritmu.

    Seperti halnya menyimpan informasi login, hal ini juga diperlukan guna tingkatkan user experience dan loyalitas pelanggan dalam situs.

  3. Mengingat pengaturan situs

    Berikutnya, cookies adalah teknologi yang dapat mengingat pengaturan situs setelah dimodifikasi oleh para user. Misalnya, ia akan mengingat preferensi bahasa, mode warna, hingga resolusi yang dipilih oleh pengguna dalam situs.

    Jadi, nantinya, saat pengguna mengakses kembali website tersebut, ia secara otomatis akan menyediakan pengaturan yang sesuai dengan pilihan sebelumnya.

  4. Bagus untuk iklan

    Dikatakan sebagai salah satu fungsi untuk menampilkan iklan yang relevan bagi pengunjung, khusus situs yang sudah menampilkan iklan Google AdSense direkomendasikan memasang cookies.

Terlepas dari fungsi diatas apakah cookie aman digunakan? Ini banyak dipertanyakan untuk itu baca kebawah terkait penjelasannya.

Apakah Cookies Aman?

Fungsi utama cookie adalah menyimpan data histori pada browser ke ponsel maupun komputer saat kita menjelajahi suatu situs web, dan cookie tidak dapat membawa malware atau virus karena data yang dibawa oleh cookie hanya sebatas aktifitas rekam jejak histori user didalam situs.

Walaupun cookie tidak berbahaya, akan tetapi tetap saja kita harus waspada dengan ada fitur menyimpan data pribadi yang ada pada cookie bisa saja dapat disalahkan gunakan situs tertentu, sebab tidak ada kata aman dalam beraktivitas di dunia internet jadi harap berhati-hati sebelum mengakses suatu situs.


Cara Memasang Notifikasi Cookies di Blog

Untuk cara pemasangan cookie ini sangat mudah walaupun anda tidak mempunyai skill coding, cukup ikuti cara dibawah ini sesuai stepnya insyaallah tidak akan ada kendala, langsung saja terapkan tutorialnya.

Sebelum memulai, pastikan anda telah membackup template blog terlebih dahulu untuk berjaga-jaga jika terjadi sesuatu yang tidak di inginkan bisa direcovery.

  1. Langkah awal login ke dashboard akun blogger di blogger.com.

  2. Lalu pilih klik menu Tema

  3. Kemudian klik ikon panah ke bawah disamping menu Sesuaikan pilih Edit HTML

  4. Setelah itu temukan tag kode css seperti ini ]]></b:skin> atau </style> lalu masukan kode di bawah ini tepat di atas salah satu kode tersebut.

  5. /* 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)}

    Jika template anda memiliki fitur mode gelap / dark mode, anda dapat menyesuaikan nama class pada kode css .drK setiap template memiliki tag class mode gelap yang berbeda, jadi silahkan sesuaikan.

  6. Selanjutnya untuk menonaktifkan Notifikasi Cookie bawaan Blogger, temukan kode </head> atau &lt;!--</head>--&gt;&lt;/head&gt; untuk memudahkan pencarian tekan CTRL F lalu tambahkan kode JavaScript dibawah ini tepat diatas kode salah satu kode tersebut.

  7. <script>/*<![CDATA[*/ /* Disable default Blogger cookie notice */ cookieChoices = {}; /*]]>*/</script>
  8. Langkah keenam memasukan kode terakhir, salin kode HTML dan JS Cookie dibawah ini tempelkan tepat diatas kode </body> atau &lt;/body&gt;

  9. <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>
  10. Terakhir klik icon Simpan/Save sampai disini tahap pemasangan kode sudah selesai dan cek hasilnya.


Keterangan

Jika ingin mengubah beberapa bagian yang ada pada css diatas bisa disesuaikan dengan selera masing-masing mengikuti penjelasan dibawah ini.

  1. "background":"var(--linkC)"
  2. Untuk mengubah warna background tombol pada notifikasi cookies tinggal ganti kode ini var(--linkC) dengan warna hex color milik kalian, contoh seperti ini #000000 ganti sesuai keinginan.

  3. ".drK"
  4. Untuk mengganti name class dark mode tinggal ganti nama .drK yang ada pada css diatas, sesuaikan dengan nama class template masing-masing agar mode malam berfungsi sepenuhnya.

  5. "href='/p/cookies.html'>"
  6. Untuk mengubah link yang ada pada tombol More Details yang mengarah halaman kebijakan cookies tinggal ganti link /p/cookies.html sesuai keinginan kalian.

Result

Untuk hasilnya seperti yang ada diblog ini atau jika ingin lebih jelas melihatnya bisa dengan klik tombol dibawah!


Penutup

Itulah cara Cara Memasang Notifikasi Cookies di Blog bagaimana mudah bukan? Cukup sampai disini dulu, jika ada yang ingin ditanyakan bisa berkomentar dibawah atau menghubungi saya lewat halaman kontak dan email sekian terimakasih.

Referensiku: ferisp.com, https://www.fineshopdesign.com

Rate this article

Getting Info...
Hey there! My name is Wilson aka Dev, a professional Web Designer, Graphic Designer, UI / UX Designer as well as Content Creator. I love to Code and create interesting things while playing with it.

2 komentar

  1. Bagus ni bang mantap
  2. Bang apakah ini bisa untuk template median ui 1.5??
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details