siwane

إضافة ويدجت موافقة ملفات تعريف الارتباط المتجاوب إلى بلوجر (cookies widget)

وفقًا لقوانين الاتحاد الأوروبي، إذا كان لدى مدونتك زوار من الاتحاد الأوروبي، فقد تحتاج إلى تقديم معلومات عن ملفات تعريف الارتباط والحصول على موافقة.
Split Post - Split Article Into Several Pages
إضافة ويدجت موافقة ملفات تعريف الارتباط المتجاوب إلى بلوجر (cookies widget)

السلام عليكم ورحمة الله وبركات

مرحبًا! مرحبًا بكم في مدونة صِوان محور XYZ.

كما نعلم، تتطلب قوانين الاتحاد الأوروبي (EU) تقديم معلومات للزوار الأوروبيين حول ملفات تعريف الارتباط المستخدمة في مدونتك. في العديد من الحالات، تتطلب هذه القوانين أيضًا الحصول على موافقة.

ما هي ملفات تعريف الارتباط؟

ملفات تعريف الارتباط هي ملفات يتم إنشاؤها بواسطة المواقع التي تزورها. تجعل تجربتك عبر الإنترنت أسهل من خلال حفظ معلومات التصفح. بفضل ملفات تعريف الارتباط، يمكن للمواقع الاحتفاظ بتسجيل دخولك، وتذكر تفضيلاتك في الموقع، وتقديم محتوى محلي ذي صلة.

هناك نوعان من ملفات تعريف الارتباط:

  1. ملفات تعريف الارتباط الطرف الأول يتم إنشاؤها بواسطة الموقع الذي تزوره. يظهر الموقع في شريط العنوان.
  2. ملفات تعريف الارتباط الطرف الثالث يتم إنشاؤها بواسطة مواقع أخرى. تمتلك هذه المواقع بعض المحتوى، مثل الإعلانات أو الصور، التي تراها على صفحة الويب التي تزورها.

أهمية الامتثال للقوانين

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

كيفية تخصيص النص في إشعار ملفات تعريف الارتباط

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

const acceptText = "أوافق على الكل!";

const learnMoreText = "تعرف على المزيد";

اصبح من المهم اظافة قطعة الموافقة على ملفات تعريف الارتباط نظرا للتصف الكبير من عدة دول و مع ان سياسة كل منطقة تختلف عن الاخرى صار من الضروري اضافة استعلام واضح سواء منبثك كقطعتنا هذه او تابث ينبه المستخدم انه يتم جمع بعض البيانات و اخذ قبوله الموافقة على جمع هذه البيانات و الاطلاع عليها. جمال الحزازي

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

إشعار ملفات تعريف الارتباط يمكن أن يكون مزعجًا إذا لم يتم تصميمه بشكل جيد. لضمان تجربة مستخدم سلسة، تأكد من أن الإشعار صغير وغير مزعج، واستخدم ألوانًا متناسقة مع تصميم مدونتك. يمكنك أيضًا إضافة خيار تخصيص ملفات تعريف الارتباط للسماح للزوار باختيار نوعية الملفات التي يرغبون في تفعيلها.

كيفية إضافة إشعار موافقة ملفات تعريف الارتباط؟

افتراضيًا، يقوم بلوجر بإشعار حول ملفات تعريف الارتباط يظهر في الجزء العلوي من موقع بلوجر، ولكن إذا كنت ترغب في ويدجت احترافي ومتجاوب لموافقة ملفات تعريف الارتباط من خلاله يمكنك الحصول على موافقة من زوارك، فعليك فقط اتباع الخطوات أدناه للحصول على ويدجت موافقة ملفات تعريف الارتباط أنيق ومتجاوب.

إضافة ويدجت موافقة ملفات تعريف الارتباط إلى موقع بلوجر الخاص بك لن يتطلب الكثير من المعرفة بـ HTML أو CSS أو JavaScript لأنني قد صممته لك بالفعل. ما عليك فعله هو تنفيذ الأكواد في المكان المناسب في XML الخاص بموضوع بلوجر الخاص بك.

مهم! قبل أن نبدأ في إضافة الأكواد في XML، أوصيك بأخذ نسخة احتياطية من القالب الحالي الخاص بك. في حالة حدوث أي مشكلة، يمكنك استعادتها لاحقًا.

الخطوة 1: أولاً، قم بتسجيل الدخول إلى لوحة تحكم بلوجر.

الخطوة 2: في لوحة تحكم بلوجر، انقر فوق السمة.

الخطوة 3: انقر على أيقونة السهم لأسفل بجانب زر 'تخصيص'.

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

الخطوة 5: الآن ابحث عن الكود ]]></b:skin> والصق الأكواد CSS التالية فوقه مباشرة.

(قبل كل شئ احتاج الى تذكريك على اخذ نسخة احتياطية لقالب مدونتك) و ايضا اضف تعليقات توضيحية لكل شيفرة تقوم باضافتها التعليق المناسب لاكواد CSS /*... addons ...*/ و تعليقات التوضيحية المناسبة لاكواد HTML <!--[addons]-->

إذا كان قالبك يحتوي على ميزة الوضع الليلي، وترغب في لون مختلف عند تفعيل الوضع الليلي، يمكنك تخصيص الأكواد حسب حاجتك. يمكن أن يكون لكل قالب فئة مختلفة للوضع الليلي، لذا يرجى تعديلها، يمكنك استبدال الفئة المعلمة بفئة الوضع الليلي الخاصة بقالبك.

يمكنك استبدال اسم المعلمة المستخدمو لتفعيل الوضع الداكن حسب القالب الذي تستخدمه. على سبيل المثال، يستخدم قالب "سيو بلاس" المعلمة dark-mode، بينما يستخدم قالب "سكويز" المعلمة dm.

/* Cookies Consent Notice */
.ckWrap{position:fixed;right:0;left:0;bottom:-600px;z-index:50;width:100%;padding:20px;background:rgba(255, 255, 255, 0.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:30px 30px 0 0;box-shadow:0 -10px 25px -5px rgba(0,0,0,.1);align-items:center;justify-content:center;text-align:center;animation:ckUp 2.5s forwards;animation-delay:1s;-webkit-animation:ckUp 2.5s forwards;-webkit-animation-delay:1s}
.ckWrap.acptd{animation:ckDn 2.5s backwards;animation-delay:.3s;-webkit-animation:ckDn 2.5s backwards;-webkit-animation-delay:.3s}
.ckWrap.hidden{display:none}
.ckWrap .ckCont svg{width:50px;height:50px;fill:#08102b;stroke:#08102b;stroke-width:.8}
.ckCont h2{margin:0;color:#08102b;font-size:1.5rem;font-weight:800;font-family:inherit}
.ckCont p{margin:10px 0;line-height:1.7em;color:#08102b;font-size:0.9rem;font-weight:400;font-family:inherit}
.ckWrap .btn{display:inline-flex;align-items:center;margin:0;padding:10px 15px;outline:0;border:0;border-radius:2px;line-height:20px;color:#fefefe;background-color:#299e94;font-size:13px;font-family:inherit;text-decoration:none;white-space:nowrap;overflow:hidden;max-width:100%;cursor:pointer;transition:all 0.3s ease}
.ckWrap .btn:hover{opacity:.8;transform:scale(0.97)}
.ckWrap .btn.outl{color:#08102b;margin-left:8px;background-color:transparent;border:1px solid #767676}
.ckWrap .btn.outl:hover{border-color:#299e94}
@media screen and (min-width:768px){.ckWrap{max-width:450px;border-radius:10px;left:auto;right:30px;bottom:-500px;box-shadow:0 5px 35px rgba(0,0,0,.1);animation:ckdeskUp 2.5s forwards;animation-delay:1s;-webkit-animation:ckdeskUp 2.5s forwards;-webkit-animation-delay:1s}.ckWrap.acptd{animation:ckdeskDn 2.5s backwards;animation-delay:.3s;-webkit-animation:ckdeskDn 2.5s backwards;-webkit-animation-delay:0.3s}}
@-webkit-keyframes ckUp{100%{bottom:0}}
@keyframes ckUp{100%{bottom:0}}
@-webkit-keyframes ckdeskUp{100%{bottom:30px}}
@keyframes ckdeskUp{100%{bottom:30px}}
@-webkit-keyframes ckDn{0%{bottom:0}100%{bottom:-600px}}
@keyframes ckDn{0%{bottom:0}100%{bottom:-600px}}
@-webkit-keyframes ckdeskDn{0%{bottom:30px}100%{bottom:-600px}}
@keyframes ckdeskDn{0%{bottom:30px}100%{bottom:-600px}}
.darkMode .ckWrap{background:rgba(50, 50, 50, 0.8)}
.darkMode .ckWrap .ckCont svg{fill:#fefefe;stroke:#fefefe}
.darkMode .ckCont h2, .darkMode .ckCont p, .darkMode .btn.outl{color:#fefefe}

شرح اهم عناصر الشيفرة CSS

هذا الكود CSS يستخدم لإنشاء إشعار موافقة على ملفات تعريف الارتباط (Cookies Consent Notice). سأشرح أهم العناصر في الكود:

  • .ckWrap:position: fixed: يجعل العنصر ثابتًا في أسفل الصفحة.
  • bottom: -600px: يحدد موقع العنصر أسفل الصفحة خارج الرؤية.
  • z-index: 50: يجعله في مقدمة العناصر الأخرى.
  • width: 100%: يجعله بعرض الصفحة بالكامل.
  • padding: 20px: يضيف حشوة داخل العنصر.
  • background: rgba(255, 255, 255, 0.8): لون خلفية شبه شفاف.
  • backdrop-filter: blur(10px): يضيف تأثير التمويه لخلفية العنصر.
  • border-radius: 30px 30px 0 0: يضيف حواف دائرية في الجزء العلوي.
  • box-shadow: 0 -10px 25px -5px rgba(0,0,0,.1): يضيف ظلًا للعنصر.
  • animation: ckUp 2.5s forwards; animation-delay: 1s: يحدد حركة ظهور العنصر من الأسفل للأعلى.
  • .ckWrap.acptd:animation: ckDn 2.5s backwards; animation-delay: .3s: يحدد حركة اختفاء العنصر من الأعلى للأسفل.
  • .ckWrap.hidden:display: none: يخفي العنصر.
  • .ckWrap .ckCont svg:width: 50px; height: 50px: يحدد حجم أيقونات SVG.
  • fill, stroke: يحدد لون الأيقونات.
  • .ckCont h2:color: #08102b: يحدد لون النص.
  • font-size: 1.5rem; font-weight: 800: يحدد حجم ووزن النص.
  • .ckCont p:color: #08102b; font-size: 0.9rem: يحدد لون وحجم النص.
  • .ckWrap .btn:display: inline-flex: يجعل الأزرار مرنة داخل الخط.
  • padding: 10px 15px: يحدد حشوة الأزرار.
  • background-color: #299e94; color: #fefefe: يحدد لون الخلفية والنص للأزرار.
  • transition: all 0.3s ease: يضيف تأثير انتقال للأزرار عند التفاعل.
  • .ckWrap .btn:hover:opacity: .8; transform: scale(0.97): يضيف تأثير عند تمرير الفأرة فوق الأزرار.
  • .ckWrap .btn.outl:background-color: transparent; border: 1px solid #767676: يحدد نمط الأزرار ذات الحدود الشفافة.
  • hover: border-color: #299e94: يغير لون الحدود عند التمرير.

الإعلامات:

  • @media screen and (min-width:768px): تنطبق الأنماط التالية على الشاشات الكبيرة.
  • @-webkit-keyframes ckUp / ckdeskUp: يحدد حركة ظهور العنصر للأعلى.
  • @-webkit-keyframes ckDn / ckdeskDn: يحدد حركة اختفاء العنصر للأسفل.
  • .darkMode .ckWrap:background: rgba(50, 50, 50, 0.8): يغير لون الخلفية في الوضع الداكن.
  • .darkMode .ckWrap .ckCont svg: يغير لون الأيقونات في الوضع الداكن.
  • .darkMode .ckCont h2, .darkMode .ckCont p, .darkMode .btn.outl: يغير لون النص والأزرار في الوضع الداكن.

هذه هي أبرز العناصر الموجودة في الكود والتي تتحكم في تصميم إشعار ملفات تعريف الارتباط وأسلوبه سواء في الوضع العادي أو الوضع الداكن.

الخطوة 6: يجب علينا تعطيل إشعار ملفات تعريف الارتباط الافتراضي من بلوجر، لذا أضف أكواد JavaScript التالية فوق </head> مباشرة.

<script>/*<![CDATA[*/ /* Cookies Consent Notice Script by Fineshop */ var ckBox=document.querySelector("#ckBox"),ckAcptBtn=document.querySelector("#ckAcptBtn"),ckErrMes="Cookie can't be set! Please unblock this site from the cookie setting of your browser.";if(null!=ckBox){ckAcptBtn.onclick=()=>{document.cookie="CookieConsentByFineshop=Accepted; max-age=2592000; path=/",document.cookie?ckBox.classList.add("acptd"):alert(ckErrMes)};let e=document.cookie.indexOf("CookieConsentByFineshop=Accepted");-1!=e?ckBox.classList.add("hidden"):ckBox.classList.remove("hidden")} /*]]>*/</script>

شرح اهم عناصر شيفر جافاسكريبت

هذا الكود JavaScript يستخدم لإنشاء وتنفيذ إشعار موافقة على ملفات تعريف الارتباط (Cookies Consent Notice). سأشرح أهم العناصر في الكود:

  • var ckBox=document.
    querySelector("#ckBox")
    : يحدد العنصر الذي يحتوي على إشعار الموافقة على ملفات تعريف الارتباط باستخدام معرفه (id).
  • var ckAcptBtn=document.
    querySelector("#ckAcptBtn")
    : يحدد زر الموافقة على إشعار ملفات تعريف الارتباط باستخدام معرفه (id).
  • var ckErrMes="Cookie can't be
    / set! Please unblock this
    site from the cookie
    setting of your browser."
    : يحدد رسالة الخطأ التي ستظهر إذا لم يتمكن الموقع من تعيين ملف تعريف الارتباط.
  • if(null!=ckBox): يتحقق مما إذا كان عنصر إشعار الموافقة موجودًا في الصفحة.
  • ckAcptBtn.onclick=()=>{...}: يحدد وظيفة سيتم تنفيذها عند النقر على زر الموافقة. هذه الوظيفة تقوم بما يلي:
    • document.cookie=
      "CookieConsentByFineshop=Accepted;
      max-age=2592000; path=/"
      : تعيين ملف تعريف الارتباط للموافقة على ملفات تعريف الارتباط مع مدة صلاحية 30 يومًا.
    • document.cookie?ckBox.classList.add("acptd"):
      alert(ckErrMes)
      : إذا تم تعيين ملف تعريف الارتباط بنجاح، يضيف فئة acptd إلى عنصر إشعار الموافقة؛ وإلا، يعرض رسالة الخطأ المحددة.
  • let e=document.cookie.indexOf
    ("CookieConsentByFineshop=Accepted")
    : يتحقق مما إذا كان ملف تعريف الارتباط للموافقة موجودًا بالفعل.
  • -1!=e?ckBox.classList.add("hidden"):
    ckBox.classList.remove("hidden")
    : إذا وجد ملف تعريف الارتباط، يضيف فئة hidden لإخفاء إشعار الموافقة؛ وإذا لم يكن موجودًا، يزيل فئة hidden لإظهار الإشعار.

هذه هي أبرز العناصر الموجودة في الكود والتي تتحكم في تشغيل إشعار ملفات تعريف الارتباط وأسلوبه.

الخطوة 7: الآن أضف كود JavaScript التالي فوق وسم </body> مباشرة. إذا لم تجده، فمن المحتمل أنه قد تم تحليله مسبقًا وهو &lt;/body&gt;.

قد يحتاج الزوار إلى الموافقة على ملفات تعريف الارتباط بعد كل 30 يومًا. غير الرقم المميز في الكود حسب حاجتك (بالثواني). على سبيل المثال 5184000 = 60 يومًا

الخطوة 8: احفظ التغييرات بالنقر على هذا الرمز

سنضيف أكواد HTML في أداة HTML/JavaScript عبر قائمة التخطيط حتى نتمكن من تفعيلها أو تعطيلها أو إجراء تغييرات من خلال قائمة التخطيط. يمكنك أيضًا إضافة الأكواد HTML في XML الخاص بالقالب، لذلك الصق الأكواد HTML المقدمة أدناه فوق كود JavaScript الذي أضفناه في الخطوة 7.

الخطوة 9: ثم انتقل إلى قائمة التخطيط.

الخطوة 10: أنشئ أداة بالنقر على إضافة أداة واختر HTML/JavaScript.

الخطوة 11: الصق الأكواد HTML التالية فيها.

<!--[ Cookies Consent Notice ]-->
<div class='ckWrap hidden' id='ckBox'>
  <div class='ckCont'>
    <!--[ Cookies Icon ]-->
    <svg viewbox='0 0 50 50'><path d='M 25 4 C 13.414063 4 4 13.414063 4 25 C 4 36.585938 13.414063 46 25 46 C 36.585938 46 46 36.585938 46 25 C 46 24.378906 45.960938 23.78125 45.910156 23.203125 C 45.878906 22.855469 45.671875 22.546875 45.359375 22.390625 C 45.042969 22.234375 44.671875 22.253906 44.375 22.441406 C 43.824219 22.792969 43.191406 23 42.5 23 C 41.015625 23 39.769531 22.082031 39.253906 20.792969 C 39.148438 20.527344 38.933594 20.320313 38.667969 20.222656 C 38.398438 20.125 38.101563 20.144531 37.847656 20.28125 C 37.003906 20.738281 36.035156 21 35 21 C 31.675781 21 29 18.324219 29 15 C 29 13.964844 29.261719 12.996094 29.71875 12.152344 C 29.855469 11.898438 29.875 11.601563 29.777344 11.332031 C 29.679688 11.066406 29.472656 10.851563 29.207031 10.746094 C 27.917969 10.230469 27 8.984375 27 7.5 C 27 6.808594 27.207031 6.175781 27.558594 5.625 C 27.746094 5.328125 27.765625 4.957031 27.609375 4.640625 C 27.453125 4.328125 27.144531 4.121094 26.796875 4.089844 C 26.21875 4.039063 25.621094 4 25 4 Z M 38 4 C 36.894531 4 36 4.894531 36 6 C 36 7.105469 36.894531 8 38 8 C 39.105469 8 40 7.105469 40 6 C 40 4.894531 39.105469 4 38 4 Z M 25 6 C 25.144531 6 25.292969 6.015625 25.4375 6.023438 C 25.285156 6.519531 25 6.953125 25 7.5 C 25 9.4375 26.136719 10.984375 27.660156 11.960938 C 27.269531 12.90625 27 13.917969 27 15 C 27 19.40625 30.59375 23 35 23 C 36.082031 23 37.09375 22.730469 38.039063 22.339844 C 39.015625 23.863281 40.5625 25 42.5 25 C 43.046875 25 43.480469 24.714844 43.980469 24.5625 C 43.984375 24.707031 44 24.855469 44 25 C 44 35.503906 35.503906 44 25 44 C 14.496094 44 6 35.503906 6 25 C 6 14.496094 14.496094 6 25 6 Z M 36.5 12 C 35.671875 12 35 12.671875 35 13.5 C 35 14.328125 35.671875 15 36.5 15 C 37.328125 15 38 14.328125 38 13.5 C 38 12.671875 37.328125 12 36.5 12 Z M 21.5 15 C 20.671875 15 20 15.671875 20 16.5 C 20 17.328125 20.671875 18 21.5 18 C 22.328125 18 23 17.328125 23 16.5 C 23 15.671875 22.328125 15 21.5 15 Z M 45 15 C 44.449219 15 44 15.449219 44 16 C 44 16.550781 44.449219 17 45 17 C 45.550781 17 46 16.550781 46 16 C 46 15.449219 45.550781 15 45 15 Z M 15 20 C 13.34375 20 12 21.34375 12 23 C 12 24.65625 13.34375 26 15 26 C 16.65625 26 18 24.65625 18 23 C 18 21.34375 16.65625 20 15 20 Z M 24.5 24 C 23.671875 24 23 24.671875 23 25.5 C 23 26.328125 23.671875 27 24.5 27 C 25.328125 27 26 26.328125 26 25.5 C 26 24.671875 25.328125 24 24.5 24 Z M 17 31 C 15.894531 31 15 31.894531 15 33 C 15 34.105469 15.894531 35 17 35 C 18.105469 35 19 34.105469 19 33 C 19 31.894531 18.105469 31 17 31 Z M 30.5 32 C 29.121094 32 28 33.121094 28 34.5 C 28 35.878906 29.121094 37 30.5 37 C 31.878906 37 33 35.878906 33 34.5 C 33 33.121094 31.878906 32 30.5 32 Z'/></svg>
    <!--[ Cookies Notice Heading ]-->
    <h2>موافقة ملفات تعريف الارتباط</h2>
    <!--[ Cookies Notice Detail ]-->
    <p>يستخدم هذا الموقع ملفات تعريف الارتباط لضمان حصولك على أفضل تجربة على موقعنا.</p>
  </div>
  <button class='btn' id='ckAcptBtn'>قبول!</button>
  <a class='btn outl' href='https://policies.google.com/technologies/cookies'>تعرف على المزيد</a>
</div>

شرح اهم عناصر الشيفرة html

هذا الكود يستخدم لإنشاء إشعار موافقة على ملفات تعريف الارتباط (Cookies Consent Notice) ويحتوي على العناصر التالية:

  • <div class='ckWrap hidden' id='ckBox'>: يحدد الحاوية الرئيسية لإشعار الموافقة. الفئة hidden تجعلها مخفية في البداية.
  • <div class='ckCont'>: حاوية داخلية تحتوي على محتوى الإشعار.
  • <!--[ Cookies Icon ]-->: تعليق يشير إلى أيقونة ملفات تعريف الارتباط.
  • <svg viewbox='0 0 50 50'><path d='...'></path></svg>: عنصر SVG يعرض أيقونة ملفات تعريف الارتباط.
  • <!--[ Cookies Notice Heading ]-->: تعليق يشير إلى عنوان إشعار ملفات تعريف الارتباط.
  • <h2>موافقة ملفات تعريف الارتباط</h2>: عنوان الإشعار.
  • <!--[ Cookies Notice Detail ]-->: تعليق يشير إلى تفاصيل إشعار ملفات تعريف الارتباط.
  • <p>يستخدم هذا الموقع ملفات تعريف الارتباط لضمان حصولك على أفضل تجربة على موقعنا.</p>: نص يوضح استخدام الموقع لملفات تعريف الارتباط.
  • <button class='btn' id='ckAcptBtn'
    >قبول!</button>
    : زر لقبول ملفات تعريف الارتباط. يحتوي على معرف id لتمييزه.
  • <a class='btn outl' href='https://policies.google.com/
    technologies/cookies'
    >تعرف على المزيد</a>
    : رابط لمزيد من المعلومات عن ملفات تعريف الارتباط، مع فئة btn outl لتنسيق الزر.

هذه هي العناصر الرئيسية التي تشكل إشعار موافقة ملفات تعريف الارتباط وتعرض أيقونة، عنوان، تفاصيل الزر والرابط لمزيد من المعلومات.

تم ذلك! الآن سيظهر على موقعك نافذة منبثقة تحتوي على أزرار قبول! وتعرف على المزيد بخصوص ملفات تعريف الارتباط.

الخطوة 12: أخيرًا، احفظ التغييرات بالنقر على هذا الرمز

أمثلة مرئية

لتوضيح كيفية ظهور إشعار ملفات تعريف الارتباط بعد إضافة الأكواد، يمكنك مشاهدة الأمثلة المرئية أدناه:

مثال آخر على إشعار ملفات تعريف الارتباط مثال آخر على إشعار ملفات تعريف الارتباط

عرض توضيحي

هل ترغب في رؤية كيف يعمل؟
يمكنك التحقق / عرض نمط ويدجت إشعار موافقة ملفات تعريف الارتباط قبل تطبيقه على موقعك في بلوجر.
لنلق نظرة عليه!

أسئلة شائعة

إليك بعض الأسئلة الشائعة التي قد تواجهها:

سؤال: كيف أعدل ألوان إشعار ملفات تعريف الارتباط؟

✦ جواب: يمكنك تعديل الألوان في أكواد CSS المضافة في الخطوة 5.

سؤال: ماذا أفعل إذا لم يعمل الإشعار بشكل صحيح؟

✦ جواب: تأكد من أنك قمت بإضافة الأكواد في الأماكن الصحيحة ولم تحدث أي أخطاء أثناء النسخ واللصق.

سؤال: هل يمكنني تخصيص نص الإشعار بلغات متعددة؟

✦ جواب: نعم، يمكنك إضافة أكواد JavaScript للتحقق من لغة المتصفح وعرض النص المناسب بناءً على ذلك.

سؤال: كيف يمكنني إعادة تفعيل الإشعار بعد موافقة الزوار؟

✦ جواب: يمكنك تعديل إعدادات الكوكيز بحيث يتم إعادة عرض الإشعار بعد فترة زمنية معينة أو عند تغيير سياسة الخصوصية الخاصة بك.

أهمية اختبار الإشعار

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

شروط الاستخدام

إذا كنت ترغب في استخدام ويدجت إشعار موافقة ملفات تعريف الارتباط على موقعك، يُرجى عدم إزالة السمات من الأكواد، لأنها لن تكون مرئية على موقعك.

إذا كنت ترغب في إعادة كتابة مقال حول ويدجت إشعار موافقة ملفات تعريف الارتباط باستخدام هذه الأكواد، فيجب عليك إضافة مرجع يتضمن رابطًا مرئيًا وقابلًا للنقر يؤدي إلى موقعنا الإلكتروني: https://www.siwane.xyz. إذا قمت بإعادة الكتابة دون إضافة المرجع، فسيتم اتخاذ إجراءات قانونية.

خاتمة

في هذا الدليل، قمنا بشرح كيفية إضافة ويدجت موافقة ملفات تعريف الارتباط المتجاوب إلى مدونة بلوجر الخاصة بك. باتباع الخطوات المذكورة أعلاه، يمكنك الامتثال لقوانين الاتحاد الأوروبي بسهولة، وتحسين تجربة المستخدمين، وزيادة الثقة في موقعك. إذا كانت لديك أي استفسارات أو تحتاج إلى مساعدة إضافية، لا تتردد في طرح أسئلتك في التعليقات.

تذكر دائمًا أن الامتثال للقوانين يعزز ثقة الزوار ويعكس احترافيتك. نأمل أن يكون هذا الدليل قد ساعدك في تنفيذ إشعار ملفات تعريف الارتباط بنجاح. شكرًا لقراءتك ونتمنى لك التوفيق!

للحصول على المزيد من النصائح والموارد حول تحسين مدونتك، تابع مقالاتنا القادمة!

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

هذا المقال يُعد مدخلًا أو تمهيدًا لمقال سأكتبه في المستقبل. (سأدرج رابط المقال هنا في أقرب تحديث بعد نشر المقال الثاني). المقال الثاني سيكون حول إنشاء صفحة سياسة ملفات تعريف الارتباط، حيث سنتطرق إلى سكريبت جمع البيانات من تصفح المستخدمين لتعزيز شفافية المدونة وتحسين سلوك الموقع. الهدف هو الحصول على أعلى درجات الثقة من المستخدمين ومن المنصات الكبرى مثل جوجل.

© حقوق الطبع والنشر:
www.fineshopdesign.com

المشاركات ذات الصلة

شكرًا لمساعدة ChatGPT في إعداد هذا المقال

المصادر:
siwaneSiwaneXYZ©
https://www.siwane.xyz/2024/07/cookies-widget.html

عن المؤلف

جمال الحزازي
مرحبا انا منشئ محتوى رقمي (صِوانˣʸᶻ) مهتم بالتصميم ui/ux، مدون في مجال التقنية و العلوم تعرف على المزيد.
اشتري لي كوب قهوة ☕

إرسال تعليق

اكتب تعليقك 🤗، لكن تيقن ان كلماتك تعبر عن من انت.
"لا يقال قف لاراك بل تكلم لأعرفك"

الانضمام إلى المحادثة

الانضمام إلى المحادثة