Membuat Jquery Cookie Notifikasi

Hallo.

Selamat datang di situs GRAD Information, pada kesempatan kali ini saya akan memberikan cara membuat notifikasi cookie dengan jquery kawan.

Singkat materi, notifikasi cookie merupakan pemberitahuan kepada pengunjung tentang undang-undang yang berlaku di Uni Eropa.

Selain itu, cookies juga berguna untuk memudahkan pengunjung dan blogger dalam mengingat semua riwayat kegiatan yang pernah dilakukan.

Selain itu, notifikasi ini juga bisa membantu seseorang agar terhindar dari hal-hal yang tidak diinginkan.

Saran admin, lebih baik kalian memasang notifikasi ini mulai dari sekarang.

Untuk pemasangan, Anda bisa mengikuti langkah-langkah di bawah ini:

1. Masuk ke akun blogger kalian.

2. Pilih menu 'tema' dan klik tanda '▼' lalu pilih 'edit html' 

3. Pastikan sudah terdapat 'cdn jquery' dalam template kalian.  

4. Jika tidak ada, tempel saja kode berikut tepat diatas tag '</head>' 

<!-- ini adalah contoh library jquery --> <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'> </script> <!-- dan letakkan di atas tag </head> ya woke --> <!-- jika sudah ada jquery, skip aja kode ini -->

5. Oh iya, jangan lupa salin kode 'javascript' berikut:

<!-- cookie jquery --> <div id='cookieConsent'> <div id='closeCookieConsent'>x</div> Catatan, halaman web ini memakai cookies. <a href='https://gallisdanu2019.blogspot.com/p/terms-and-conditions.html' target='_blank'>Lihat info</a>. <a class='cookieConsentOK'>Baiklah</a> </div> <script async='async'> $(document).ready(function(){ setTimeout(function () { $('#cookieConsent').fadeIn(200); }, 100); $('#closeCookieConsent, .cookieConsentOK').click(function() { $('#cookieConsent').fadeOut(200); }); }); </script> <!-- tempel dibawah code jquery atau </body> -->

6. Lalu letakkan di atas tag '</body>' atau dibawah tag jquery tadi.

7. Ok, kita telah menyelesaikan java scriptnya. Dan sekarang mulai cssnya.

8. Kemudian agar efek transisinya bagus, kalian salin kode 'css' berikut:

/*ini kode cssnya ya*/ #cookieConsent{background-color:rgba(20,20,20,.8);min-height:26px;font-size:14px;color:#ccc;line-height:26px;padding:8px 0 8px 30px;font-family:"Trebuchet MS",Helvetica,sans-serif;position:fixed;bottom:0;left:0;right:0;display:none;z-index:2000000015}#cookieConsent a{color:#4b8ee7;text-decoration:none}#closeCookieConsent{float:right;display:inline-block;cursor:pointer;height:20px;width:20px;margin:-15px 0 0 0;font-weight:700}#closeCookieConsent:hover{color:#fff}#cookieConsent a.cookieConsentOK{background-color:#f1d600;color:#000;display:inline-block;border-radius:5px;padding:0 20px;cursor:pointer;float:right;margin:0 60px 0 10px}#cookieConsent a.cookieConsentOK:hover{background-color:#e0c91f}

9. Lalu letakkan kode css diatas tag '</style>' atau '</b:skin>'

10. Lalu tinggal preview template dan selesai.

Untuk 'demo' kalian bisa melihat tombol cookies di bawah. Tombolnya akan muncul saat kalian reload halaman.  

Apabila kalian masih bingung, kalian bisa memberikan komentar dibawah ini J.

Ok, itu adalah akhir cerita saya pada hari ini J. 

Dan sebelum kalian meninggalkan artikel ini, saya ingin kalian untuk 'follow' akun sosial media saya serta jangan lupa klik 'like', 'subscribe' dan 'share' kawan.

Sekian dari saya dan terima kasih.

---

Share :Wa FbTwLkTgTmPr Ln

Related Post: