تاريخ التسجيل: Feb 2019
العمر: 38
المشاركات: 1,149
التقييم: 10
|
تاريخ التسجيل: Feb 2019
العمر: 38
المشاركات: 1,149
التقييم: 10
تعرف علي طريقة إضافة شريط الأخبار العاجلة في مدونات بلوجر
ربما قد لاحض البعض منكم أن عدة مدونات عربية وأجنبية قد بدأت تضع شريط علوي يضهر أخر المقالات والتدوينات هذا الشريط مهم لبعض المدونات بحيث يعرض تدوينة جديدة في كل ثانية وهذا قد يساعد زوار المدونة في التعرف على تدوينات قديمة ، وهذا سيساعد في قدم مدونتك في الترتيب على ألكسا لأن الزائر سيبقى مدة أطول
# إفتح قالب مدونتك إبحث عن ]]></b:skin> أو </style> وأضف الكود التالي قبله /* 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-left:5px solid #3cc091}
.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;overflow:hidden;background:#fe fefe;text-align:left}
#ticker ul{padding:0;margin:0;list-style:none}
#ticker ul li{height:45px;white-space:nowrap}
#ticker ul li img{float:left;width:35px;height:35px;margin:5px 7px 5px 5px}
#ticker ul li h3{margin:0;font:700 16px 'roboto',sans-serif}
#ticker ul li h3 a{color:#333;text-decoration:none;line-height:25px!important}
#ticker ul li .tickermeta{font:400 13px 'roboto',sans-serif;line-height:20px!important;color:#999} # بعد إضافة الكود فوق إبحث عن </body> وأضف قبله هذا <script type='text/javascript'>
//<![CDATA[
// Breaking News ticker
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.substrin g(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.pub lished.$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()}!functio n(t){var e={speed:700,pause:4e3,showItems:1,mousePause:!0,h eight:0,animate:!0,margin:0,padding:0,startPaused: !1},i={moveUp:function(t,e){i.animate(t,e,"up")},m oveDown:function(t,e){i.animate(t,e,"down")},anima te:function(e,i,a){var n=e.itemHeight,r=e.options,s=e.element,l=s.childre n("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.chil dren("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).childre n(o).remove(),t(l).css("top","0px"),e.animating=!1 ,s.trigger("vticker.afterTick")})}else l.children(o).remove(),l.css("top","0px"),s.trigge r("vticker.afterTick");"up"===a&&u.appendTo(l)},ne xtUsePause: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=setInt erval(function(){i.nextUsePause.call(a)},e.options .pause)},stopInterval:function(){var e=t(this).data("state");e&&(e.intervalId&&clearInt erval(e.intervalId),e.intervalId=void 0)},restartInterval:function(){i.stopInterval.call (this),i.startInterval.call(this)}},a={init:functi on(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,an imating:!1,options:n,isPaused:n.startPaused?!0:!1, pausedByCode:!1};t(this).data("state",s),r.css({ov erflow:"hidden",position:"relative"}).children("ul ").css({position:"absolute",margin:0,padding:0}).c hildren("li").css({margin:n.margin,padding:n.paddi ng}),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.mo usePause&&r.bind("mouseenter",function(){!0!==s.is Paused&&(s.pausedByCode=!0,i.stopInterval.call(l), a.pause.call(l,!0))}).bind("mouseleave",function() {(!0!==s.isPaused||s.pausedByCode)&&(s.pausedByCod e=!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)ret urn!1;i.isPaused=e,i=i.element,e?(t(this).addClass ("paused"),i.trigger("vticker.pause")):(t(this).re moveClass("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("stat e")&&i.stopInterval.call(this)},remove:function(){ var e=t(this).data("state");e&&(i.stopInterval.call(th is),e=e.element,e.unbind(),e.remove())}};t.fn.vTic ker=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)}}(jQ uery),$(function(){var t=document.createElement("script");t.src="http://"+$(".ticker-wrap").data("domain")+"/feeds/posts/summary?alt=json&callback=arlinadesignTicker",t.ty pe="text/javascript",document.getElementsByTagName("body")[0].appendChild(t)});
//]]>
</script> # بعد ذالك أضف الكود الموجود تحت بين <body> و </body> <div class='ticker-wrap' data-domain='3arabiy.com'>
<div id='ticker'>
</div>
</div>
|