عرض المشاركات الحديثة في Blogger

Blogger

في هذا المقال، سأوضح لك كيفية عرض المشاركات الحديثة في Blogger باستخدام أكواد وخيارات متنوعة. ستجد كل حيلة تتعلق بالمشاركات الحديثة لـ Blogger في هذا الدرس.

عرض المشاركات الحديثة باستخدام ويدجت Blogger الرسمية

الطريقة الأولى والأسهل لعرض المشاركات الحديثة هي استخدام ويدجت التغذية (Feed Widget) الرسمية من Blogger لعرض المشاركات الحديثة من تغذية المدونة.

انتقل إلى لوحة التحكم التصميم إضافة أداة ويدجت التغذية.
أدخل رابط التغذية (Feed URL) لمدونتك وانقر على متابعة.
قم بتخصيص إعدادات العرض، مثل عدد المشاركات، عنوان الويدجت، وإعدادات أخرى.

ويدجت المشاركات الحديثة باستخدام كود

الويدجت أعلاه يعمل فقط في المناطق المخصصة للويدجت في Blogger. لكن، إليك كيفية إضافة هذه الويدجت إلى أي جزء من مدونتك باستخدام JavaScript.

انتقل إلى لوحة التحكم القالب تحرير HTML.
ابحث عن </head> والصق الكود التالي فوقه مباشرة:


<script style='text/javascript'>
// ----------------------------------------
// SHOW RECENT POSTS 2
// ----------------------------------------
// Original by blogsolute.com
// Mod by madtomatoe.com
// ----------------------------------------

function showrecentposts(json) {
  for (var i = 0; i < numposts; i++) {
    var entry = json.feed.entry[i];
    var posttitle = entry.title.$t;
    var posturl;
    if (i == json.feed.entry.length) break;
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        posturl = entry.link[k].href;
        break;
      }
    }
    posttitle = posttitle.link(posturl);
    var readmorelink = "»»";
    readmorelink = readmorelink.link(posturl);
    var postdate = entry.published.$t;
    var cdyear = postdate.substring(0,4);
    var cdmonth = postdate.substring(5,7);
    var cdday = postdate.substring(8,10);
    var monthnames = new Array();
    monthnames[1] = "Jan"; monthnames[2] = "Feb"; monthnames[3] = "Mar";
    monthnames[4] = "Apr"; monthnames[5] = "May"; monthnames[6] = "Jun";
    monthnames[7] = "Jul"; monthnames[8] = "Aug"; monthnames[9] = "Sep";
    monthnames[10] = "Oct"; monthnames[11] = "Nov"; monthnames[12] = "Dec";
    if ("content" in entry) {
      var postcontent = entry.content.$t;
    } else if ("summary" in entry) {
      var postcontent = entry.summary.$t;
    } else var postcontent = "";
    var re = /<\S[^>]*>/g; 
    postcontent = postcontent.replace(re, "");
    if (!standardstyling) document.write('');
    document.write('<div class="bbrecpost2">');
    document.write('<span>');
    if (standardstyling) document.write('');
    document.write(posttitle);
    if (standardstyling) document.write('');
    if (showpostdate == true) document.write(' - ' + cdday + ' ' + monthnames[parseInt(cdmonth,10)]);
    if (!standardstyling) document.write('<div class="bbrecpostsum">');
    if (standardstyling) document.write('');
    if (showpostsummary == true) {
      if (standardstyling) document.write('');
      if (postcontent.length < numchars) {
         if (standardstyling) document.write('<i>');
         document.write(postcontent);
         if (standardstyling) document.write('</i>');
      } else {
         if (standardstyling) document.write('<i>');
         postcontent = postcontent.substring(0, numchars);
         var quoteEnd = postcontent.lastIndexOf(" ");
         postcontent = postcontent.substring(0,quoteEnd);
         document.write(postcontent + '... ' + readmorelink);
         if (standardstyling) document.write('</i>');
      }
    }
    if (!standardstyling) document.write('</div>');
    document.write('</span>');
    document.write('</div>');
    if (standardstyling) document.write('');
  }
  if (!standardstyling) document.write('<div class="bbwidgetfooter">');
  if (standardstyling) document.write('');
  document.write('');
  if (!standardstyling) document.write('/div');
}
</script>

<script>
var numposts = 25;
var showpostdate = false;
var showpostsummary = true;
var standardstyling = true;
</script>

يمكنك تعديل الأجزاء التالية من الكود:

عدد المشاركات: numposts = 10;
إظهار تاريخ النشر (صواب أو خطأ): showpostdate = false;
إظهار ملخص المشاركة (صواب أو خطأ): showpostsummary = true;
إظهار التنسيق القياسي (صواب أو خطأ): standardstyling = true;

انتقل إلى لوحة التحكم التصميم إضافة أداة HTML/JavaScript، ثم أضف الكود التالي وحفظ الويدجت:


<div class="recent-posts">
<script src='/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts'></script>
</div>

يمكنك أيضًا إضافة الكود أعلاه في أي مكان داخل قالب مدونتك.

المشاركات الحديثة مع شريط التمرير (Scrollbar)

هذه هي الويدجت التي أستخدمها في مدونتي على Blogger. إنها مشابهة للويدجت أعلاه، ولكن مع إضافة بعض تنسيقات CSS!

انتقل إلى لوحة التحكم القالب تحرير HTML.
ابحث عن </head> والصق الكود التالي فوقه (نفس الكود المستخدم في القسم السابق).
ابحث عن ]]></b:skin> وأضف الكود التالي فوقه مباشرة:


div.scrollableContainer {
    width: 270px; 
    border: 1px solid #999;
    overflow: hidden;
}
div.scrollingArea { 
    height: 240px; 
    overflow: auto; 
}
.bbrecpost2 {
    padding: 5px 0 5px 5px;
}
.bbrecpost2 a {
    text-decoration: none;
}

انتقل إلى لوحة التحكم التصميم إضافة أداة HTML/JavaScript، ثم أضف الكود التالي وحفظ الويدجت:


<div class="scrollableContainer">
  <div class="scrollingArea">
    <script src='/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts'></script>
  </div>
</div>

يمكنك أيضًا إضافة الكود أعلاه في أي مكان داخل قالب مدونتك.

المشاركات الحديثة مع الصور المصغرة (Thumbnails)

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

انتقل إلى لوحة التحكم القالب تحرير HTML.
ابحث عن </head> والصق الكود التالي فوقه مباشرة:


<script style='text/javascript'>
function showrecentpostswiththumbs(json) {
  document.write('<ul class="recent_posts_with_thumbs">');
  for (var i = 0; i < numposts; i++) {
    var entry = json.feed.entry[i];
    var posttitle = entry.title.$t;
    var posturl;
    if (i == json.feed.entry.length) break;
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
        var commenttext = entry.link[k].title;
        var commenturl = entry.link[k].href;
      }
      if (entry.link[k].rel == 'alternate') {
        posturl = entry.link[k].href;
        break;
      }
    }
    var thumburl;
    try {
      thumburl = entry.media$thumbnail.url;
    } catch (error) {
      s = entry.content.$t;
      a = s.indexOf("<img");
      b = s.indexOf("src=\"", a);
      c = s.indexOf("\"", b + 5);
      d = s.substr(b + 5, c - b - 5);
      if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {
        thumburl = d;
      } else thumburl = 'http://www.webaholic.co.in/other/no-image.jpg';
    }
    var postdate = entry.published.$t;
    var cdyear = postdate.substring(0, 4);
    var cdmonth = postdate.substring(5, 7);
    var cdday = postdate.substring(8, 10);
    var monthnames = new Array();
    monthnames[1] = "Jan"; monthnames[2] = "Feb"; monthnames[3] = "Mar";
    monthnames[4] = "Apr"; monthnames[5] = "May"; monthnames[6] = "Jun";
    monthnames[7] = "Jul"; monthnames[8] = "Aug"; monthnames[9] = "Sep";
    monthnames[10] = "Oct"; monthnames[11] = "Nov"; monthnames[12] = "Dec";
    document.write('<li class="clearfix">');
    if (showpostthumbnails == true)
      document.write('<img class="recent_thumb" src="' + thumburl + '"/>');
    document.write('<b><a href="' + posturl + '" target="_top">' + posttitle + '</a></b><br>');
    if ("content" in entry) {
      var postcontent = entry.content.$t;
    } else if ("summary" in entry) {
      var postcontent = entry.summary.$t;
    } else var postcontent = "";
    var re = /<\S[^>]*>/g;
    postcontent = postcontent.replace(re, "");
    if (showpostsummary == true) {
      if (postcontent.length < numchars) {
        document.write('<i>');
        document.write(postcontent);
        document.write('</i>');
      } else {
        document.write('<i>');
        postcontent = postcontent.substring(0, numchars);
        var quoteEnd = postcontent.lastIndexOf(" ");
        postcontent = postcontent.substring(0, quoteEnd);
        document.write(postcontent + '...');
        document.write('</i>');
      }
    }
    var towrite = '';
    var flag = 0;
    document.write('<br><strong>');
    if (showpostdate == true) {
      towrite = towrite + monthnames[parseInt(cdmonth, 10)] + '-' + cdday + ' - ' + cdyear;
      flag = 1;
    }
    if (showcommentnum == true) {
      if (flag == 1) {
        towrite = towrite + ' | ';
      }
      if (commenttext == '1 Comments') commenttext = '1 Comment';
      if (commenttext == '0 Comments') commenttext = 'No Comments';
      commenttext = '<a href="' + commenturl + '" target="_top">' + commenttext + '</a>';
      towrite = towrite + commenttext;
      flag = 1;
    }
    if (displaymore == true) {
      if (flag == 1) towrite = towrite + ' | ';
      towrite = towrite + '<a href="' + posturl + '" class="url" target="_top">More -></a>';
      flag = 1;
    }
    document.write(towrite);
    document.write('</strong></li>');
    if (displayseparator == true)
      if (i != (numposts - 1))
        document.write('<hr size=0.5>');
  }
  document.write('</ul>');
}
</script>

<script style='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100;
</script>

يمكنك تعديل الأجزاء التالية من الكود:

عدد المشاركات: numposts = 10;
إظهار الصور المصغرة (صواب أو خطأ): showpostthumbnails = true;
إظهار خيار "المزيد" (صواب أو خطأ): displaymore = false;
إظهار الفاصل (صواب أو خطأ): displayseparator = true;
إظهار عدد التعليقات (صواب أو خطأ): showcommentnum = true;
إظهار تاريخ النشر (صواب أو خطأ): showpostdate = false;
إظهار ملخص المشاركة (صواب أو خطأ): showpostsummary = true;
عدد الأحرف في الملخص: numchars = 100;

ابحث عن ]]></b:skin> وأضف الكود التالي فوقه مباشرة:


img.recent_thumb {
  padding: 1px;
  width: 55px;
  height: 55px;
  border: 0;
  float: left;
  margin: 10px;
}
.recent_posts_with_thumbs {
  float: left;
  width: 100%;
  min-height: 70px;
  margin: 5px 0px 5px 0px;
  padding: 0;
  font-size: 12px;
}
ul.recent_posts_with_thumbs li {
  padding-bottom: 5px;
  padding-top: 5px;
  min-height: 65px;
}
.recent_posts_with_thumbs a {
  text-decoration: none;
}
.recent_posts_with_thumbs strong {
  font-size: 10px;
}

انتقل إلى لوحة التحكم التصميم إضافة أداة HTML/JavaScript، ثم أضف الكود التالي وحفظ الويدجت:


<div class="recent-posts">
<script src='/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>
</div>

يمكنك أيضًا إضافة الكود أعلاه في أي مكان داخل قالب مدونتك.

الخلاصــــة

هذا كل شيء لهذا المقال! أتمنى أن تكون قد وجدت ويدجت المشاركات الحديثة المناسبة لمدونتك على Blogger.

اوعي وشك

استكشف في مدونة أوعي وشك عالم الابتكار

عرض المشاركات الحديثة في Blogger

عرض المشاركات الحديثة باستخدام ويدجت Blogger الرسمية

ويدجت المشاركات الحديثة باستخدام كود

المشاركات الحديثة مع شريط التمرير (Scrollbar)

المشاركات الحديثة مع الصور المصغرة (Thumbnails)

الخلاصــــة

كيف كان المقال؟

إرسال تعليق

الدردشة عبر واتساب

إرسال طلب

مجموعة شاملة لتصاميم العناوين باستخدام CSS

هل يمكن منع الزوار من فحص مصدر موقعك؟ اكتشف الحل الآن

إنشاء زر تنزيل جميل ومثير للإعجاب على بلوجر

تركيب محرر النصوص البرمجية CodeMirror علي مدونتك

الدليل الشامل لإزالة css الافتراضي من بلوجر