Çerez uyarısı, kullanıcı deneyimini iyileştirmek ve yasal gereklilikleri yerine getirmek için web sitelerinde sıkça kullanılan bir özelliktir. İşte size bu uyarıyı oluşturmak için temel bir HTML, CSS ve JavaScript kodu örneği:
<!DOCTYPE html> <html> <head> <title>Çerez Uyarısı</title> <style> .cookie-banner { position: fixed; bottom: 0; left: 0; width: 100%; background-color: #333; color: #fff; padding: 20px; display: none; } .cookie-accept { background-color: #4CAF50; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; } </style> </head> <body> <div class="cookie-banner"> Bu web sitesi, size daha iyi bir deneyim sunmak için çerezleri kullanır. Çerezleri kabul ederek sitemizi kullanmaya devam edebilirsiniz. <a href="#" class="cookie-accept">Kabul Et</a> </div> <script> const cookieBanner = document.querySelector('.cookie-banner'); const cookieAccept = document.querySelector('.cookie-accept'); // Çerez uyarısını göster window.onload = function() { cookieBanner.style.display = 'block'; }; // Çerez kabul edildiğinde uyarıyı gizle ve çerezi kaydet cookieAccept.addEventListener('click', function() { cookieBanner.style.display = 'none'; // Çerezi kaydetmek için JavaScript veya bir kütüphane kullanabilirsiniz // Örneğin: document.cookie = "acceptedCookies=true; expires=365d"; }); // Eğer çerez daha önce kabul edildiyse uyarıyı gösterme if (document.cookie.indexOf("acceptedCookies=true") !== -1) { cookieBanner.style.display = 'none'; } </script> </body> </html>
Kodun Açıklaması:
- HTML: Çerez uyarısı için bir div oluşturur.
- CSS: Uyarının görünümünü ayarlar (pozisyon, renk, padding vb.).
- JavaScript:
- Uyarıyı yüklendiğinde gösterir.
- "Kabul Et" butonuna tıklandığında uyarıyı gizler ve bir çerez kaydeder.
- Eğer çerez daha önce kabul edildiyse uyarıyı göstermez.
Önemli Notlar:
- Çerez Kaydetme: Yukarıdaki örnekte çerezi basit bir şekilde kaydettik. Daha güvenli ve esnek bir çözüm için bir JavaScript kütüphanesi kullanabilirsiniz.
- Kişiselleştirme: Bu kod, temel bir örnektir. Uyarının içeriğini, tasarımını ve davranışını istediğiniz gibi özelleştirebilirsiniz.
- Yasal Uyum: Çerez kullanımına ilişkin yasal düzenlemelere uygun olduğunuzdan emin olun. Ülkenizin veya bölgenizin gizlilik yasalarını kontrol edin.
- Kullanıcı Deneyimi: Uyarının kullanıcı deneyimini olumsuz etkilemediğinden emin olun. Kullanıcılara çerezler hakkında net ve anlaşılır bilgiler verin.
0 Comments:
Yorum Gönder