10 أبريل 2016

مدون محترف اضافات بلوجر نصائح للمدونين إضافة شريط آخر الأخبار المطور في بلوجر

إضافة شريط آخر الأخبار المطور في بلوجر

في درس سابق لنا قُمنا بالتعرف على اضافة شريط آخر الأخبار المتحرك بشكل احترافي، اليوم سوف نقوم بإضافة نفس الشريط ولكن بطريقة أحترافية أكثر. حيث أنّنا سوف نقوم بتركيب إضافة شريط آخر الأخبار يعرض المقالات على شكل صور مُصغرة.

كيفية إضافة شريط آخر الأخبار المطور في بلوجر يقوم بعرض المواضيع على شكل صور مصغرة.

المُميز بهذا الشريط هو أنّه خفيف على المدونة ولا يقوم بجعلها بطيئة أو ثقيلة اثناء المُتصفح، وظيفته تكون على الشكل التالي، وهي عرض المواضيع على شكل صور مصغرة بجانبها العنوان وتحتها اسم الكاتب وتاريخ نشر المقالات، ويقوم بعرض المقالات التي تم نشرها مؤخرًا في المدونة.


تركيب شريط آخر الأخبار المطور

  1. أولاً قم بالدخول إلى لوحة تحكم بلوجر
  2. توجه إلى قسم قالب
  3. أنقر على تحرير 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}

يُمكنك التعديل على اللون والخط من خلال الكود السابق.
لآن أبحث عن <body> أو </body> وأضف الكود التالي فوقه.
<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
بواسطة

هناك 47 تعليقًا :

  1. غير معرف10 أبريل, 2016

    رائع حبيبي والله إضافة رائعة =e

    ردحذف
  2. يظهر معى الشريط ولكن لا يوجد به اخبار مع انى حطيط رابط المدونه

    ردحذف
    الردود
    1. تأكد من وضع الرابط كما هو موجود في الإضافة
      بدون www و بدون http:// و بدون /

      حذف
  3. إضافة رائعة وجميلة دائما متميز عن غيرك =q =r

    ردحذف
    الردود
    1. شكرًا لك صديقي
      مرورك الرائه والمتميز

      حذف
  4. غير معرف11 أبريل, 2016

    رؤعه ياغالى . تسلم

    ردحذف
  5. أزال أحد مشرفي المدونة هذا التعليق.

    ردحذف
    الردود
    1. نعتذر صديقي لا ننشر روابط إشهار

      حذف
  6. أزال أحد مشرفي المدونة هذا التعليق.

    ردحذف
  7. غير معرف14 أبريل, 2016

    يااخى هوو الشريط ركب تمام ومناسب ومشكور جدا لكن بيعرض موضوعات المعاينة وليست المدونة . رجاء تقوله ازاى اغيره ؟

    ردحذف
    الردود
    1. صديقي غير الرابط كما هو مذكور في الموضوع

      حذف
  8. من فضلك يمكن أن توضح أين سأضع الكود الأخير

    ردحذف
    الردود
    1. يُمكنك وضع الكود في المكان الذي تريده صديقي

      حذف
  9. أزال أحد مشرفي المدونة هذا التعليق.

    ردحذف
    الردود
    1. نعتذر لمسح التعليق
      ولكن عمل الحسابات المصرية أصبح شيء شبه مستحيل
      لذلك قم بعمل حساب ادسنس امريكي أفضل لك

      حذف
  10. السلام عليكم كيف حالك اخي منير لدي استفسار يالغالي واتمنى ان اجد لديك الجواب الشافي مشكلة بقالب مدونتي اختفاء القائمة العلوية ليست الثانية بل العلوية بمدونتي وجميع المدونات اللتي تحمل نفس القالب... مالمشكلة برأيك ؟

    ردحذف
    الردود
    1. وعليكم السلام
      لاحظت هذه المشكلة تقريبًا هي بسبب ملفات الجافا سكريبت المرفوعة على الإستضافات
      جرب ابحث عن ملف القائمة وارفعه على جوجل درايف

      حذف
    2. إن شاء الله سوف اقوم بطرح حل للمشكلة في الغد لجميع القوالب

      حذف
  11. أخي انا اريد ان تظهر اخر الأخبار من قسم معين (محدد) فكيف ذلك ؟

    ردحذف
    الردود
    1. جرب وضع رابط القسم بدون أي بروتوكول مثل http او https
      إذا لم يظهر إذًا لا يُمكنك

      حذف
  12. مرحبا اخي هل حملة شاركنا لندعمك مازالة مستمرة اريد ان اشارك

    ردحذف
    الردود
    1. نعم صديقي مازالت مستمرة
      ولكن يرجى قراءة الشروط جيدًا

      حذف
  13. غير معرف13 مايو, 2016

    تسلم ايدك صديقى الغالى منير دام ابداعك

    ردحذف
  14. شكرا لك على الموضوع الرائع و نقدرك على مجهوداتك الممتازة
    عندي استفسار بسيط لأنني مبتدأ :
    ماذا تعني بضع الكود فوقه هل يعني تمسحه و تضعه مكانه ، أم قبله ، أم بعده ؟

    ردحذف
    الردود
    1. لا شكر على واجب
      لا لا نقوم بمسحه بل بوضع الكود فوقه مثال

      moneer" الكود الذي يجب وضعه فوق
      مولوع" الكود الموجو في القالب

      أتمنى أن اكون فهمتني بمعنى يجب وضع الكود قبله وليس بعده

      حذف
  15. يعني احطوا في ال html ولا احطوا في الأضافات العادية الي هوا الكودالي ممكن نحطه بأي مكان

    وشكرا علي الموضوع

    ردحذف
    الردود
    1. يُفضل في HTML ومن أجل التحكم بالمكان

      حذف
    2. طيب فين فال HTML

      حذف
    3. في المكان الي تريديه
      مثلًا ممكن ينحط تحت اكواد القوائم

      حذف
  16. يظهر معى الشريط ولكن لا يوجد به اخبار مع انى حطيط رابط المدونه بدون \ او http او www

    ردحذف
    الردود
    1. جرب استبدال h3 بـ h2 في كود جافا

      حذف
  17. رووعه تسلم ايدك =r

    ردحذف
  18. =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r تسلمممممممممممممممممممم

    ردحذف
    الردود
    1. =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r

      حذف
  19. أزال أحد مشرفي المدونة هذا التعليق.

    ردحذف
    الردود
    1. يُمكن فعل ذلك من خلال إضافة width
      ونعتذر لمسح التعليق بسبب الرابط
      إذا لم تعرف قم بوضع رابط مدونتك حتى اقول لك اين تضع الكود
      ورمضان كريم

      حذف
  20. كلش طلع صحيح لكن الشريط فارغ ما في اخبار كيف الحل اخي و شكرا

    ردحذف
  21. اخى نفذت كل حاجة تمام زى ما قولت من غير اى حاجة وبردو الاخبار مش بتظهر

    ردحذف
    الردود
    1. جرب استبدال h3 بـ h2 أو h1 في كود جافا الثاني

      حذف

يسعدنا تفاعلكم بالتعليق , لكن يرجى مراعاة الآداب العامة وعدم نشر روابط إشهار حتى ينشر التعليق , ويمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود. اولا تضع الـ = بعدها الحرف الخاص بالإبتسامة
=q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r