شرح كيفية إضافة شريط أخبار متحرك وإحترافي على مدونة بلوجر

تعد إضافة شريط الأخبار على مدونة بلوجر من بين أهم الإضافات المحبذ إدراجها على المدونة للدور الهام التي تلعبه الإضافة من حيث جلب الزوار ولفت إنتباههم عند عرض لٱخر المستجدات والتدوينات من جهة ومن جهة أخرى حركة العرض الإنسيابية بفضل خاصية JQUERY ما يعطي شكل جذاب للمدونة

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

طريقة تركيب الإضافة:
بعد تسجيل الدخول لمدونتك نختار قالب مع أخذ نسخة إحتياطية للقالب ثم تحريرHTML
الخطوة الأولى:
1- نبحث عن الكود أسفله

]]></b:skin>

2- ننسخ الكود التالي ونلصقه فوق الكود أعلاه

/* CSS News Ticker */ .ticker-wrap{display:block;text-align:center;margin:0 20px 20px 20px;padding:2px;background:#fefefe;border:1px solid rgba(0,0,0,0.1);border-right:5px solid #D03F42} .ticker-wrap>span{display:inline-block;background:#fefefe;padding:0;font:700 13px 'roboto',sans-serif} .ticker-wrap>span>a{color:#222;text-decoration:none} #ticker{height:45px;direction:rtl;overflow:hidden;background:#fefefe;text-align:right} #ticker ul{direction:rtl;padding:0;margin:0;list-style:none} #ticker ul li{height:45px;direction:rtl;white-space:nowrap} #ticker ul li img{float:right;direction:rtl;width:35px;height:35px;margin:5px 5px 5px 7px} #ticker ul li h3{margin:0;direction:rtl;font:700 12px 'mahdi-font',droid arabic kufi,sans-serif} #ticker ul li h3 a{color:#333;direction:rtl;text-decoration:none;line-height:25px!important} #ticker ul li .tickermeta{font:700 12px 'mahdi-font', droid arabic kufi,sans-serif;line-height:20px!important;direction:rtl;color:#999}

الخطوة الثانية:
1- نبحث عن الكود أسفله

</body>

2- ننسخ الكود التالي ونلصقه فوق الكود أعلاه

<script type='text/javascript'> //<![CDATA[ // Breaking News ticker by http://mudwnp.blogspot.com/ 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]="يناير",e[2]="فبراير",e[3]="مارس",e[4]="أبريل",e[5]="مايو",e[6]="يونيو",e[7]="يوليو",e[8]="أغسطس",e[9]="سبتمبر",e[10]="أكتوبر",e[11]="نوفمبر",e[12]="ديسمبر";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 arlinadesignTicker(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="tickermeta"> <span>'+c+"</span> - <span>"+d+"</span></div> </li> "}a+="</ul> ",e.innerHTML=a}$("#ticker").vTicker()}!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("vticker.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("vticker.afterTick")})}else l.children(o).remove(),l.css("top","0px"),s.trigger("vticker.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("vticker.pause")):(t(this).removeClass("paused"),i.trigger("vticker.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.vTicker=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.vTicker"):a.init.apply(this,arguments)}}(jQuery),$(function(){var t=document.createElement("script");t.src="http://"+$(".ticker-wrap").data("domain")+"/feeds/posts/summary?alt=json&callback=arlinadesignTicker",t.type="text/javascript",document.getElementsByTagName("body")[0].appendChild(t)}); //]]> </script>

الخطوة الثالثة:
- إختيار موضع الإضافة غالبا تكون أسفل قائمة التسميات أو في أعلى الهيدر
- إضافة الكود في القالب نبحث عن معرف قائمة التسميات بإستعمال خاصية للمتصفح 'inspect element'مثلا المعرف الخاص بقائمة التسميات لمدونتي هو'b-menu'
- ننسخ الكود أسفله ونلصقه في الموضع المختار مثلا أسفل الناف بار'nav-bar'

<div class='ticker-wrap' data-domain='otage79.blogspot.com/'> <div id='ticker'> </div> </div>

- يمكنك إضافة هذا الكود في التخطيط بإضافة أداة java/scriptفوق الرسائل الإلكترونية
طريقة التعديل على الإضافة:
* اللون الأحمر في الكود الأول إستبدل هذا اللون #D03F42  باللون الخاص بك
* خط الإضافة في الكود الأول #ticker ul li .tickermeta
* استبدل هذا الرابط  'otage79.blogspot.com'  بالرابط الخاص بك في الكود الثالث

أرجو أن تكونوا قد إستفدتوا

بقلمAbdel ben

مدون شغوف أعشق التدوين المعلوماتي ، والإطلاع على آخر مستجدات التقنية وعالم الأنترنت ..أقدم أخبارا تقنية أولا بأول في مجال الهواتف الذكية والشبكات الإجتماعية

شارك الموضوع

مواضيع قد تهمك