تك مصراوي - أخبار التكنولوجيا، الكمبيوتر والهواتف الذكية

كود شعار يستخدم موقعنا ملفات تعريف الارتباط لتحسين تجربتك

🧠 أولًا: ما هي ملفات تعريف الارتباط (الكوكيز)؟

ملفات تعريف الارتباط أو Cookies هي ملفات نصية صغيرة يتم حفظها على جهاز المستخدم (كمبيوتر أو هاتف) عند زيارة موقع إلكتروني.

يستخدمها الموقع لتذكّر معلومات عن المستخدم، مثل:

اللغة المفضلة.

عناصر تم وضعها في سلة التسوق.

حالة تسجيل الدخول.

الصفحات التي تمت زيارتها سابقًا.

🎯 ثانيًا: لماذا تُستخدم الكوكيز؟

تُستخدم الكوكيز لأسباب متعددة، أهمها:

تحسين تجربة المستخدم:

مثل تذكّر إعدادات اللغة أو الوضع الداكن/الفاتح عند زيارة الموقع مرة أخرى.

تحليل الأداء:

لمساعدة صاحب الموقع في فهم كيف يستخدم الزوار الموقع (عدد الزيارات، مدة البقاء، الصفحات الأكثر مشاهدة…).

الإعلانات المخصصة:

تُستخدم لتخصيص الإعلانات بناءً على اهتمامات المستخدم وسلوك تصفحه.

الأمان والتوثيق:

لتسهيل عمليات تسجيل الدخول وحماية حسابات المستخدمين.

⚖️ ثالثًا: ما أهمية إشعار الكوكيز في المواقع؟

تطلب القوانين الأوروبية (مثل GDPR) وقوانين الخصوصية العالمية من المواقع أن:

تُخبر المستخدم بوضوح أن الموقع يستخدم الكوكيز.

تشرح الغرض من استخدامها.

تحصل على موافقة المستخدم قبل تخزينها (في بعض الحالات).

رابعًا: شكل إشعار الكوكيز في الموقع

عادةً يظهر الإشعار في أسفل الصفحة أو أعلاها، ويتضمن:

عنوان: مثل

إشعار مهم بشأن استخدام موقعنا لملفات تعريف الارتباط لتحسين تجربتك

نص توضيحي: يشرح الغرض من استخدام الكوكيز.

أزرار: مثل "موافق" أو "رفض" أو "المزيد من المعلومات".

💡 مثال عملي على النص:

العنوان: إشعار مهم بشأن استخدام موقعنا لملفات تعريف الارتباط لتحسين تجربتك وتقديم محتوى مخصص

النص: نود إعلامك بأن موقعنا يستخدم ملفات تعريف الارتباط لتحسين تجربة التصفح الخاصة بك، وتحليل أداء الموقع، وتخصيص المحتوى والإعلانات بما يتناسب مع اهتماماتك. من خلال الاستمرار في استخدام موقعنا، فإنك توافق على استخدامنا لملفات تعريف الارتباط وفقًا لسياسة الخصوصية الخاصة بنا.

خليني أشرح لك الطريقة خطوة بخطوة لتركيب كود إشعار الكوكيز في موقعك على بلوجر (Blogger) بطريقة صحيحة وسهلة

من القائمة الجانبية اختر المظهر (Theme).

اضغط على سهم ▼ بجانب “تخصيص” ثم اختر تحرير HTML (Edit HTML).

ابحث عن الوسم </body>

يمكنك الضغط على Ctrl + F وكتابة </body>.

ضع الكود فوق هذا الوسم مباشرة.👇

<div id='cookie-overlay' style='position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.2); z-index:9998; opacity:0; transition: opacity 0.5s ease; pointer-events:none;'/>

<div id='cookie-consent-box' style='position:fixed; bottom:-100px; right:20px; width:300px; background:#333; color:#fff; padding:15px; text-align:center; z-index:9999; font-family:Arial, sans-serif; border-radius:10px; box-shadow:0 4px 12px rgba(0,0,0,0.3); opacity:0; transform:scale(1); transition: all 0.5s ease;'>
  <div>
    يستخدم موقعنا ملفات تعريف الارتباط لتحسين تجربتك.
    <a href='https://www.blogger.com/go/cookiechoices' style='color:#ffd700; text-decoration:underline;' target='_blank'> تعرف على المزيد</a>
  </div>
  <button id='accept-cookies' style='margin-top:10px; padding:7px 15px; background:#ffd700; color:#333; border:none; border-radius:5px; cursor:pointer; transition: transform 0.2s ease;'>حسنا !</button>
</div>

function showCookieBanner() {
    overlay.style.opacity = '1';
    overlay.style.pointerEvents = 'auto';
    banner.style.bottom = '20px';
    banner.style.opacity = '1';

// تأثير التذبذب الخفيف عند الظهور
    let start = Date.now();
    let duration = 1000; // 1 ثانية
    let amplitude = 10; // مقدار التذبذب
    let interval = setInterval(function() {
      let elapsed = Date.now() - start;
      if (elapsed >= duration) {
        clearInterval(interval);
        banner.style.bottom = '20px';
        return;
      }
      banner.style.bottom = 20 + Math.sin((elapsed / duration) * Math.PI * 4) * amplitude + 'px';
    }, 16);
  }

function hideCookieBanner() {
    overlay.style.opacity = '0';
    overlay.style.pointerEvents = 'none';
    banner.style.transform = 'scale(0.8)';
    banner.style.opacity = '0';
    banner.style.bottom = '-100px';
    setTimeout(function() { banner.style.display = 'none'; }, 500);
  }

btn.onclick = function() {
    hideCookieBanner();
    localStorage.setItem('cookiesAccepted', 'true');
  };

// تأثير تكبير عند التحويم وتصغير عند النقر
  btn.onmouseover = function() { btn.style.transform = 'scale(1.1)'; };
  btn.onmouseout = function() { btn.style.transform = 'scale(1)'; };
  btn.onmousedown = function() { btn.style.transform = 'scale(0.95)'; };
  btn.onmouseup = function() { btn.style.transform = 'scale(1.1)'; };
</script>

اضغط حفظ (Save).