شريط اخر الاخبار 2020 لاحلى منتدي احترافي

اذهب الى الأسفل 
كاتب الموضوعرسالة
omarpop23
 
 
omarpop23


ذكر
عدد المساهمات : 1522
معدل النشاط : 6843
السُمعة : 218

شريط اخر الاخبار 2020 لاحلى منتدي احترافي Empty
مُساهمةموضوع: شريط اخر الاخبار 2020 لاحلى منتدي احترافي   شريط اخر الاخبار 2020 لاحلى منتدي احترافي Emptyالأحد 7 يوليو 2019 - 18:42

بناء علي طلب الكثير من اعضاء احلى منتدي علي شريط اخر المواضيع للنسخه الاخيرة AwesomeBB ولجميع النسخ و شريط اخر الاخبار لقسم معين
ها انا اليوم أتيكم بكود شريط اخر الاخبار لقسم معين لعيونكم

صورة لكود
شريط اخر الاخبار 2020 لاحلى منتدي احترافي Far_sy11

مميزات الكود

  1. امكانية جلب آخر مواضيع لقسم معين اتوماتيك
  2. اذا تركت رقم القسم فارغ فإن الكود سيعرض آخر مواضيع المنتدي
  3. امكانيةتحديد عدد معين للمواضيع في شريط الاخبار
  4. امكانية التحكم الكامل في شريط الاخبار من خلال الكود
  5. الكود يدعم نسخه الجوال
  6. الكود سريع وخفيف علي التصميم

هناك المزيد من المزايا اكتشفها بنفسك ...

طريقة تركيب الكود:
انسخ الكود التالي و ضعه في الإعلانات الخاصة او بداية قالب ال index_body او نهاية قالب overall_header
الكود:
<div class="newsLocation"></div>
ثم اذهب الي
لوحة الادارة - عناصر اضافية -- إدارة أكواد Javascript

إنشاء كود جديد
العنوان * : شريط اخر الاخبار
أضف الكود الى : جميع الصفحات

الكود:
الكود:
$(function getNews() {
    var lastNewsTitle = 'آخر الأخبار',
        forumNumper = '1', // رقم القسم
        numberOfNews = '10', // عدد المواضيع
        speedOfNews = '60', // سرعة التتالي
        separateImg = 'https://i.servimg.com/u/f51/19/34/86/41/best-d10.png',   // الصورة الفاصلة بين كل موضوع
        newsTitleBg = '#369FCF',    // لون خلفية نص آخر الأخبار
        newsBg = '#FFF',    // لون خلفية شريط آخر الأخبار

        newsLocation = '.newsLocation',
        lastNewsContainer = document.createElement("DIV");
    lastNewsContainer.className = "lastNewsContainer";
    lastNewsContainer.innerHTML =
        '<div class="lastNewsTitle">' + lastNewsTitle + '</div><div class="lastNewsItems-wrap"><div class="lastNewsItems marquee"></div></div>';
    if (newsLocation) {
        document.querySelector(newsLocation).appendChild(lastNewsContainer);
    }

    function loadDoc(f, c) {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                var parser = new DOMParser(),
                    newsResult = parser.parseFromString(this.responseText, "text/xml");
                for (i = 0; i < c; i++) {
                    var lastNewsBlock = document.createElement('SPAN');
                    lastNewsBlock.className = 'lastNewsBlock';
                    lastNewsBlock.innerHTML = '<a href="' + newsResult.querySelectorAll('item')[i].querySelector('link').innerHTML + '" class="lastNews">' + newsResult.querySelectorAll('item')[i].querySelector('title').innerHTML + '</a><img src="' + separateImg + '" class="separateImg" alt="" />';
                    document.querySelector('.lastNewsItems').append(lastNewsBlock);
                }
            }
        };
        xhttp.open("GET", "/feed?f=" + f, true);
        xhttp.send();
    }
    loadDoc(forumNumper, numberOfNews);
    var newsStyle = document.createElement('STYLE');
    newsStyle.innerHTML = '.marquee { display: inline-block; padding-right: 100%; white-space: nowrap; animation: marquee ' + speedOfNews + 's linear infinite; }.separateImg, .lastNews { display: inline-block; vertical-align: middle; } .separateImg { margin: 0 40px; max-width: 30px; max-height: 30px; } .lastNewsBlock:last-child .separateImg { display: none; } .lastNewsItems-wrap:hover .marquee { animation-play-state: paused } @keyframes marquee { 0% { transform: translate(0, 0); } 100% { transform: translate(100%, 0); } } .lastNewsContainer { display: inline-flex; width: 100%; align-items: center; background: ' + newsTitleBg + '; color: #FFF; margin: 20px 0; box-sizing: border-box; } .lastNewsTitle { min-width: 100px; text-align: center; } .lastNewsItems-wrap { width: 100%; background: ' + newsBg + '; border: 1px solid ' + newsTitleBg + '; overflow: hidden; }';
    document.head.appendChild(newsStyle);

});
//by omarpop23

التعديلات:
يمكنك فقط تعديل اللغه و النصوص من هنا
الكود:
   var lastNewsTitle = 'آخر الأخبار',
        forumNumper = '1', // رقم القسم
        numberOfNews = '3', // عدد المواضيع
        speedOfNews = '30', // سرعة التتالي
        separateImg = 'https://i.servimg.com/u/f51/19/34/86/41/best-d10.png',   // الصورة الفاصلة بين كل موضوع
        newsTitleBg = '#369FCF',    // لون خلفية نص آخر الأخبار
        newsBg = '#FFF',    //


ملحوظه: الكود يعمل علي جميع النسخ
تحياتي لكـــم
@omarpop23


عدل سابقا من قبل omarpop23 في الأربعاء 10 يوليو 2019 - 4:29 عدل 7 مرات

الألحان المرحة يعجبه هذا الموضوع

الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://www.best-devs.net
 
شريط اخر الاخبار 2020 لاحلى منتدي احترافي
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1
 مواضيع مماثلة
-
» ارجوع المساعده في تظبيط ابعاد شريط اخر الاخبار 2020 لاحلى منتدي احترافي علي المنتداي
» كيف اعمل شريط متحرك مثل شريط الاخبار بالمنتدى
» شريط الاخبار
» شريط الاخبار لايظهر؟؟؟
» سؤال عن شريط الاخبار المتحركه RSS

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
منتدى الدعم و المساعدة لأحلى المنتديات :: أحلى منتدى ::   :: التقنيات المتقدمة :: أكواد الجافا إسكريبت JAVA-
انتقل الى: