[vBulletin3.8] مستطيل التنبيه التفاعلي والذكي لزيادة تسجيلات الزوار في المنتديات

[ناصر]

تعتبر زيادة نسبة التسجيلات وتفاعل الزوار من أكبر التحديات التي تواجه أصحاب منتديات vBulletin. اليوم أقدم لكم لمسة جمالية واحترافية متوافقة 100% مع نسخ vBulletin 3.8، وهي عبارة عن مستطيل تنبيه ذكي وتفاعلي يظهر للزوار فقط في أسفل الشاشة، ويتحرك بنعومة للأعلى والأسفل بالتزامن مع تمرير تصفح الصفحة ليلفت انتباه الزائر ويحفزه على التسجيل.

✨ مميزات هذا التنبيه الاحترافي

• خاص بالزوار فقط: محاط بأكواد شرطية ذكية تختفي تلقائياً بمجرد تسجيل العضو لدخوله لعدم إزعاجه.
• حركة تفاعلية (Parallax): يتحرك للأعلى عند النزول بالصفحة وينزل للأسفل عند الصعود للحصول على مظهر عصري.
• زر إغلاق ذكي (✕): يسمح للزائر بإغلاق التنبيه فوراً مع ميزة التلاشي الناعم لمنع ظهوره مجدداً في نفس الصفحة.
• ألوان متوازنة وجذابة: تم تنسيقه بلون أصفر ذهبي متوازن مع زر أحمر حيوي لضمان أعلى نسبة تباين ولفت للانتباه مع حواف ناعمة وانثناء 3px.

🛠️ طريقة التركيب خطوة بخطوة

توجه إلى لوحة تحكم الإدارة (AdminCP) > الاستايلات والقوالب > البحث في القوالب.

1. ابحث عن قالب: header وافتحه للتعديل.
2. اذهب إلى آخر القالب تماماً (في السطر الأخير بعد كل الأكواد الموجودة لديك).
3. أضف الكود البرمجي التالي بالكامل كما هو:

<if condition="$bbuserinfo['userid'] == 0">
<!-- مستطيل التنبيه التفاعلي لمنتديات تلوين بألوان  -->
<style type="text/css">
.tlwen-sticky-bar {
    position: fixed !important;
    bottom: 30px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: #ffe082 !important; /* لون أصفر ذهبي */
    color: #3e2723 !important; /* لون نص بني داكن */
    padding: 12px 25px !important;
    border-radius: 3px !important;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.18) !important;
    font-family: tahoma, arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: bold !important;
    z-index: 99999999 !important; 
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 15px !important;
    direction: rtl !important;
    white-space: nowrap !important;
    width: auto !important;
    transition: bottom 0.2s ease-out, opacity 0.3s ease !important; 
}

.tlwen-sticky-btn {
    background: #ff5252 !important; /* لون أحمر */
    color: #ffffff !important; /* لون نص الزر أبيض */
    padding: 5px 18px !important;
    border-radius: 3px !important;
    text-decoration: none !important;
    font-size: 13px !important;
    display: inline-block !important;
    transition: background 0.3s ease !important;
}
.tlwen-sticky-btn:hover {
    background: #ff1744 !important; /* يصبح أحمر أكثر حيوية عند تمرير الماوس */
    color: #ffffff !important;
    text-decoration: none !important;
}

.tlwen-sticky-close {
    background: transparent !important;
    border: none !important;
    color: #5d4037 !important; /* لون إشارة الحظر X */
    cursor: pointer !important;
    font-size: 16px !important;
    font-weight: bold !important;
    margin-right: 5px !important;
    padding: 0 !important;
    line-height: 1 !important;
    transition: color 0.2s !important;
}
.tlwen-sticky-close:hover {
    color: #ff1744 !important;
}
</style>

<div id="tlwenDynamicNotice" class="tlwen-sticky-bar">
    <span>إن رغبت المشاركة في المنتدى؟</span>
    <a href="register.php$session[sessionurl_q]" class="tlwen-sticky-btn">قم بالضغط هنا</a>
    <button type="button" id="tlwenCloseBtn" class="tlwen-sticky-close" title="إغلاق التنبيه">✕</button>
</div>

<script type="text/javascript">
(function() {
    var lastScrollTop = 0;
    var isClosedByUser = false;
    var noticeElement = document.getElementById("tlwenDynamicNotice");
    var closeBtn = document.getElementById("tlwenCloseBtn");

    if (noticeElement) {
        window.addEventListener('scroll', function() {
            if (isClosedByUser) return;
            var st = window.scrollY || document.documentElement.scrollTop;
            
            if (st > lastScrollTop){
                noticeElement.style.bottom = "50px";
            } else {
                noticeElement.style.bottom = "20px";
            }
            lastScrollTop = st <= 0 ? 0 : st;
        });
    }

    if (closeBtn && noticeElement) {
        closeBtn.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            isClosedByUser = true;
            noticeElement.style.opacity = "0";
            setTimeout(function() {
                noticeElement.style.display = "none";
            }, 300);
        });
    }
})();
</script>
</if>

4. اضغط على حفظ القالب.

💡 طريقة المعاينة للتأكد من العمل

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