Add the latest news to blog blogger bar
السلام عليكم ورحمة الله و بركاته متتبعي برامج انترنت و اخبارك
نت أهلا بكم في هذا الموضوع الذي
يخص ادوات بلوجر .....
اضافة شريط آخر الاخبار لمدونة بلوجر :
شريط
آخر الاخبار لمدونة بلوجر هو عبارة عن شريط يظهر آخر المدونات بعناوينها التي قمنا
بادراجها في المدونة ... أي انه يظهر لنا آخر اخبار التدوينات التي قمنا بنشرها
على المدونة .... و في هذا الموضوع سنتناول الى شريط متطور و به تحسينات جد رائعة
و مميزات جديدة ....
تركيب شريط ىخر الاخبار:
1. من القالب المدونة
نختار كود HTML
ثم من لوحة التحكم ننقر على Ctrl + F ليظهر لنا شريط البحث داخل الكود القالب ننسخ
العبارة التالية: ابحث عن ]]></b:skin> و لما تظهر لنا
نختار المكان الذي فوق هذا الكود مباشرتا ثم ضع الكود التالي فوقه
.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 #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;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 'Noto Naskh Arabic',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 'Not
2.من كود HTML لقالب
المدونة نقوم بالبحث عن الوسم </body> ضع الكود التالي فوق الوسم </body>
<script type='text/javascript'>
//<![CDATA[
// Breaking News ticker by arlinadzgn
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>
3.
في هذه الخطوة التي تخص كود HTML الذي يُظهر الشريط يمكنك وضعه بأي مكان يناسبك تحت الهيدر او
فوق القائمة .... إلخ أو يمكنك تجربته بوضعه في أداة Html/Javascript إذا كانت المساحة متواجدة بالتخطيط
و
الكود هو كما يلي :
<div class='ticker-wrap' data-domain='www.net-progg.blogspot.com'>
<div id='ticker'>
</div>
</div>
في الكود
الأخير غير 'www.net-progg.blogspot.com' برابط موقعك
* لتغيير لون البوردر فهو محدد بالبرتقالي في الكود الأول #3 cc091
-------------------------------------
حمل كتاب انشاء
مدونة بلوجر Blogger من
الصفر حتى الاحتراف من هنا
الى هنا نكون قد قدمنا لكم هذا
الوضوع ليكون اضافة في سرح المعرفة اتمنى ان يكون في متناول الجميع ....
اذا واجهتك أي مشكل او تسائل
ضعه في تعليق اسفل الموضوع و سنجيبكم على كل التسائلات باذن الله ....
ان اعجبك الموضوع لا تنسى بمتابعتنا
بالنقر على متابعة بالبريد الالكتروني في اسفل الموضوع حتى يصلكم كل جديد في برامج
انترنت و اخبارك نت
يمكنكم
متابعة ايضا المواقع التالية كمصدر لاهم المعلومات .....
زورو المواقع التالية
|
|
|
|
|
|
|
|
|
والب بلوجر، قوالب ووردبريس، إضافات بلوجر، ملحقات
فوتوشوب، شروحات
ليست هناك تعليقات