ها انا اليوم أتيكم بكود شريط اخر الاخبار لقسم معين لعيونكم
صورة لكود
مميزات الكود
امكانية جلب آخر مواضيع لقسم محدد اتوماتيكياً
اذا تركت رقم القسم فارغ فإن الكود سيعرض آخر مواضيع المنتدي بشكل عام
امكانية تحديد عدد معين للمواضيع في شريط الاخبار
امكانية التحكم الكامل في شريط الاخبار من خلال الكود
الكود يدعم نسخه الجوال
الكود سريع وخفيف علي التصميم
هناك المزيد من المزايا اكتشفها بنفسك ...
طريقة تركيب الكود:
انسخ الكود التالي في الاعلانات الخاصه او نهاية قالب الـ overall_header
الكود:
<div class="newsLocation"></div>
ثم اذهب الي
لوحة الادارة - عناصر اضافية -- إدارة أكواد Javascript
إنشاء كود جديد
العنوان * : شريط اخر الاخبار
أضف الكود الى : جميع الصفحات
الكود:
$(function getNews() {
var lastNewsTitle = 'آخر الأكواد',
forumNumper = '25', // رقم القسم
numberOfNews = '5', // عدد المواضيع
speedOfNews = '30', // سرعة التتالي
separateImg = 'https://i.servimg.com/u/f51/19/34/86/41/best-d10.png', // الصورة الفاصلة بين كل موضوع
newsTitleBg = 'var(--primary)', // لون خلفية نص آخر الأخبار
newsBg = '#FFF', // لون خلفية شريط آخر الأخبار
newsLocation = '.newsLocation',
lastNewsContainer = document.createElement("DIV");
lastNewsContainer.className = "lastNewsContainer";
lastNewsContainer.style.maxWidth = "98.9vw";
lastNewsContainer.innerHTML =
'<div class="lastNewsTitle">' + lastNewsTitle + '</div><div class="lastNewsItems-wrap"><div class="lastNewsItems marquee"></div></div>';
if (document.querySelector(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 { 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; align-items: center; background: ' + newsTitleBg + '; color: #FFF; margin: 20px 0; box-sizing: border-box; } .lastNewsTitle { min-width: 100px; text-align: center; } .lastNewsItems-wrap { width: calc(100% - 100px); background: ' + newsBg + '; border: 1px solid ' + newsTitleBg + '; overflow: hidden; }';
document.head.appendChild(newsStyle);
setInterval(function() {
var marqueeW = document.querySelector('.lastNewsItems').scrollWidth;
document.querySelector('.lastNewsItems').style.minWidth = '' + marqueeW + 'px';
}, 500);
}
});
// by omarpop23
التعديات:
يمكنك فقط تعديل اللغه و النصوص من هنا
الكود:
var lastNewsTitle = 'آخر الأخبار',
forumNumper = '1', // رقم القسم
numberOfNews = '3', // عدد المواضيع
speedOfNews = '30', // سرعة التتالي
separateImg = 'https://i51.servimg.com/u/f51/19/34/86/41/best-d10.png', // الصورة الفاصلة بين كل موضوع
newsTitleBg = '#369FCF', // لون خلفية نص آخر الأخبار
newsBg = '#FFF', //
اللسان ليس عظاماً لكنه يكسر العـظام
الابتسامة كلمة طيبة بغير حروف
