أضافة شريط أخر الأخبار لقوالب بلوجر متحرك بشكل رأسي و بأزرار تحكم

<style>

#breakingwrapper{display:flex;align-items:center;gap:14px;padding:12px 20px;margin:22px auto;backdrop-filter:blur(12px);border-radius:14px;border:1px solid rgba(255,255,255,0.3);transition:0.3s ease}

.tulisbreaking{background:#e53935;color:#fff;padding:6px 18px;font-size:15px;font-weight:700;border-radius:8px;text-shadow:0 1px 2px rgba(0,0,0,0.2);letter-spacing:0.3px;border:1px solid #cbcbcb;animation:pulse 2s infinite ease-in-out}

@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}100%{transform:scale(1)}}

#recentbreaking{flex:1;font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center}

#recentbreaking i{margin-left:8px;color:#e53935;font-size:18px}

#recentbreaking a{text-decoration:none;color:inherit;transition:0.3s ease}

#recentbreaking a:hover{color:#e53935}

.nav-arrows{display:flex;gap:6px}

.nav-arrows i{cursor:pointer;font-size:20px;padding:7px 8px;border-radius:10px;transition:0.25s;background:rgba(255,255,255,0.7);border:1px solid #cbcbcb}

.nav-arrows i:hover{background:#e53935;transform:scale(1.15)}

@media(max-width:900px){#breakingwrapper{padding:12px 16px;gap:10px}.tulisbreaking{font-size:14px;padding:5px 14px}#recentbreaking{font-size:14px}}

@media(max-width:600px){#breakingwrapper{flex-direction:column;align-items:flex-start;padding:14px;gap:10px}.tulisbreaking{font-size:13px;padding:4px 12px;border-radius:6px}#recentbreaking{font-size:13.5px;margin-top:4px;text-align:center;justify-content:center;width:100%}.nav-arrows{align-self:center;margin-top:8px}@media(max-width:420px){.nav-arrows{display:none}}}

@media (prefers-color-scheme:dark){:root{--bg:rgba(25,25,25,0.65);--text:#f5f5f5}#breakingwrapper{border-color:rgba(255,255,255,0.1);border:1px solid #cbcbcb}.nav-arrows i{background:rgba(255,255,255,0.12)}}

</style>

   <script type='text/javascript'>

//<![CDATA[

var jq = document.createElement("script");

jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js";

jq.onload = function(){

var blogURL = "https://zom2zom.blogspot.com"; // ← ضع رابط مدونتك هنا

var maxPosts = 10;

var items = [];   // تخزين الأخبار

var index = 0;    // العنصر الحالي

function showItem(i){

   $("#recentbreaking").html(

      '<i class="fa fa-check-square"></i> ' + items[i]

   );

}

function nextItem(){

   index = (index + 1) % items.length;

   showItem(index);

}

function prevItem(){

   index = (index - 1 + items.length) % items.length;

   showItem(index);

}

$.ajax({

   url: blogURL + "/feeds/posts/default?alt=json-in-script&max-results=" + maxPosts,

   type: "get",

   dataType: "jsonp",

   success: function(data){

      let entries = data.feed.entry;

      if(entries){

         entries.forEach(function(item){

            let link = "";

            item.link.forEach(function(l){

               if(l.rel === "alternate") link = l.href;

            });

            items.push('<a href="'+link+'" target="_blank">'+item.title.$t+'</a>');

         });

         showItem(0);

         setInterval(nextItem, 5000);

         $("#arrow-right").click(nextItem);

         $("#arrow-left").click(prevItem);

      }

   }

});

};

document.head.appendChild(jq);

 //]]>

</script> 

<b:if cond='data:blog.url == data:blog.homepageUrl'><div id='breakingwrapper'>

  <div class='tulisbreaking'>آخر الأخبار</div>

  <div id='recentbreaking'/>

  <div class='nav-arrows'>

    <i class='fa fa-chevron-right' id='arrow-right'/>

    <i class='fa fa-chevron-left' id='arrow-left'/>

  </div>

</div></b:if>