Merhaba, çok uzun zamandır blog gönderisi paylaşmadığımı farkettim. Malum karantina süreci devam ediyor 🙂 Bu süre zarfında sizler için yazmayı düşündüğüm makalelerin de bir listesini çıkardım. Bunları yavaş yavaş paylaşmayı düşünüyorum. Bu makalemizde sizlerle Cookie Altyapısı ile Çalışan Pop-Up nasıl oluşturabiliriz? Bu sorunun cevabını öğreneceğiz.
Geçtiğimiz günlerde bununla alakalı bir ihtiyacım oldu. Ve araştırma yaparken çok güzel bir JS kütüphanesinin bunu bizim yerimize yaptığını gördüm. Test ettim ve kullandım. Sonuç: Başarılı.
AgreeToContent.js kütüphanesi, kullanıcının sözleşmesini kabul ettikten sonra kullanıcının web içeriğinize erişmesini sağlayan, çerez altyapısını kullanan Pop-up’ı oluşturmanıza olanak tanır.
- Nasıl kullanılır?
Sayfaya “agreeToContent.js” JavaScript dosyasını ekleyin.
|
1 |
<script src="agreeToContent.js"></script> |
Script dosyalarını buradan indirebilirsiniz.
- Varsayılan Ayarlar
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
agreementMessage = [ '<img src="http://static1.squarespace.com/static/566913cb0e4c11de025472ae/t/57be9d0515d5db8e88288c2b/1515813659457/?format=1500w" ', ' style="width:90%;max-width:160px"/><br /> <br />', '<span style="font-family: proxima-novai, \'Arial\', sans-serif;font-weight: 700; letter-spacing: 4.02px;line-height: 2.47em;"> ', 'EPISTLE & EPIPHANY </span><br />', '<p style="font-family: \'raleway\', \'Arial\', sans-serif; font-size: 18px;font-weight: 400;font-style: normal;letter-spacing: 0px;line-height: .9em;">', 'An intimate collection <br /> ', 'of birth poems,<br />', 'love letters & photographs', '</p><br />', '<img src="https://static1.squarespace.com/static/566913cb0e4c11de025472ae/t/5808fa4e1b631b83fe97fc20/1476983790330/Shell+Luttrell+Midwife+Cover?format=1000w"', 'style="width:90%; max-width:400px"/>', '<br /><br />', '<strong style="color:red;font-size:1.2em;">WARNING!</strong>', '<br /><br />', 'This site contains uncensored photos of human child birth.', '<br /><br />', 'Would you like to continue?<br /><br />', '<span style="color:grey;font-size:0.8em;">By clicking yes, you also agree to this site\'s use of cookies.</span>' ] |
- Hayır butonu ayarları
|
1 2 3 4 |
function continueNo() { document.cookie = 'agreed=;expires=Thu, 01 Jan 1970 00:00:01 GMT;' window.location = 'https://promujer.org/' } |
Pop-up içeriğini değiştirmek isterseniz agreeToContent.js dosyasını isteğinize göre düzenleyebilirsiniz.
- Örnek kullanım
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<head> <script src="./agreeToContent.js"></script> <script> function clearCookie() { document.cookie = 'agreed=;expires=Thu, 01 Jan 1970 00:00:01 GMT;' } </script> <style> body { font-family:'Arial', sans-serif; text-align:center; } button { padding: 10px;border-radius: 4px;margin: 10px;box-shadow: 2px 2px; } </style> </head> <body> <h1>The graphic content of Shell Luttrell</h1> <p> <img src="https://static1.squarespace.com/static/57a259f329687fa31c3a5717/5850d02ad2b857bc8c31b24c/59b44520a9db0927a1fff948/1505197441120/open.jpeg" style="width:65%;max-width:450px;"/> </p> <button onclick="clearCookie()"> Clear Cookie </button> </body> |
