إضافة صندوق روابط مهمة بتصميم عصري جذاب شرح كامل لتركيب كود الإعلان المتحرك - متوافق مع XenForo
مقدمةأهلاً بكم أعضاء وزوار زين فورو الكرام! نقدم لكم اليوم إضافة رائعة لمنتداكم: صندوق روابط مهمة بتصميم زجاجي (Glassmorphism) مع خلفية متدرجة متحركة. هذه الإضافة تُظهر روابط سريعة لأهم أقسام المنتدى أو مواضيع محددة داخل إعلان أنيق، يتكيف تلقائياً مع الوضع الداكن والفاتح.
مميزات الإضافة- تصميم زجاجي شفاف مع تأثير ضبابية (Blur) أنيق.
- خلفية متدرجة متحركة (أنيميشن لانهائي بسلاسة).
- دعم كامل للوضع الداكن والفاتح - تتغير الألوان تلقائياً مع ثيم المنتدى.
- أيقونات Emoji/Unicode - لا تحتاج تحميل مكتبات خارجية ولا تتعارض مع XenForo.
- تأثيرات حركية عند المرور على الروابط (تكبير، دوران الأيقونة، ظل).
- سهلة التخصيص - يمكنك تعديل الروابط والنصوص والأيقونات بسهولة.
- كود مضغوط وخفيف - أقل من 3KB، لا يؤثر على سرعة المنتدى.
الكود الكامل
HTML:
<style>
/* XenForo Links Box - Glassmorphism Animated */
.xl *{margin:0;padding:0;box-sizing:border-box}
.xl{font-family:'Cairo',sans-serif;direction:rtl;max-width:100%;border-radius:24px;padding:2px}
.xl-c{
background:rgba(255,255,255,0.2);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
border:1px solid rgba(255,255,255,0.3);
border-radius:24px;
padding:16px 14px;
box-shadow:0 20px 35px -8px rgba(0,0,0,0.15);
position:relative;
overflow:hidden;
transition:all 0.3s;
animation:xlGradient 12s ease infinite;
background-size:200% 200%;
}
@keyframes xlGradient{
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@media(prefers-color-scheme:light){
.xl-c{
background-image:linear-gradient(135deg,rgba(230,245,255,0.85),rgba(210,230,250,0.85),rgba(190,220,255,0.85));
border:1px solid rgba(255,255,255,0.6);
}
}
@media(prefers-color-scheme:dark){
.xl-c{
background-image:linear-gradient(135deg,rgba(20,35,50,0.9),rgba(15,25,40,0.9),rgba(10,20,35,0.9));
border:1px solid rgba(255,255,255,0.1);
}
}
.xl-h{
display:flex;
align-items:center;
gap:10px;
margin-bottom:18px;
padding-bottom:12px;
border-bottom:1px solid rgba(255,255,255,0.2);
}
.xl-h span{
font-size:2rem;
line-height:1;
filter:drop-shadow(0 4px 6px rgba(0,0,0,0.1));
}
.xl-h h3{
font-size:1.3rem;
font-weight:800;
letter-spacing:-0.3px;
color:#fff;
text-shadow:0 2px 5px rgba(0,0,0,0.2);
}
@media(prefers-color-scheme:light){
.xl-h h3{color:#0a2a44;text-shadow:0 1px 3px rgba(255,255,255,0.5)}
}
.xl-g{
display:flex;
flex-direction:column;
gap:10px;
}
.xl-i{
display:flex;
align-items:center;
gap:14px;
padding:12px 16px;
border-radius:20px;
text-decoration:none;
transition:all 0.25s;
background:rgba(255,255,255,0.1);
backdrop-filter:blur(5px);
-webkit-backdrop-filter:blur(5px);
border:1px solid rgba(255,255,255,0.15);
box-shadow:0 5px 12px rgba(0,0,0,0.05);
}
.xl-i:hover{
transform:scale(1.02) translateY(-3px);
background:rgba(255,255,255,0.25);
border-color:rgba(255,255,255,0.5);
box-shadow:0 12px 20px -8px rgba(0,0,0,0.2);
}
.xl-ic{
width:42px;height:42px;
background:rgba(255,255,255,0.25);
border-radius:16px;
display:flex;
align-items:center;
justify-content:center;
font-size:1.8rem;
backdrop-filter:blur(4px);
border:1px solid rgba(255,255,255,0.3);
transition:0.2s;
}
.xl-i:hover .xl-ic{
background:#fff;
transform:rotate(5deg);
}
.xl-tt{
font-weight:700;
font-size:1rem;
color:#fff;
text-shadow:0 2px 4px rgba(0,0,0,0.2);
margin-bottom:3px;
}
@media(prefers-color-scheme:light){
.xl-tt{color:#0b1e2e;text-shadow:0 1px 2px rgba(255,255,255,0.8)}
}
.xl-ds{
font-size:0.75rem;
display:flex;
align-items:center;
gap:6px;
color:rgba(255,255,255,0.8);
}
@media(prefers-color-scheme:light){
.xl-ds{color:#1f3a55}
}
.xl-bd{
background:#e68a2e;
color:#fff;
font-size:0.65rem;
font-weight:700;
padding:2px 10px;
border-radius:40px;
margin-right:6px;
box-shadow:0 2px 6px rgba(0,0,0,0.1);
}
.xl-f{
margin-top:14px;
font-size:0.7rem;
color:rgba(255,255,255,0.7);
text-align:left;
direction:ltr;
display:flex;
align-items:center;
gap:5px;
}
@media(prefers-color-scheme:light){
.xl-f{color:#2b4e6e}
}
</style>
<div class="xl">
<div class="xl-c">
<div class="xl-h">
<span>🔗</span>
<h3>روابط مهمة</h3>
</div>
<div class="xl-g">
<!-- رابط 1 -->
<a href="رابط_1" target="_blank" class="xl-i">
<span class="xl-ic">⚖️</span>
<span>
<div class="xl-tt">قوانين المنتدى</div>
<div class="xl-ds">
<span>📋</span> يجب الاطلاع
<span class="xl-bd">مهم</span>
</div>
</span>
</a>
<!-- رابط 2 -->
<a href="رابط_2" target="_blank" class="xl-i">
<span class="xl-ic">📰</span>
<span>
<div class="xl-tt">آخر الأخبار</div>
<div class="xl-ds">
<span>🕒</span> تحديثات مستمرة
</div>
</span>
</a>
<!-- رابط 3 -->
<a href="رابط_3" target="_blank" class="xl-i">
<span class="xl-ic">🎧</span>
<span>
<div class="xl-tt">الدعم الفني</div>
<div class="xl-ds">
<span>❓</span> حل المشاكل
</div>
</span>
</a>
<!-- رابط 4 -->
<a href="رابط_4" target="_blank" class="xl-i">
<span class="xl-ic">🏆</span>
<span>
<div class="xl-tt">المسابقات</div>
<div class="xl-ds">
<span>🎁</span> جوائز قيمة
</div>
</span>
</a>
<!-- رابط 5 -->
<a href="رابط_5" target="_blank" class="xl-i">
<span class="xl-ic">⭐</span>
<span>
<div class="xl-tt">مواضيع مميزة</div>
<div class="xl-ds">
<span>📌</span> محتوى قيم
</div>
</span>
</a>
</div>
<div class="xl-f">
<span>✨</span> اضغط على أي رابط للانتقال
</div>
</div>
</div>
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&display=swap" rel="stylesheet">
طريقة التركيب في XenForo- اذهب إلى لوحة تحكم المشرف (Admin CP).
- من القائمة الجانبية اختر: الإعدادات > الإعلانات.
- انقر على إضافة إعلان (أو عدّل إعلاناً موجوداً).
- في حقل عنوان الإعلان اكتب: "صندوق الروابط المهمة".
- من قائمة نوع الإعلان اختر HTML.
- انسخ الكود أعلاه بالكامل والصقه في مربع كود HTML.
- في قسم معايير العرض، حدد القالب الذي تريد ظهور الإعلان فيه:
- ad_sidebar_below_visitor_panel - للعمود الجانبي (أسفل معلومات العضو).
- ad_sidebar_top - أعلى العمود الجانبي.
- ad_message_body - داخل الموضوع (بجانب المحتوى).
- ad_header - أعلى المنتدى.
- حدد صلاحيات المستخدم (مثلاً: جميع الزوار والأعضاء).
- انقر حفظ الإعلان.
كيفية تخصيص الروابطبعد لصق الكود، يمكنك تعديل الروابط لتناسب منتداك. ابحث عن الأسطر التي تبدأ بـ:
كود:
<a href="رابط_1" target="_blank" class="xl-i">- استبدل رابط_1 بالرابط الحقيقي (مثلاً:
).
جار التحميل...
your-forum.com - عدّل النص داخل 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، صفحات عادية).
معاينة سريعة
نصيحة أخيرة:ضع أهم الروابط التي تريد توجيه الزوار إليها (مثل: قوانين المنتدى، قسم الدعم، المسابقات، آخر الأخبار). هذا يساعد في زيادة التفاعل وتحسين تجربة المستخدم.
بالتوفيق لمنتداكم
اعداد وشرح : مهدي حميد ~ منتدى كود نت
يُمنع النقل دون ذكر المصدر .