لايمكن ان نستغني عن الأخبار الحصرية والجديدة حيث قد لاتجد موقع أخباري يخلو من الشريط الأخباري بسبب النشر المكثف للمقالات,حيث في تدوينة اليوم سوف نتكلم حول طريقة وضع شريط أخباري لمدونات بلوجر بشكل أحترأفي ومجرب مني شخصيأ والذي قمت بتركيب أضافة شريط الأخبار على أحدى مدوناتي وقررت مشاركتها معكم.
يعتبر هذه المقال حصريأ لأن الأضافة قد لاتجدها مشروح كثيرأ,يعتبر الشريط المتحرك أحترأفي كليأ حيث يقوم بعرض ملخص للموضوع أو المقال الخاص بك على شكل متحرك الى جانبها صورة مصغرة عن الموضوع بشكل جديد كليأ.
طريقة تركيب الأداة
1-توجة الى لوحة التحكم في بلوجر وأختر "المظهر" ثم أنقر تحرير HTML
2- قم بالبحث عن كود ]]></b:skin>
3-قم بنسخ ولصق الكود التالي فوق كود أو وسم ]]></b:skin>
/* CSS Breaking News Ticker */
.bsd-ticker{display:block;text-align:center;margin:0 20px 20px 20px;padding:3px;background:#fefefe;border:1px solid rgba(0,0,0,0.1);border-right:5px solid #415471}
.bsd-ticker>span{display:inline-block;background:#415471;padding:0;font:700 12px 'roboto',sans-serif}
.bsd-ticker>span>a{color:#222;text-decoration:none}
#ticker{height:46px;overflow:hidden;background:#ffffff;text-align:left}
#ticker ul{padding:0;margin:0;list-style:none}
#ticker ul li{height:46px;white-space:nowrap}
#ticker ul li img{float:right;width:36px;height:36px;margin:5px 7px 5px 5px}
#ticker ul li h3{margin:0;font:700 16px 'roboto',sans-serif}
#ticker ul li h3 a{color:#666;text-decoration:none;line-height:26px!important}
#ticker ul li .authorticker{font:400 12px 'roboto',sans-serif;line-height:21px!important;color:#666}
4-أضغط على حفظ القالب
5-قم بالتوجة الى التخطيط وقم بأضافة أداة ثم أضافة HTML/Java Script وقم بنسخ ولصق الكود التالي في الأداة وقم بعملية الحفظ وشاهد النتيجة النهائية بنفسك.
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script>
// 2016 Breaking News ticker by AliDZ
function getauthor(t){for(var e=0;e<t.length;e++)var i=t[e].name.$t;return i}function getmeta(t){var e=[];e[1]="Jan",e[2]="Feb",e[3]="Mar",e[4]="Apr",e[5]="May",e[6]="Jun",e[7]="Jul",e[8]="Aug",e[9]="Sep",e[10]="Oct",e[11]="Nov",e[12]="Dec";var i=t.substring(0,4),a=t.substring(5,7),n=t.substring(8,10),r=e[parseInt(a,10)]+" "+n+" "+i;return r}function bloggersstandticker(t){var e=document.querySelector("#ticker"),i=t.feed.entry,a="<ul id='ticket-wrapper-inner'>";if(i){for(var n=0;n<i.length;n++){for(var r=i[n],s=0;s<r.link.length;s++)if("alternate"==r.link[s].rel){var l=r.link[s].href;break}try{var o='<img src="'+r.media$thumbnail.url+'"/>'}catch(t){var o=""}var u=r.title.$t,c=getauthor(r.author),d=getmeta(r.published.$t);a+="<li>"+o+'<h3><a href="'+l+'">'+u+'</a></h3><div class="authorticker"><span>'+c+"</span> - <span>"+d+"</span></div></li>"}a+="</ul>",e.innerHTML=a}$("#ticker").bsdticker()}!function(t){var e={speed:700,pause:4e3,showItems:1,mousePause:!0,height:0,animate:!0,margin:0,padding:0,startPaused:!1},i={moveUp:function(t,e){i.animate(t,e,"up")},moveDown:function(t,e){i.animate(t,e,"down")},animate:function(e,i,a){var n=e.itemHeight,r=e.options,s=e.element,l=s.children("ul"),o="up"===a?"li:first":"li:last";s.trigger("bsdticker.beforeTick");var u=l.children(o).clone(!0);if(0<r.height&&(n=l.children("li:first").height()),n+=r.margin+2*r.padding,"down"===a&&l.css("top","-"+n+"px").prepend(u),i&&i.animate){if(e.animating)return;e.animating=!0,l.animate("up"===a?{top:"-="+n+"px"}:{top:0},r.speed,function(){t(l).children(o).remove(),t(l).css("top","0px"),e.animating=!1,s.trigger("bsdticker.afterTick")})}else l.children(o).remove(),l.css("top","0px"),s.trigger("bsdticker.afterTick");"up"===a&&u.appendTo(l)},nextUsePause:function(){var e=t(this).data("state"),i=e.options;e.isPaused||2>e.itemCount||a.next.call(this,{animate:i.animate})},startInterval:function(){var e=t(this).data("state"),a=this;e.intervalId=setInterval(function(){i.nextUsePause.call(a)},e.options.pause)},stopInterval:function(){var e=t(this).data("state");e&&(e.intervalId&&clearInterval(e.intervalId),e.intervalId=void 0)},restartInterval:function(){i.stopInterval.call(this),i.startInterval.call(this)}},a={init:function(n){a.stop.call(this);var r=jQuery.extend({},e);n=t.extend(r,n);var r=t(this),s={itemCount:r.children("ul").children("li").length,itemHeight:0,itemMargin:0,element:r,animating:!1,options:n,isPaused:n.startPaused?!0:!1,pausedByCode:!1};t(this).data("state",s),r.css({overflow:"hidden",position:"relative"}).children("ul").css({position:"absolute",margin:0,padding:0}).children("li").css({margin:n.margin,padding:n.padding}),isNaN(n.height)||0===n.height?(r.children("ul").children("li").each(function(){var e=t(this);e.height()>s.itemHeight&&(s.itemHeight=e.height())}),r.children("ul").children("li").each(function(){t(this).height(s.itemHeight)}),r.height((s.itemHeight+(n.margin+2*n.padding))*n.showItems+n.margin)):r.height(n.height);var l=this;n.startPaused||i.startInterval.call(l),n.mousePause&&r.bind("mouseenter",function(){!0!==s.isPaused&&(s.pausedByCode=!0,i.stopInterval.call(l),a.pause.call(l,!0))}).bind("mouseleave",function(){(!0!==s.isPaused||s.pausedByCode)&&(s.pausedByCode=!1,a.pause.call(l,!1),i.startInterval.call(l))})},pause:function(e){var i=t(this).data("state");if(i){if(2>i.itemCount)return!1;i.isPaused=e,i=i.element,e?(t(this).addClass("paused"),i.trigger("bsdticker.pause")):(t(this).removeClass("paused"),i.trigger("bsdticker.resume"))}},next:function(e){var a=t(this).data("state");if(a){if(a.animating||2>a.itemCount)return!1;i.restartInterval.call(this),i.moveUp(a,e)}},prev:function(e){var a=t(this).data("state");if(a){if(a.animating||2>a.itemCount)return!1;i.restartInterval.call(this),i.moveDown(a,e)}},stop:function(){t(this).data("state")&&i.stopInterval.call(this)},remove:function(){var e=t(this).data("state");e&&(i.stopInterval.call(this),e=e.element,e.unbind(),e.remove())}};t.fn.bsdticker=function(e){return a[e]?a[e].apply(this,Array.prototype.slice.call(arguments,1)):"object"!=typeof e&&e?void t.error("Method "+e+" does not exist on jQuery.bsdticker"):a.init.apply(this,arguments)}}(jQuery),$(function(){var t=document.createElement("script");t.src="https://bloggersinarabic.blogspot.com"+$(".bsd-ticker").data("domain")+"/feeds/posts/summary?alt=json&callback=bloggersstandticker",t.type="text/javascript",document.getElementsByTagName("body")[0].appendChild(t)});
</script>
<div class='bsd-ticker' data-domain=''>
<div id='ticker'>
</div>
</div>
*قم بتغيير رابط https://bloggersinarabic.blogspot.com الى رابط المدونة الخاصة بك ولاتنسى المشاركة والتعليق لكي تحفزنأ أكثر. 
0 تعليق
إرسال تعليق