في سعيك لتحفيز الأعضاء على التفاعل مع المشاركات في منتداك، نقدم لك طريقة مبتكرة وجذابة من خلال كود يجمع بين JavaScript وCSS لإضافة رسائل مخصصة تُظهر تقديرًا للمساهمات بناءً على عدد الإعجابات التي تتلقاها. يعتبر هذا النظام من الأساليب الفعالة لتعزيز روح المنافسة والإبداع بين الأعضاء.
الرسائل المخصصة وفقًا للإعجابات
- الرسالة البرونزية: تظهر عندما تحصل المساهمة على ما بين 3 إلى 7 إعجابات.
- الرسالة الفضية: تظهر عندما تحصل المساهمة على ما بين 8 إلى 15 إعجابًا.
- الرسالة الذهبية: عندما تتلقى المساهمة ما بين 16 و70 إعجابًا، تتغير الرسالة إلى الذهبية، مما يمثل أعلى مستوى من التقدير.
خطوات التركيب
1. كود CSS: قم بإضافة الكود التالي إلى قسم الأنماط في موقعك، حيث يمكنك تخصيص الألوان لتناسب تصميم منتداك:css
نسخ الكود
الكود:
.like-Bronze {
border-right: solid 5px #a34521 !important;
padding: 5px;
background: #cfc5c2c7;
overflow: hidden;
margin-top: 33px;
margin-left: 7px;
margin-right: 7px;
}
.like1-Bronze, .like2-Bronze, .like3-Bronze {
position: relative;
top: 7px;
float: right;
}
.like-Silver {
border-right: solid 5px #bababa !important;
padding: 5px;
background: #dfdfdf;
}
.like-gold {
border-right: solid 5px #dab275 !important;
padding: 5px;
background: #eed6a1;
}
2. كود JavaScript: ثم، قم بإضافة الكود التالي في المواضيع، مع التأكد من تحديد إصدار المنتدى الخاص بك في المتغير:
javascript
نسخ الكود
الكود:
$(document).ready(function() {
var Likestopt_Likestopt = {
'AwesomeBB': '.post-content:first'
};
var currentServer = 'AwesomeBB';
var authorSelector = Likestopt_Likestopt[currentServer];
$(".post").each(function() {
var currentPost = $(this);
var repNbText = currentPost.find(".rep-nb:first").text();
var Likestopt = parseInt(repNbText, 10);
currentPost.find(".like-Bronze,.like-Silver,.like-gold").remove();
var LikesHTML = '';
if (Likestopt >= 16 && Likestopt <= 70) {
LikesHTML = '<div align="center">' +
'<div class="like-gold">gold Post<br />★★★★★</div>' +
'</div>';
} else if (Likestopt >= 8 && Likestopt <= 15) {
LikesHTML = '<div align="center">' +
'<div class="like-Silver">Silver Post<br />★★★</div>' +
'</div>';
} else if (Likestopt >= 3 && Likestopt <= 7) {
LikesHTML = '<div align="center">' +
'<div class="like-Bronze">Bronze Post<br />★</div>' +
'</div>';
}
if (LikesHTML) {
currentPost.find(authorSelector).after(LikesHTML);
}
});
});
هام! تأكد من استبدال
الكود:
currentServerبإصدار المنتدى الخاص بك.
فوائد إضافة الرسائل المخصصة
- تحفيز التفاعل: من خلال تقديم مكافآت مرئية للأعضاء، ستزيد من مستوى التفاعل في المنتدى.
- تعزيز جودة المحتوى: يشجع الأعضاء على تقديم محتوى أفضل للحصول على تقدير أعلى.
- تعزيز روح المنافسة: يخلق هذا النظام جوًا من التحدي بين الأعضاء، مما يزيد من نشاط المنتدى.
استنتاج
باستخدام هذا الكود، يمكنك تحسين تفاعل الأعضاء وزيادة جودة المحتوى في منتداك. جرّب هذه الطريقة الآن وراقب كيف سيساهم ذلك في تحسين مستوى التفاعل بين الأعضاء.الكلمات المفتاحية:
- تعزيز التفاعل
- رسائل مخصصة
- JavaScript
- CSS
- تحسين تجربة المستخدم
- منتدى AwesomeBB
