في درس سابق لنا قُمنا بالتعرف على اضافة شريط آخر الأخبار المتحرك بشكل احترافي، اليوم سوف نقوم بإضافة نفس الشريط ولكن بطريقة أحترافية أكثر. حيث أنّنا سوف نقوم بتركيب إضافة شريط آخر الأخبار يعرض المقالات على شكل صور مُصغرة.
المُميز بهذا الشريط هو أنّه خفيف على المدونة ولا يقوم بجعلها بطيئة أو ثقيلة اثناء المُتصفح، وظيفته تكون على الشكل التالي، وهي عرض المواضيع على شكل صور مصغرة بجانبها العنوان وتحتها اسم الكاتب وتاريخ نشر المقالات، ويقوم بعرض المقالات التي تم نشرها مؤخرًا في المدونة.
تركيب شريط آخر الأخبار المطور
- أولاً قم بالدخول إلى لوحة تحكم بلوجر
- توجه إلى قسم قالب
- أنقر على تحرير HTML
أبحث عن ]]></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-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 '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 'droid arabic kufi',sans-serif;line-height:20px!important;direction:rtl;color:#999}
يُمكنك التعديل على اللون والخط من خلال الكود السابق.
لآن أبحث عن
<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>
الآن الكود الأخير وهو من أجل ظهور شريط الأخبار، هذا الكود يُمكنك وضعه في المكان الذي تريده على حسب ما تجده مُناسب.
من أجل أنّ تظهر المواضيع قم بتغيير رابط aegygeek.com برابط مدونتك.
<div class='ticker-wrap' data-domain='aegygeek.com'>
<div id='ticker'>
</div>
</div>
الآن قم بحفظ القالب ومبروك عليك الإضافة.
إذا كان يوجد أي مشاكل في الإضافة أتمنى ذكرها ضمن التعليقات.
إضافة شريط آخر الأخبار المطور في بلوجر
4
/
5
بواسطة
مدون محترف
رائع حبيبي والله إضافة رائعة =e
ردحذفشكرًا لك صديقي مرورك الرائع =r
حذفالعفو صديقي
حذفيظهر معى الشريط ولكن لا يوجد به اخبار مع انى حطيط رابط المدونه
ردحذفتأكد من وضع الرابط كما هو موجود في الإضافة
حذفبدون www و بدون http:// و بدون /
إضافة رائعة وجميلة دائما متميز عن غيرك =q =r
ردحذفشكرًا لك صديقي
حذفمرورك الرائه والمتميز
رؤعه ياغالى . تسلم
ردحذفشكرًا لك صديقي
حذفمرورك الروعة
أزال أحد مشرفي المدونة هذا التعليق.
ردحذفنعتذر صديقي لا ننشر روابط إشهار
حذفأزال أحد مشرفي المدونة هذا التعليق.
ردحذفلا ننشر روابط إشهار
حذفيااخى هوو الشريط ركب تمام ومناسب ومشكور جدا لكن بيعرض موضوعات المعاينة وليست المدونة . رجاء تقوله ازاى اغيره ؟
ردحذفصديقي غير الرابط كما هو مذكور في الموضوع
حذفمن فضلك يمكن أن توضح أين سأضع الكود الأخير
ردحذفيُمكنك وضع الكود في المكان الذي تريده صديقي
حذفأزال أحد مشرفي المدونة هذا التعليق.
ردحذفنعتذر لمسح التعليق
حذفولكن عمل الحسابات المصرية أصبح شيء شبه مستحيل
لذلك قم بعمل حساب ادسنس امريكي أفضل لك
السلام عليكم كيف حالك اخي منير لدي استفسار يالغالي واتمنى ان اجد لديك الجواب الشافي مشكلة بقالب مدونتي اختفاء القائمة العلوية ليست الثانية بل العلوية بمدونتي وجميع المدونات اللتي تحمل نفس القالب... مالمشكلة برأيك ؟
ردحذفوعليكم السلام
حذفلاحظت هذه المشكلة تقريبًا هي بسبب ملفات الجافا سكريبت المرفوعة على الإستضافات
جرب ابحث عن ملف القائمة وارفعه على جوجل درايف
إن شاء الله سوف اقوم بطرح حل للمشكلة في الغد لجميع القوالب
حذفأخي انا اريد ان تظهر اخر الأخبار من قسم معين (محدد) فكيف ذلك ؟
ردحذفجرب وضع رابط القسم بدون أي بروتوكول مثل http او https
حذفإذا لم يظهر إذًا لا يُمكنك
مرحبا اخي هل حملة شاركنا لندعمك مازالة مستمرة اريد ان اشارك
ردحذفنعم صديقي مازالت مستمرة
حذفولكن يرجى قراءة الشروط جيدًا
q
ردحذف=q
حذفتسلم ايدك صديقى الغالى منير دام ابداعك
ردحذفشكرًا لك صديقي
حذفشكرا لك على الموضوع الرائع و نقدرك على مجهوداتك الممتازة
ردحذفعندي استفسار بسيط لأنني مبتدأ :
ماذا تعني بضع الكود فوقه هل يعني تمسحه و تضعه مكانه ، أم قبله ، أم بعده ؟
لا شكر على واجب
حذفلا لا نقوم بمسحه بل بوضع الكود فوقه مثال
moneer" الكود الذي يجب وضعه فوق
مولوع" الكود الموجو في القالب
أتمنى أن اكون فهمتني بمعنى يجب وضع الكود قبله وليس بعده
يعني احطوا في ال html ولا احطوا في الأضافات العادية الي هوا الكودالي ممكن نحطه بأي مكان
ردحذفوشكرا علي الموضوع
يُفضل في HTML ومن أجل التحكم بالمكان
حذفطيب فين فال HTML
حذففي المكان الي تريديه
حذفمثلًا ممكن ينحط تحت اكواد القوائم
يظهر معى الشريط ولكن لا يوجد به اخبار مع انى حطيط رابط المدونه بدون \ او http او www
ردحذفجرب استبدال h3 بـ h2 في كود جافا
حذفرووعه تسلم ايدك =r
ردحذفمرورك الروعة =e
حذف=w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r تسلمممممممممممممممممممم
ردحذف=s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r
حذفأزال أحد مشرفي المدونة هذا التعليق.
ردحذفيُمكن فعل ذلك من خلال إضافة width
حذفونعتذر لمسح التعليق بسبب الرابط
إذا لم تعرف قم بوضع رابط مدونتك حتى اقول لك اين تضع الكود
ورمضان كريم
كلش طلع صحيح لكن الشريط فارغ ما في اخبار كيف الحل اخي و شكرا
ردحذفاخى نفذت كل حاجة تمام زى ما قولت من غير اى حاجة وبردو الاخبار مش بتظهر
ردحذفجرب استبدال h3 بـ h2 أو h1 في كود جافا الثاني
حذفيسعدنا تفاعلكم بالتعليق , لكن يرجى مراعاة الآداب العامة وعدم نشر روابط إشهار حتى ينشر التعليق , ويمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود. اولا تضع الـ = بعدها الحرف الخاص بالإبتسامة
=q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r