" Çerezleri kullanıyoruz." html kodu
Nedir?
Web sitenizde çerez kullandığınıza dair ziyaretçilerinizi bilgilendirmek ve onaylarını almak için kullanabileceğiniz bir HTML kodunu aşağıda bulabilirsiniz. Bu kod, basit bir bildirim çubuğu oluşturur ve kullanıcı "Kabul Et" butonuna tıkladığında bu çubuğu gizler.
Kod, üç bölümden oluşur: HTML, CSS ve JavaScript. En kolay kullanım için bu üçünü bir arada sunuyorum.
Kodun Açıklaması ve Kullanımı:
HTML ( ): Bu bölüm, çerez bildiriminin içeriğini oluşturur. İçerisinde bilgilendirme metni ve "Kabul Et" butonu bulunur. Metin içerisindeki etiketi ile "Gizlilik Politikası" sayfanıza bir bağlantı verebilirsiniz. Bu yasal bir gerekliliktir.
CSS (): Bu blok, çerez bildirim çubuğunun görünümünü (renkler, konum, boyutlar vb.) düzenler. Stilleri kendi web sitenizin tasarımına uyacak şekilde kolayca değiştirebilirsiniz. Çubuk, position: fixed; ve bottom: 0; kodları sayesinde sayfanın altında sabit bir şekilde durur.
JavaScript (): Bu kod parçacığı, çerez bildiriminin işlevselliğini sağlar:
Sayfa yüklendiğinde, kullanıcının daha önce çerezleri kabul edip etmediğini tarayıcının localStorage (yerel depolama) alanından kontrol eder.
Eğer kullanıcı daha önce kabul etmemişse, bildirim çubuğunu görünür hale getirir.
Kullanıcı "Kabul Et" butonuna tıkladığında, bildirim çubuğu gizlenir ve bu tercih localStorage'a kaydedilir. Böylece aynı kullanıcı siteyi tekrar ziyaret ettiğinde bildirimle karşılaşmaz.
Nasıl Kullanılır?
Yukarıdaki
etiketi içerisindeki `` ve altındakibloğunu ise sitenizin
etiketleri arasına veya harici CSS dosyanıza ekleyebilirsiniz.href="/gizlilik-politikasi" bölümünü kendi gizlilik politikası sayfanızın doğru URL'si ile güncellemeyi unutmayın. Eğer bir gizlilik politikanız yoksa, oluşturmanız KVKK ve GDPR gibi veri koruma yasaları uyarınca önemlidir.
ile İlgili Detaylar
- nedir?
- nasıl kullanılır?
- faydaları nelerdir?
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Web Siteniz</title> <style> /* Çerez Bildirim Çubuğu Stilleri */ .cookie-banner { position: fixed; bottom: 0; left: 0; width: 100%; background-color: #2c3e50; /* Koyu mavi-gri bir arka plan */ color: white; padding: 15px 20px; text-align: center; box-shadow: 0 -2px 5px rgba(0,0,0,0.2); z-index: 1000; display: none; /* Sayfa yüklendiğinde başlangıçta gizli */ } .cookie-banner p { margin: 0 0 10px 0; font-size: 14px; } .cookie-banner a { color: #3498db; /* Bağlantılar için açık mavi renk */ text-decoration: none; } .cookie-banner a:hover { text-decoration: underline; } .cookie-kabul-et { background-color: #27ae60; /* Yeşil renkli buton */ color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 14px; margin-top: 10px; } .cookie-kabul-et:hover { background-color: #229954; } </style> </head> <body> <h1>Web Siteme Hoş Geldiniz</h1> <p>Bu bir örnek sayfadır.</p> <div id="cookieBanner" class="cookie-banner"> <p> Web sitemizde size en iyi deneyimi sunabilmemiz için çerezleri kullanıyoruz. Daha fazla bilgi için <a href="/gizlilik-politikasi">Gizlilik Politikamızı</a> inceleyebilirsiniz. </p> <button id="cookieKabulEt" class="cookie-kabul-et">Kabul Et</button> </div> <script> document.addEventListener("DOMContentLoaded", function() { const cookieBanner = document.getElementById('cookieBanner'); const cookieKabulEt = document.getElementById('cookieKabulEt'); // Kullanıcının daha önce kabul edip etmediğini kontrol et if (!localStorage.getItem('cookieKabulEdildi')) { cookieBanner.style.display = 'block'; } // Kabul Et butonuna tıklandığında cookieKabulEt.addEventListener('click', function() { // Çubuğu gizle cookieBanner.style.display = 'none'; // Kullanıcının tercihini kaydet (tarayıcının yerel depolamasını kullanarak) localStorage.setItem('cookieKabulEdildi', 'true'); }); }); </script> </body> </html>
0 Comments:
Yorum Gönder