Yandan Açılan Çerez Uyarısı için HTML Kodu

Hiç yorum yok

 Yandan açılan ç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>

Hiç yorum yok :

Yorum Gönder