تعزيز تجربة المستخدم في منتديات أحلى منتدى مع بادئات جديدة لعام 2024

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

الميزات الجديدة:

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

أمثلة على البادئات:

• بادئات كصور: تُظهر الأيقونات الخاصة بالألعاب مثل Sonic وMario، مما يُضفي لمسة جمالية على المشاركات.
  
• بادئات كنصوص: تقدم نصوصًا مُلونة وجذابة، مما يُساهم في جذب انتباه القارئ.
  

كيفية التركيب:

لتركيب الأكواد الجديدة، يمكن اتباع الخطوات التالية:

1. إضافة كود JavaScript:
   
   • يتم إضافة الكود إلى جميع الصفحات داخل المنتدى لضمان عمله بشكل كامل.
     
   • يُستخدم هذا الكود لاستبدال البادئات النصية بأيقونات، مع إمكانية اختيار نوع البادئة عبر قائمة منسدلة.
     

تخصيص البادئات:

• يمكن تعديل الأكواد وفقًا لتفضيلات التصميم الخاصة بك، سواء بتغيير الألوان أو الأيقونات المستخدمة.
  

الكود:

$(function() {[size=19][/size]
$(document).ready(function() {[size=19][/size]
    $('a:not(:has(img))').each(function() {[size=19][/size]
        var html = $(this).html();[size=19][/size]
        var updatedHtml = html;[size=19][/size]
 [size=19][/size]
   [size=19][/size]
      updatedHtml = updatedHtml[size=19][/size]
            // Select prefix-img[size=19][/size]
            .replace(/\[sonic-img\]/g, '<img style="width: 45px;height: 45px;vertical-align: bottom;" src="https://i.servimg.com/u/f28/20/46/29/87/unname11.jpg" />')[size=19][/size]
            .replace(/\[mario-img\]/g, '<img style="width: 45px;height: 45px;vertical-align: bottom;" src="https://i.servimg.com/u/f28/20/46/29/87/superm10.jpg" />')[size=19][/size]
            .replace(/\[Yoshi-img\]/g, '<img style="width: 45px;height: 45px;vertical-align: bottom;" src="https://i.servimg.com/u/f28/20/46/29/87/yoship10.png" />')[size=19][/size]
            .replace(/\[conan-img\]/g, '<img style="width: 45px;height: 45px;vertical-align: bottom;" src="https://i.servimg.com/u/f28/20/46/29/87/superm11.jpg" />')[size=19][/size]
            .replace(/\[star-img\]/g, '<img style="width: 45px;height: 45px;vertical-align: bottom;" src="https://i.servimg.com/u/f28/20/46/29/87/png-tr10.png" />')[size=19][/size]
            .replace(/\[solved-img\]/g, '<img style="width: 45px;height: 45px;vertical-align: bottom;" src="https://i.servimg.com/u/f62/11/40/02/06/1_copy11.png" />')[size=19][/size]
     [size=19][/size]
            // Select prefix-Text[size=19][/size]
            .replace(/\[sonic\]/g, '<div style="padding: 3px;color: #ffffff;background: #1c45bb;display: inline-block;">sonic</div>')[size=19][/size]
            .replace(/\[mario\]/g, '<div style="padding: 3px;color: #ffffff;background: #e60002;display: inline-block;">mario</div>')[size=19][/size]
            .replace(/\[Yoshi\]/g, '<div style="padding: 3px;color: #ffffff;background: #32a726;display: inline-block;">Yoshi</div>')[size=19][/size]
            .replace(/\[conan\]/g, '<div style="padding: 3px;color: #ffffff;background: #054d87;display: inline-block;">conan</div>')[size=19][/size]
            .replace(/\[star\]/g, '<div style="padding: 3px;color: #000000;background: #f9dd01;display: inline-block;">star</div>')[size=19][/size]
            .replace(/\[solved\]/g, '<div style="padding: 3px;color: #ffffff;background: #68ad3f;display: inline-block;">solved</div>')[size=19][/size]
 [size=19][/size]
 [size=19][/size]
;$(this).html(updatedHtml);[size=19][/size]
    });});});[size=19][/size]
 [size=19][/size]
 [size=19][/size]
document.addEventListener("DOMContentLoaded", function() {[size=19][/size]
    var conan2000 = [[size=19][/size]
        { value: 'conan20000', text: 'اختيار بادئات (صور)' },[size=19][/size]
        { value: 'option1', text: '[sonic-img]' },[size=19][/size]
        { value: 'option2', text: '[mario-img]' },[size=19][/size]
        { value: 'option3', text: '[Yoshi-img]' },[size=19][/size]
        { value: 'option4', text: '[conan-img]' },[size=19][/size]
        { value: 'option5', text: '[star-img]' },[size=19][/size]
        { value: 'option6', text: '[solved-img]' },[size=19][/size]
        { value: 'conan200000', text: 'Clear' }[size=19][/size]
    ];[size=19][/size]
    var konan2000 = [[size=19][/size]
        { value: 'conan20000', text: 'اختيار بادئات (نص)' },[size=19][/size]
        { value: 'option1', text: '[sonic]' },[size=19][/size]
        { value: 'option2', text: '[mario]' },[size=19][/size]
        { value: 'option3', text: '[Yoshi]' },[size=19][/size]
        { value: 'option4', text: '[conan]' },[size=19][/size]
        { value: 'option5', text: '[star]' },[size=19][/size]
        { value: 'option6', text: '[solved]' },[size=19][/size]
        { value: 'conan200000', text: 'Clear' }[size=19][/size]
    ];[size=19][/size]
    var $input = document.querySelector('input[name="subject"]');[size=19][/size]
    var $dropconan2000 = document.createElement('select');[size=19][/size]
    var $forumButton = document.createElement('button');[size=19][/size]
    $dropconan2000.classList.add('dropconan2000', 'default'); // Start with default class[size=19][/size]
    $forumButton.classList.add('dropconan2000-forum', 'default'); // Start with default class[size=19][/size]
    $forumButton.textContent = 'التبديل الى بادئات نص';[size=19][/size]
 [size=19][/size]
    var isConan2000Visible = true;[size=19][/size]
 [size=19][/size]
    function populatedropconan2000(options) {[size=19][/size]
        $dropconan2000.innerHTML = ''; // Clear existing options[size=19][/size]
        options.forEach(function(option) {[size=19][/size]
            var opt = document.createElement('option');[size=19][/size]
            opt.value = option.value;[size=19][/size]
            opt.textContent = option.text;[size=19][/size]
            $dropconan2000.appendChild(opt);[size=19][/size]
        });[size=19][/size]
    }[size=19][/size]
    populatedropconan2000(conan2000);[size=19][/size]
    $forumButton.addEventListener('click', function(event) {[size=19][/size]
        event.preventDefault();[size=19][/size]
        if (isConan2000Visible) {[size=19][/size]
            populatedropconan2000(konan2000);[size=19][/size]
            $forumButton.textContent = 'بادئة-نص';[size=19][/size]
            $forumButton.classList.remove('default');[size=19][/size]
            $forumButton.classList.add('forumd');[size=19][/size]
            $dropconan2000.classList.remove('default');[size=19][/size]
            $dropconan2000.classList.add('forumd');[size=19][/size]
        } else {[size=19][/size]
            populatedropconan2000(conan2000);[size=19][/size]
            $forumButton.textContent = 'بادئة-صور';[size=19][/size]
            $forumButton.classList.remove('forumd');[size=19][/size]
            $forumButton.classList.add('default');[size=19][/size]
            $dropconan2000.classList.remove('forumd');[size=19][/size]
            $dropconan2000.classList.add('default');[size=19][/size]
        }[size=19][/size]
        isConan2000Visible = !isConan2000Visible;[size=19][/size]
    });[size=19][/size]
 [size=19][/size]
    $dropconan2000.addEventListener('change', function() {[size=19][/size]
        var selectedValue = $dropconan2000.value;[size=19][/size]
        var selectedText = $dropconan2000.options[$dropconan2000.selectedIndex].text;[size=19][/size]
        var currentValue = $input.value;[size=19][/size]
     [size=19][/size]
        if (selectedValue === 'conan20000') {[size=19][/size]
            return;[size=19][/size]
        } else if (selectedValue === 'conan200000') {[size=19][/size]
            $input.value = '';[size=19][/size]
        } else {[size=19][/size]
            if (currentValue) {[size=19][/size]
                // Adding selectedText with a leading comma if there are existing words[size=19][/size]
                $input.value = selectedText + ', ' + currentValue;[size=19][/size]
            } else {[size=19][/size]
                $input.value = selectedText;[size=19][/size]
            }[size=19][/size]
        }[size=19][/size]
    });[size=19][/size]
    var container = document.createElement('div');[size=19][/size]
    container.classList.add('dropconan2000-container');[size=19][/size]
    container.appendChild($forumButton);[size=19][/size]
    container.appendChild($dropconan2000);[size=19][/size]
    $input.parentNode.insertBefore(container, $input.nextSibling);[size=19][/size]
});[size=19][/size]
 [size=19][/size]
 [size=19][/size]
 [size=19][/size]
document.write('<style type="text/css">[size=19][/size]
.dropconan2000-forum.default,.dropconan2000.default {background-color: #007bff !important;color: #fff; border-radius: 10px; cursor: pointer;}[size=19][/size]
.dropconan2000-forum.forumd,.dropconan2000.forumd {background-color: #28a745 !important; color: #fff;border-radius: 10px;cursor: pointer;}[size=19][/size]
.dropconan2000.default, .dropconan2000.forumd {height: 40px;}[size=19][/size]
 select.dropconan2000.forumd option {background: #0e4419;color: azure;}[size=19][/size]
 select.dropconan2000.default  option {background: #102a46;color: #ffffff;}[size=19][/size]
         [size=19][/size]
  button.dropconan2000-forum.forumd,button.dropconan2000-forum.default {[size=19][/size]
    padding: 10px;[size=19][/size]
    border-radius: 10px;[size=19][/size]
    margin-bottom: 5px;[size=19][/size]
    margin-right: 5px;   [size=19][/size]
}[size=19][/size]
 .dropconan2000-container {margin: 6px;}[size=19][/size]
 [size=19][/size]
              </style>');

الفوائد:

باستخدام هذه الأكواد، ستتمكن من:

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

خلاصة:

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

الكلمات المفتاحية:

بادئات منتديات أحلى منتدى، أكواد JavaScript، تخصيص المنتدى، تفاعل الأعضاء، تصميم المنتديات.