شريط أخبار متحرك احترافي شبيه بقناة الحدث لمدونات بلوجر

<style>

/* === تصميم شريط الحدث البطيء والمستمر === */

.news-bar{position:relative;background:#0a1a2f;color:#fff;font-family:'Tajawal',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;overflow:hidden;height:48px;display:flex;align-items:center}

.news-bar__label{background:#c62828;padding:0 16px;font-weight:700;font-size:16px;line-height:48px;flex-shrink:0;z-index:2}

.news-bar__wrapper{flex:1;overflow:hidden;position:relative}

.news-bar__content{white-space:nowrap;display:inline-block;animation:ticker 60s linear infinite;padding-left:24px;font-size:15px}

.news-bar__content a{color:#fff;text-decoration:none;margin:0 32px}

.news-bar__content a:hover{text-decoration:underline;color:#ff5252}

@keyframes ticker{0%{transform:translateX(100%)}100%{transform:translateX(-100%)}}

@media (max-width:600px){.news-bar{height:42px}.news-bar__label{font-size:14px;padding:0 12px}.news-bar__content{font-size:13px;margin:0 16px}}

</style>

<div class="news-bar">

  <div class="news-bar__label">عاجل</div>

  <div class="news-bar__wrapper">

    <div class="news-bar__content" id="newsBarContent">جاري تحميل الأخبار...</div>

  </div>

</div>

<script>(function(){

  var LABEL_FILTER = '';       // تصنيف معين أو فارغ (مثال: 'رياضة')

  var MAX_RESULTS = 10;        // عدد الأخبار

  var OPEN_IN_NEW_TAB = true;  // فتح الروابط في تبويب جديد

  var contentBox = document.getElementById('newsBarContent');

  if(!contentBox) return;

  function buildFeedUrl(format){

    var base = location.origin + '/feeds/posts/default';

    if(LABEL_FILTER){ base += '/-/' + encodeURIComponent(LABEL_FILTER); }

    return base + '?alt=' + format + '&max-results=' + MAX_RESULTS;

  }

  function fetchXml(url){

    return fetch(url, {credentials:'same-origin'})

      .then(function(r){ return r.text(); })

      .then(function(str){ return (new DOMParser()).parseFromString(str,'text/xml'); });

  }

  function parseAtom(xml){

    var entries = [];

    var nodes = xml.getElementsByTagName('entry');

    for(var i=0;i<nodes.length;i++){

      var e = nodes[i];

      var title = (e.getElementsByTagName('title')[0]||{}).textContent || 'بدون عنوان';

      var link = '#';

      var links = e.getElementsByTagName('link');

      for(var j=0;j<links.length;j++){

        if(links[j].getAttribute('rel')==='alternate'){

          link = links[j].getAttribute('href'); break;

        }

      }

      entries.push({title:title, link:link});

    }

    return entries;

  }

  function parseRss(xml){

    var entries = [];

    var items = xml.getElementsByTagName('item');

    for(var i=0;i<items.length;i++){

      var t = (items[i].getElementsByTagName('title')[0]||{}).textContent || 'بدون عنوان';

      var lNode = items[i].getElementsByTagName('link')[0];

      var l = lNode ? (lNode.textContent || lNode.getAttribute('href') || '#') : '#';

      entries.push({title:t, link:l});

    }

    return entries;

  }

  function render(entries){

    if(!entries.length){ contentBox.textContent = 'لا توجد أخبار حالياً'; return; }

    contentBox.innerHTML = '';

    entries.forEach(function(e){

      var a = document.createElement('a');

      a.textContent = e.title;

      a.href = e.link;

      if(OPEN_IN_NEW_TAB){ a.target = '_blank'; a.rel='noopener'; }

      contentBox.appendChild(a);

    });

  }

  // جلب الخلاصة (يحاول ATOM ثم RSS)

  fetchXml(buildFeedUrl('atom')).then(function(xml){

    var entries = parseAtom(xml);

    if(entries.length){ render(entries); }

    else { fetchXml(buildFeedUrl('rss')).then(function(xml2){ render(parseRss(xml2)); })

           .catch(function(){ contentBox.textContent='تعذّر تحميل الأخبار.'; }); }

  }).catch(function(){

    fetchXml(buildFeedUrl('rss')).then(function(xml2){

      render(parseRss(xml2));

    }).catch(function(){ contentBox.textContent='تعذّر تحميل الأخبار.'; });

  });

})();</script>

ملاحظة: كود الجلب يعمل عند وضعه كـ أداة في التخطيط، وليس داخل التدوينة.