Minggu, 30 Juli 2023

Saat kita berselancar di internet, seringkali kita menemukan PopUp Cookie yang biasanya muncul di bawah artikel atau situs yang meminta kita persetujuan atau menolaknya.

Cookie adalah file yang dibuat khusus oleh situs yang kita kunjungi. Dengan Cookie ini memudahkan pengunjung saat online dengan menyimpan informasi browsing.

PopUp cookie ini sangat berguna dengan alasan:

Membuat kita tetap login.
Mengingatkan preferensi situs yang kita kunjungi.
Memberikan konten yang relevan secara lokal.

Cara Memasang PopUp Cookie di Blogspot Blogger

Apa itu PopUp Persetujuan Cookie ?

PopUp izin cookie adalah baner atau spanduk yang muncul di situs web, memberi tahu pengunjung tentang penggunaan cookie dan meminta persetujuan mereka untuk menyimpan
atau mengakses informasi mereka.

Cookie adalah file teks kecil yang
ditempatkan di perangkat pengguna saat mereka mengunjungi situs web. Mereka digunakan untuk mengingat preferensi pengguna, melacak aktivitas situs web, dan memberikan pengalaman yang lebih personal.

Namun, cookie juga dapat
digunakan untuk iklan atau pelacakan
bertarget, oleh karena itu pengguna harus diberi tahu dan diberi pilihan untuk menerima atau menolaknya.

Jika Anda seorang blogger yang
menggunakan blogspot, penting untuk menambahkan spanduk persetujuan cookie ke situs apalagi jika target kita adalah target luar negeri.

Pemasangan cookie ini bertujuan untuk memastikan kepatuhan terhadap peraturan seperti Peraturan Perlindungan Data Umum
(GDPR) dan Undang-Undang Privasi
Konsumen California (CCPA).

Menambahkan PopUp izin cookie ke
situs Blogger kita adalah proses yang
relatif sederhana yang dapat diselesaikan dalam beberapa langkah saja. Di bagian berikut, kami akan menguraikan langkah-langkah
untuk menambahkan spanduk izin cookie di Blogger. Ikuti langkah-langkah di bawah ini.

Cara Menambahkan PopUp Cookie pada blog:

Buka dasbor Blogger Anda dan Buka bagian tema.
Sekarang klik pada bagian edit HTML dari menu Drop down di sebelah kanan tombol kustomisasi.
Cari tag Body penutup (</body) yang biasanya merupakan baris terakhir ke-2 dari kode tema template.
Salin dan paste kode yang diberikan di bawah ini tepat di atasnya dan simpan kode tersebut untuk menambahkan spanduk persetujuan cookie ke situs web Blogger kita.

<div class='cookie-box'>
    <div class='cookie-row'>
     <div class='cookie-img'><svg viewBox='0 0 97.93 97.93' xmlns='http://www.w3.org/2000/svg'><path d='M44,23.76a2.47,2.47,0,1,0,.91,3.37A2.47,2.47,0,0,0,44,23.76Z'></path><path d='M25.9,40.32a2.47,2.47,0,0,0,0,4.93h0a2.47,2.47,0,1,0,0-4.93Z'></path><circle cx='32.08' cy='65.86' r='2.47'></circle><path d='M56.38,69.91a2.47,2.47,0,1,0,1.14,1.49A2.47,2.47,0,0,0,56.38,69.91Z'></path><path d='M72,52.68a2.47,2.47,0,0,0-2.38,1.83,2.44,2.44,0,0,0,.25,1.87,2.47,2.47,0,0,0,4.52-.59,2.44,2.44,0,0,0-.25-1.87A2.47,2.47,0,0,0,72,52.68Z'></path><path d='M89.51,52.86A14,14,0,0,1,81,47.2,14.09,14.09,0,0,1,61,35.68,14.09,14.09,0,0,1,49.49,15.73a14,14,0,0,1-5.66-8.55,44,44,0,0,0-21.09,6.15A44.26,44.26,0,0,0,71.46,87.08,44.24,44.24,0,0,0,89.51,52.86ZM28.28,43.42a2.47,2.47,0,0,1-2.38,1.83h0a2.47,2.47,0,1,1,2.38-1.83Zm3.8,24.9a2.47,2.47,0,1,1,2.47-2.47A2.47,2.47,0,0,1,32.08,68.32ZM44.92,27.13A2.47,2.47,0,1,1,44,23.76,2.47,2.47,0,0,1,44.92,27.13ZM57.28,73.27a2.47,2.47,0,1,1-.9-3.36,2.47,2.47,0,0,1,.9,3.36ZM74.42,55.79a2.47,2.47,0,1,1-.25-1.87A2.45,2.45,0,0,1,74.42,55.79Z' fill='#7577a9'></path><path d='M97.93,48.52v-.2A2.35,2.35,0,0,0,95.7,46a9.37,9.37,0,0,1-8-5.45,2.35,2.35,0,0,0-3.49-.93,9.51,9.51,0,0,1-5.44,1.72A9.4,9.4,0,0,1,69.39,31.1a2.35,2.35,0,0,0-2.55-2.55c-.28,0-.57,0-.85,0a9.39,9.39,0,0,1-7.68-14.81,2.35,2.35,0,0,0-.93-3.49,9.37,9.37,0,0,1-5.45-8A2.35,2.35,0,0,0,49.61,0H49a49,49,0,1,0,49,49C97.93,48.82,97.93,48.67,97.93,48.52ZM71.46,87.08A44.26,44.26,0,0,1,22.74,13.33,44,44,0,0,1,47.53,4.72a14,14,0,0,0,5.66,8.55A14.09,14.09,0,0,0,64.71,33.22,14.09,14.09,0,0,0,84.66,44.75a14,14,0,0,0,8.56,5.66A44.3,44.3,0,0,1,71.46,87.08Z'></path></svg></div>
    <div class='cookie-content'>
      <p>Our website uses cookies to improve your experience. <a href='https://policies.google.com/technologies/cookies' target='_blank' title='Learn more'>Learn more</a></p>
<button class='cookie-buttons'>Accept!</button>
</div>
</div>
</div> <style>
.cookie-box.hide{display:none}
.cookie-box {
    position: fixed;
    width: 90%;
    margin: 20px;
    max-width: 400px;
    min-height: 100px;
    background-color: #ffffff;
    box-shadow: 25px 12px 25px 12px rgb(30 30 30 / 4%);
    z-index: 990;
    border: 2px solid lightgrey;
    border-radius: 6px;
    bottom: 15px;
    right: 0px;
    padding: 15px;
}
.cookie-row {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-align: left;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.cookie-img{padding-right:20px}
.cookie-img svg{fill:#333;width:60px;height: 60px;}
.cookie-content p {
    position: relative;
    width: 100%;
    display: inline-block;
    font-size: 15px;
    color: #666666;
    margin-top: 0!important;
}
.cookie-content p a{text-decoration:underline;}
.cookie-buttons {
    position: relative;
    width: 100%;
    margin-top: 10px;
    float: left;
    background-color: #7577a9;
    font-family: inherit;
    font-size: 14px;
    color: #ffffff;
    text-decoration: none;
    opacity: 1;
    border: none;
    cursor: pointer;
    font-weight: 500;
    padding: 5px;
    border-bottom: 2px solid rgba(0,0,0,0.1);
    border-radius: 6px;
}
</style>
<script>//<![CDATA[
    cookieChoices = {};
    const cookieBox = document.querySelector(".cookie-box"),
    acceptBtn = cookieBox.querySelector("button");
    acceptBtn.onclick = ()=>{
      document.cookie = "Koke; max-age="+60*60*24*30;
      if(document.cookie){
        cookieBox.classList.add("hide");
      }else{
        alert("Cookie can't be set! Please unblock this site from the cookie setting of your browser.");
      }
    }
    let checkCookie = document.cookie.indexOf("Koke");
    checkCookie != -1 ? cookieBox.classList.add("hide") : cookieBox.classList.remove("hide");
//]]></script>

Kode ini akan menghapus pemberitahuan cookie Blogger default dan menambahkan spanduk persetujuan cookie khusus atau PopUp cookie ke situs web blogger kita.

Kode ini sepenuhnya telah dioptimalkan dan menggunakan kode SVG sehingga kita tidak perlu khawatir dengan kecepatan situs di situs blogger.

Sebagai kesimpulan, menambahkan spanduk İzin cookie ke situs Blogger kita sangat penting untuk memastikan kepatuhan terhadap peraturan privasi data dan memberikan transparansi kepada pengunjung situs atau blog kita.

Demikian tutorial tentang Cara Memasang PopUp Cookie ini kami akhiri, semoga artikel ini dapat membantu pembaca menambahkan widget izin cookie khusus ke situs web bloggernya.