- إنضم
- 06/04/2026
- المشاركات
- 89
إضافة صندوق روابط مهمة بتصميم عصري جذاب شرح كامل لتركيب كود الإعلان المتحرك - متوافق مع XenForo
مقدمةأهلاً بكم أعضاء وزوار زين فورو الكرام! نقدم لكم اليوم إضافة رائعة لمنتداكم: صندوق روابط مهمة بتصميم زجاجي (Glassmorphism) مع خلفية متدرجة متحركة. هذه الإضافة تُظهر روابط سريعة لأهم أقسام المنتدى أو مواضيع محددة داخل إعلان أنيق، يتكيف تلقائياً مع الوضع الداكن والفاتح.
مميزات الإضافة- تصميم زجاجي شفاف مع تأثير ضبابية (Blur) أنيق.
- خلفية متدرجة متحركة (أنيميشن لانهائي بسلاسة).
- دعم كامل للوضع الداكن والفاتح - تتغير الألوان تلقائياً مع ثيم المنتدى.
- أيقونات Emoji/Unicode - لا تحتاج تحميل مكتبات خارجية ولا تتعارض مع XenForo.
- تأثيرات حركية عند المرور على الروابط (تكبير، دوران الأيقونة، ظل).
- سهلة التخصيص - يمكنك تعديل الروابط والنصوص والأيقونات بسهولة.
- كود مضغوط وخفيف - أقل من 3KB، لا يؤثر على سرعة المنتدى.
الكود الكامل
طريقة التركيب في XenForo- اذهب إلى لوحة تحكم المشرف (Admin CP).
- من القائمة الجانبية اختر: الإعدادات > الإعلانات.
- انقر على إضافة إعلان (أو عدّل إعلاناً موجوداً).
- في حقل عنوان الإعلان اكتب: "صندوق الروابط المهمة".
- من قائمة نوع الإعلان اختر HTML.
- انسخ الكود أعلاه بالكامل والصقه في مربع كود HTML.
- في قسم معايير العرض، حدد القالب الذي تريد ظهور الإعلان فيه:
- ad_sidebar_below_visitor_panel - للعمود الجانبي (أسفل معلومات العضو).
- ad_sidebar_top - أعلى العمود الجانبي.
- ad_message_body - داخل الموضوع (بجانب المحتوى).
- ad_header - أعلى المنتدى.
- حدد صلاحيات المستخدم (مثلاً: جميع الزوار والأعضاء).
- انقر حفظ الإعلان.
كيفية تخصيص الروابطبعد لصق الكود، يمكنك تعديل الروابط لتناسب منتداك. ابحث عن الأسطر التي تبدأ بـ:
لتعديل رابط:
- استبدل رابط_1 بالرابط الحقيقي (مثلاً:
). - عدّل النص داخل xl-tt (عنوان الرابط).
- عدّل النص داخل xl-ds (الوصف المختصر).
- غيّر الأيقونة داخل xl-ic (استخدم أي رمز Emoji مثل
).
- انسخ كتلة كاملة من <a ...> حتى </a>.
- ألصقها قبل السطر </div> الأخير.
- عدّل البيانات كما تريد.
- احذف كتلة <a ...> ... </a> الخاصة بالرابط الذي لا تريده.
تخصيص الألوان (اختياري)إذا أردت تغيير ألوان التدرج أو الشارة البرتقالية، عدّل القيم التالية في قسم <style>:
| العنصر | المتغير | القيمة الافتراضية |
|---|---|---|
| لون الشارة | .xl-bd background | #e68a2e |
| تدرج الوضع الفاتح | linear-gradient(...) | أزرق فاتح |
| تدرج الوضع الداكن | linear-gradient(...) | أزرق داكن |
التوافق مع الجوالالكود متجاوب بالكامل مع جميع أحجام الشاشات. في الجوال، ستظهر الروابط بشكل عمودي أنيق مع تباعد مناسب للمس.
الأسئلة الشائعةس: هل يحتاج الكود إلى تحميل خطوط أو أيقونات خارجية؟
ج: لا، فقط خط Cairo من Google Fonts (خفيف جداً)، والأيقونات هي رموز Emoji عادية لا تحتاج تحميل أي شيء.
س: هل يتعارض مع إضافات XenForo الأخرى؟
ج: لا، جميع الأصناف (class) تبدأ بـ xl- لتجنب التعارض مع أي كود آخر في المنتدى.
س: هل يمكن استخدامه في غير XenForo؟
ج: نعم، الكود HTML/CSS خالص ويعمل في أي منصة (WordPress، MyBB، صفحات عادية).
معاينة سريعة
نصيحة أخيرة:ضع أهم الروابط التي تريد توجيه الزوار إليها (مثل: قوانين المنتدى، قسم الدعم، المسابقات، آخر الأخبار). هذا يساعد في زيادة التفاعل وتحسين تجربة المستخدم.
بالتوفيق لمنتداكم
اعداد وشرح : مهدي حميد ~ منتدى كود نت
يُمنع النقل دون ذكر المصدر .