Tali peringatan Persetujuan Cookie dengan HTML-CSS-JS

Kita tahu ada banyak hukum bodoh yang tidak ada gunanya di luar sana. The European Hukum Cookie juga menjengkelkan karena Anda harus mulai dengan menutup popup setiap kali Anda mengunjungi sebuah website. Undang-undang ini adalah undang-undang privasi yang mengharuskan situs untuk mendapatkan persetujuan dari pengunjung untuk menyimpan atau mengambil informasi apa pun tentang mereka.

Ada dua jenis orang: 
1. Yang tahu apa itu cookie: Mereka sadar bahwa file data kecil ini diperlukan dan hampir setiap situs web menggunakannya untuk meningkatkan pengalaman pengguna, untuk mengumpulkan analitik, dll. 
2. Yang yang tidak tahu apa cookie itu: Mereka hanya menjadi takut dan bingung ketika mereka melihat peringatan muncul dan mereka tidak tahu apa artinya itu.

Saya yakin bahwa peringatan Cookie tidak mengatakan sesuatu yang baru bagi kelompok ini.

Faktanya adalah bahwa kita harus terus menambahkan pemberitahuan persetujuan cookie ke situs kami sampai mereka tidak mengubah kegilaan ini. Pemilik situs web harus memastikan bahwa itu mematuhi hukum.

Pada artikel ini saya menyajikan cara yang sederhana dan elegan dalam menyajikan notifikasi Persetujuan Cookie di tali di bagian bawah halaman. Untuk menerapkannya di situs web Anda, Anda perlu menambahkan HTML-CSS-JS di bawah ini :

Tambahkan kode HTML ke bagian bawah halaman Anda. Tali akan memiliki posisi tetap sehingga pada dasarnya Anda dapat meletakkannya di mana pun Anda inginkan dalam kode sumber. Sesuaikan teks dan setel tautan untuk menunjuk ke dokumen kebijakan privasi Anda.

< div  id = "cookieConsent" > 
    < div  id = "closeCookieConsent" > x </ div > 
    Situs web ini menggunakan cookie. < A  href = "#"  Target = "_blank" > Info </ a > . < A  class = "cookieConsentOK" > Itu Baik </ a > 
</ div >

CSS akan mengatur notifikasi agar terlihat seperti gambar di atas.

/ * Persetujuan Cookie Mulai * / 
#cookieConsent {
     background-color : rgba ( 20,20,20,0,8 );
    min-height : 26 px ;
    ukuran font : 14 px ;
    warna : #ccc ;
    garis-tinggi : 26 px ;
    padding : 8 px  0  8 px  30 px ;
    font-family : "Trebuchet MS" , Helvetica , sans-serif ;
    posisi : tetap ;
    bawah : 0 ;
    kiri : 0 ;
    kanan : 0 ;
    display : tidak ada ;
    z-index : 9999 ;
}
#cookieConsent  a {
     color : # 4B8EE7 ;
    teks-dekorasi : tidak ada ;
}
#closeCookieConsent {
     float : right ;
    display : inline-block ;
    kursor : pointer ;
    tinggi : 20 px ;
    lebar : 20 px ;
    margin : -15 px  0  0  0 ;
    font-weight : bold ;
}
#closeCookieConsent : hover {
     color : #FFF ;
}
#cookieConsent  a .cookieConsentOK {
     warna-latar belakang : # F1D600 ;
    warna : # 000 ;
    display : inline-block ;
    batas-radius : 5 px ;
    bantalan : 0  20 px ;
    kursor : pointer ;
    mengapung : benar ;
    margin : 0  60 px  0  10 px ;
}
#cookieConsent  a .cookieConsentOK : hover {
     background-color : # E0C91F ;
}
/ * Persetujuan Cookie Berakhir * /

Skrip yang menangani sakelar pop-up menggunakan jQuery dan disetel untuk menunda peringatan dengan 4 detik setelah pemuatan halaman.

$ ( dokumen ) .ready (function () {   
     setTimeout (function () {
         $ ( "#cookieConsent" ) .fadeIn ( 200 );
     }, 4000 );
    $ ( "#closeCookieConsent, .cookieConsentOK" ). klik (fungsi () {
         $ ( "#cookieConsent" ) .fadeOut ( 200 );
    }); 
});