شريط متحرك لعرض آخر المواضيع

 كثير من المواقع التي لها تحديثات يومية للمواضيع تفضل وجود شكل شريط متحرك فيها , وعادة لا يوجد الكثير من تلك الإضافات التي يسهل أن تعمل على أغلب القوالب , لذلك طورت تلك الإضافة لتكون بقدر الإمكان جيدة في التفاعل والعمل على غالبية القوالب 

شريط متحرك لعرض آخر المواضيع

تركيب الإضافة سهل فقط أضف كودها في آداة HTML/JavaScript

<style>

#cnmu-ticker{position:relative;overflow:hidden;height:44px;width:100%;background-color:#f8f8f8;display:flex;align-items:center;margin-bottom:20px;}

#cnmu-ticker span{padding:0 10px;flex-shrink:0;white-space:nowrap;background-color:#fa5555;color:#fff;height:100%;display:flex;align-items:center;}

</style>

<script>

function _0x6f53(_0x299aff,_0x5b741d){var _0x15804e=_0x1580();return _0x6f53=function(_0x6f537d,_0x392f7d){_0x6f537d=_0x6f537d-0x10f;var _0x2813d9=_0x15804e[_0x6f537d];if(_0x6f53['XAexDp']===undefined){var _0x52223d=function(_0x3d4808){var _0x5f2897='abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+/=';var _0x5b4be1='',_0x182e55='';for(var _0x30d6b5=0x0,_0x3a89cd,_0x2fa5ce,_0x832e5a=0x0;_0x2fa5ce=_0x3d4808['charAt'](_0x832e5a++);~_0x2fa5ce&&(_0x3a89cd=_0x30d6b5%0x4?_0x3a89cd*0x40+_0x2fa5ce:_0x2fa5ce,_0x30d6b5++%0x4)?_0x5b4be1+=String['fromCharCode'](0xff&_0x3a89cd>>(-0x2*_0x30d6b5&0x6)):0x0){_0x2fa5ce=_0x5f2897['indexOf'](_0x2fa5ce);}for(var _0x357520=0x0,_0xa10191=_0x5b4be1['length'];_0x357520<_0xa10191;_0x357520++){_0x182e55+='%'+('00'+_0x5b4be1['charCodeAt'](_0x357520)['toString'](0x10))['slice'](-0x2);}return decodeURIComponent(_0x182e55);};_0x6f53['ecdREo']=_0x52223d,_0x299aff=arguments,_0x6f53['XAexDp']=!![];}var _0x5e84c9=_0x15804e[0x0],_0x327050=_0x6f537d+_0x5e84c9,_0x46598e=_0x299aff[_0x327050];return!_0x46598e?(_0x2813d9=_0x6f53['ecdREo'](_0x2813d9),_0x299aff[_0x327050]=_0x2813d9):_0x2813d9=_0x46598e,_0x2813d9;},_0x6f53(_0x299aff,_0x5b741d);}function _0x1580(){var _0x57bacb=['zMvLza','BgLUAW','DgL0Bgu','mJy2mda4rw5zBgT5','mtu3ntDvqxjAyuW','ntGYt3rHsMTR','zw50CNK','BgvUz3rO','mJyWmJm1nLv6Eu53Da','nJaZntK3nM5Nvg9zyq','oteWndi4DwT6A3Pn','D3jPDgu','CMvS','phvSigLKpsDJBM11BMv3CYC+','mtK1mZy0ngX3txjxza','nuj6BLvvtq','mZi5mde3mtrVwLrtD3e','pgXPpJXHigHYzwy9','pc91Bd4'];_0x1580=function(){return _0x57bacb;};return _0x1580();}(function(_0x243a56,_0x2d4a84){var _0x169952=_0x6f53,_0x5a0f12=_0x243a56();while(!![]){try{var _0x563cec=-parseInt(_0x169952(0x111))/0x1+parseInt(_0x169952(0x11d))/0x2+-parseInt(_0x169952(0x10f))/0x3+-parseInt(_0x169952(0x115))/0x4*(parseInt(_0x169952(0x116))/0x5)+parseInt(_0x169952(0x11f))/0x6*(-parseInt(_0x169952(0x11e))/0x7)+-parseInt(_0x169952(0x110))/0x8+parseInt(_0x169952(0x117))/0x9;if(_0x563cec===_0x2d4a84)break;else _0x5a0f12['push'](_0x5a0f12['shift']());}catch(_0x40be80){_0x5a0f12['push'](_0x5a0f12['shift']());}}}(_0x1580,0x862ef));function cnmuNews(_0x3d4808){var _0x239f02=_0x6f53;document['write'](_0x239f02(0x114));for(var _0x5f2897=0x0;_0x5f2897<_0x3d4808[_0x239f02(0x11a)]['entry'][_0x239f02(0x121)];_0x5f2897++){for(var _0x5b4be1=0x0;_0x5b4be1<_0x3d4808[_0x239f02(0x11a)]['entry'][_0x5f2897][_0x239f02(0x11b)][_0x239f02(0x121)];_0x5b4be1++){if(_0x3d4808[_0x239f02(0x11a)][_0x239f02(0x120)][_0x5f2897]['link'][_0x5b4be1][_0x239f02(0x113)]=='alternate'){var _0x182e55=_0x3d4808[_0x239f02(0x11a)][_0x239f02(0x120)][_0x5f2897][_0x239f02(0x11b)][_0x5b4be1]['href'];break;}}var _0x30d6b5=_0x3d4808[_0x239f02(0x11a)]['entry'][_0x5f2897][_0x239f02(0x11c)]['$t'],_0x3a89cd=_0x239f02(0x118)+_0x182e55+'>'+_0x30d6b5+'</a></li>';document['write'](_0x3a89cd);}document[_0x239f02(0x112)](_0x239f02(0x119));}

</script>

<div id="cnmu-ticker">

<span>آخر الأخبار</span>  

<script src="/feeds/posts/default/-/Label?max-results=24&amp;alt=json-in-script&amp;callback=cnmuNews"></script>

</div>

<script>

  !function(i){function t(t){var e=0;return t.children("li").each(function(){e+=i(this).outerWidth(!0)}),e}function e(t){return Math.max.apply(Math,t.children().map(function(){return i(this).width()}).get())}function s(i){var t=i.data("settings")||{direction:"left",speed:50},e=i.children().first(),s=Math.abs(-i.css(t.direction).replace("px","").replace("auto","0")-e.outerWidth(!0)),n=1e3*s/t.speed,r={};return r[t.direction]=i.css(t.direction).replace("px","").replace("auto","0")-s,{css:r,time:n}}function n(i){var t=i.data("settings")||{direction:"left"};i.css("transition-duration","0s").css(t.direction,"0");var e=i.children().first();e.hasClass("webticker-init")?e.remove():i.children().last().after(e)}function r(i,t){var e=i.data("settings")||{direction:"left"};"undefined"==typeof t&&(t=!1),t&&n(i);var a=s(i);i.animate(a.css,a.time,"linear",function(){i.css(e.direction,"0"),r(i,!0)})}function a(i,t){"undefined"==typeof t&&(t=!1),t&&n(i);var e=s(i),r=e.time/1e3;r+="s",i.css(e.css).css("transition-duration",r)}function c(t,e,s){var n=[];i.get(t,function(t){var r=i(t);r.find("item").each(function(){var t=i(this),e={title:t.find("title").text(),link:t.find("link").text()},s='<li><a href="'+e.link+'"">'+e.title+"</a></li>";n+=s}),s.webTicker("update",n,e)})}function l(s,n){if(s.children("li").length<1)return window.console,!1;var r=s.data("settings");r.duplicateLoops=r.duplicateLoops||0,s.width("auto");var a=0;s.children("li").each(function(){a+=i(this).outerWidth(!0)});var c,l=s.find("li:first").height();if(r.duplicate){c=e(s);for(var o=0;a-c<s.parent().width()||1===s.children().length||o<r.duplicateLoops;){var d=s.children().clone();s.append(d),a=0,a=t(s),c=e(s),o++}r.duplicateLoops=o}else{var h=s.parent().width()-a;h+=s.find("li:first").width(),s.find(".ticker-spacer").length>0?s.find(".ticker-spacer").width(h):s.append('<li class="ticker-spacer" style="float: '+r.direction+";width:"+h+"px;height:"+l+'px;"></li>')}r.startEmpty&&n&&s.prepend('<li class="webticker-init" style="float: '+r.direction+";width:"+s.parent().width()+"px;height:"+l+'px;"></li>'),a=0,a=t(s),s.width(a+200);var f=0;for(f=t(s);f>=s.width();)s.width(s.width()+200),f=0,f=t(s);return!0}var o=function(){var i=document.createElement("p").style,t=["ms","O","Moz","Webkit"];if(""===i.transition)return!0;for(;t.length;)if(t.pop()+"Transition"in i)return!0;return!1}(),d={init:function(t){return t=jQuery.extend({speed:50,direction:"left",moving:!0,startEmpty:!0,duplicate:!1,rssurl:!1,hoverpause:!0,rssfrequency:0,updatetype:"reset",transition:"linear",height:"30px",maskleft:"",maskright:"",maskwidth:0},t),this.each(function(){jQuery(this).data("settings",t);var e=jQuery(this),s=e.wrap('<div class="mask"></div>');s.after('<span class="tickeroverlay-left">&nbsp;</span><span class="tickeroverlay-right">&nbsp;</span>');var n,d=e.parent().wrap('<div class="tickercontainer"></div>');if(i(window).resize(function(){clearTimeout(n),n=setTimeout(function(){console.log("window was resized"),l(e,!1)},500)}),e.children("li").css("white-space","nowrap"),e.children("li").css("float",t.direction),e.children("li").css("padding","0 7px"),e.children("li").css("line-height",t.height),s.css("position","relative"),s.css("overflow","hidden"),e.closest(".tickercontainer").css("height",t.height),e.closest(".tickercontainer").css("overflow","hidden"),e.css("float",t.direction),e.css("position","relative"),e.css("list-style-type","none"),e.css("margin","0"),e.css("padding","0"),""!==t.maskleft&&""!==t.maskright){var h='url("'+t.maskleft+'")';d.find(".tickeroverlay-left").css("background-image",h),d.find(".tickeroverlay-left").css("display","block"),d.find(".tickeroverlay-left").css("pointer-events","none"),d.find(".tickeroverlay-left").css("position","absolute"),d.find(".tickeroverlay-left").css("z-index","30"),d.find(".tickeroverlay-left").css("height",t.height),d.find(".tickeroverlay-left").css("width",t.maskwidth),d.find(".tickeroverlay-left").css("top","0"),d.find(".tickeroverlay-left").css("left","-2px"),h='url("'+t.maskright+'")',d.find(".tickeroverlay-right").css("background-image",h),d.find(".tickeroverlay-right").css("display","block"),d.find(".tickeroverlay-right").css("pointer-events","none"),d.find(".tickeroverlay-right").css("position","absolute"),d.find(".tickeroverlay-right").css("z-index","30"),d.find(".tickeroverlay-right").css("height",t.height),d.find(".tickeroverlay-right").css("width",t.maskwidth),d.find(".tickeroverlay-right").css("top","0"),d.find(".tickeroverlay-right").css("right","-2px")}else d.find(".tickeroverlay-left").css("display","none"),d.find(".tickeroverlay-right").css("display","none");e.children("li").last().addClass("last");var f=l(e,!0);t.rssurl&&(c(t.rssurl,t.type,e),t.rssfrequency>0&&window.setInterval(function(){c(t.rssurl,t.type,e)},1e3*t.rssfrequency*60)),o?(e.css("transition-timing-function",t.transition),e.css("transition-duration","0s").css(t.direction,"0"),f&&a(e,!1),e.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend",function(t){return!!e.is(t.target)&&void a(i(this),!0)})):f&&r(i(this)),t.hoverpause&&e.hover(function(){if(o){var e=i(this).css(t.direction);i(this).css("transition-duration","0s").css(t.direction,e)}else jQuery(this).stop()},function(){jQuery(this).data("settings").moving&&(o?a(i(this),!1):r(e))})})},stop:function(){var t=i(this).data("settings");if(t.moving)return t.moving=!1,this.each(function(){if(o){var e=i(this).css(t.direction);i(this).css("transition-duration","0s").css(t.direction,e)}else i(this).stop()})},cont:function(){var t=i(this).data("settings");if(!t.moving)return t.moving=!0,this.each(function(){o?a(i(this),!1):r(i(this))})},transition:function(t){var e=i(this);o&&e.css("transition-timing-function",t)},update:function(e,s,n,r){s=s||"reset","undefined"==typeof n&&(n=!0),"undefined"==typeof r&&(r=!1),"string"==typeof e&&(e=i(e));var a=i(this);a.webTicker("stop");var c=i(this).data("settings");if("reset"===s)a.html(e),l(a,!0);else if("swap"===s){var o,d,h,f;if(window.console,a.children("li").length<1)a.html(e),a.css(c.direction,"0"),l(a,!0);else if(c.duplicate===!0){a.children("li").addClass("old");for(var p=e.length-1;p>=0;p--)o=i(e[p]).data("update"),d=a.find('[data-update="'+o+'"]'),d.length<1?n&&(0===a.find(".ticker-spacer:first-child").length&&a.find(".ticker-spacer").length>0?a.children("li.ticker-spacer").before(e[p]):(h=i(e[p]),p===e.length-1&&h.addClass("last"),a.find("last").after(h),a.find("last").removeClass("last"))):a.find('[data-update="'+o+'"]').replaceWith(e[p]);a.children("li.webticker-init, li.ticker-spacer").removeClass("old"),r&&a.children("li").remove(".old"),f=0,f=t(a),a.width(f+200),a.find("li.webticker-init").length<1&&(c.startEmpty=!1),a.html(e),a.children("li").css("white-space","nowrap"),a.children("li").css("float",c.direction),a.children("li").css("padding","0 7px"),a.children("li").css("line-height",c.height),l(a,!0)}else{a.children("li").addClass("old");for(var u=0;u<e.length;u++)o=i(e[u]).data("update"),d=a.find('[data-update="'+o+'"]'),d.length<1?n&&(0===a.find(".ticker-spacer:first-child").length&&a.find(".ticker-spacer").length>0?a.children("li.ticker-spacer").before(e[u]):(h=i(e[u]),u===e.length-1&&h.addClass("last"),a.find(".old.last").after(h),a.find(".old.last").removeClass("last"))):a.find('[data-update="'+o+'"]').replaceWith(e[u]);a.children("li.webticker-init, li.ticker-spacer").removeClass("old"),a.children("li").css("white-space","nowrap"),a.children("li").css("float",c.direction),a.children("li").css("padding","0 7px"),a.children("li").css("line-height",c.height),r&&a.children("li").remove(".old"),f=0,f=t(a),a.width(f+200)}}a.webTicker("cont")}};i.fn.webTicker=function(t){return d[t]?d[t].apply(this,Array.prototype.slice.call(arguments,1)):"object"!=typeof t&&t?void i.error("Method "+t+" does not exist on jQuery.webTicker"):d.init.apply(this,arguments)}}(jQuery);


$("#cnmunews").webTicker({

height:'44px',

speed:'80', 

duplicate:true,

direction: 'right'

});

</script>

إعدادات الإضافة

الرقم 80 السرعة زده أو قلله بما يناسبك

كلمة right استبدلها بـ left ان اردت تغيير اتجاه حركة الشريط

عدل كلمة آخر الأخبار بما تريد وكذلك عدل هذا اللون الخاص بها ان اردت #fa5555

عدل كلمة Label بإسم القسم الذي تريد جلب المواضيع منه أو قم بإزالة الجزء المعلم بالأخضر ان اردت الجلب من كل المدونة

8تعليقات

تعليقك يساهم في تطوير المحتوى ويزيد من الفائدة بمشاركتنا بأفكارك واقتراحاتك , رأيك يهمنا فساهم بتعليقاتك معنا
يرجى عدم وضع روابط خارجية في التعليقات لضمان نشرها

  1. إنه الإبداع يا استاذ 💥

    ردحذف
    الردود
    1. حبيبي هذا من ذوقك , تسلم يا غالي

      حذف
  2. بارك الله فيك.
    إذا أردت أضافة فاصل بين الاخبار فماهي الطريقة؟

    ردحذف
    الردود
    1. وفيك بارك الله أخي الفاضل
      بالنسبة لسؤالك جرب اضافة الكود التالي للجزء الخاص بالستايل
      #cnmunews li::after {
      content: "|";
      margin: 0 20px 0 10px;
      }
      على ان هذا | هو الفاصل يمكنك استبداله برمز نصي آخر

      حذف
  3. الردود
    1. العفو أخي أحمد , على الرحب والسعة أخي الحبيب

      حذف
  4. الإضافة لا تعمل على قالب رال Vi
    https://www.mrkz-b.com/2024/02/Viral.html

    ردحذف
    الردود
    1. قد يكون تعارض مع أحد الأكواد في القالب , فهذا النوع من الإضافات ليس سهل ان يعمل مع كل القوالب وكلما كان القالب به برمجيات أكثر كلما كان أصعب عمل هذا النوع من الإضافات عليه

      حذف