اضافة اخر المشاركات مع ترقيم المشاركات وإقرأ المزيد بشكل مرتب recent posts

فى احدى الدروس من قسم دروس بلوجر وضعت لكم اخر تدوينة من خصائص اخر المشاركات وهى : اضافة اخر المواضيع مع مصغرات الصور وعناوين المواضيع ADD RECENT POST . فاليوم ساضع لكم اضافة اعتقد بانها ستعجب الجميع من حيث شكلها الرائع وخفتها على المدونة فهذه الاضافة تحتوى على عنوان التدوينة ومقتطفات من المشاركة والاجمل يوجد بها خاصية اقراء المزيد او اكمل القراءة كما تسميها انت واخيرا خاصية ترقيم المشاركات . هذه الاضافة رأيتها بأحدى المدونات الأجنبية فأعجبتنى كثيرا بعد تجربتها على مدونة تجريبية فأحببت ان اضعها بين ايديكم بعد التعديل عليها . اهم التعديلات الذى قمت به هو وضع الكود بالكامل بالاضافة بدون ملفات جافا حتى تظل متواجدة بمدونتك مدى الحياة فأنت الوحيد الذى بأمكانك ان تحذفها فى اى وقت .

كيفية تركيب الأضافة بمدونتك :

 اذهب لوحة التحكم ثم الى التخطيط وقم بأضافة اداء جديدة واختار HTML/Java Script

اضف هذا الكود بداخلة :

<div class="recentpoststyle">
<script type='text/javascript'>
//<![CDATA[
function showlatestposts(json) {
  for (var i = 0; i < posts_no; 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 showyear = postdate.substring(0,4);
    var showmonth = postdate.substring(5,7);
    var showday = 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, "");
 document.write('<li class="recent-post-title">');
    document.write(posttitle);
 document.write('</li><div class="recent-post-summ">');
    if (post_summary == true) {
      if (postcontent.length < summary_chars) {
         document.write(postcontent);
}
      else {
         postcontent = postcontent.substring(0, summary_chars);
         var quoteEnd = postcontent.lastIndexOf(" ");
         postcontent = postcontent.substring(0,quoteEnd);
         document.write(postcontent + ' ' + readmorelink);
}
}
 document.write('</div>');
if (posts_date == true) document.write('<div class="post-date">' + monthnames[parseInt(showmonth,10)] + ' ' + showday + ' ' + showyear + '</div>');
}
}
//]]>
</script>
<script>
var posts_no = 5;var posts_date = true;var post_summary = true;var summary_chars = 80;</script>
<script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestposts">
</script><a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://hadystore.blogspot.com/" rel="nofollow">Hadystore</a>
<noscript>Your browser does not support JavaScript!</noscript>
<style type="text/css">
.recentpoststyle {counter-reset: countposts;list-style-type: none;}
.recentpoststyle a {text-decoration: none; color: #49A8D1;}
.recentpoststyle a:hover {color: #000;}
.recentpoststyle li:before {content: counter(countposts,decimal);counter-increment: countposts;float: left;z-index: 2;position:relative;font-size: 20px;font-weight: bold;color: #fff;background: #69B7E2; margin: 15px 5px 0px -6px; padding: 0px 10px; border-radius: 100%;}
li.recent-post-title { padding: 5px 0px;}
.recent-post-title { font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;}
.recent-post-title a {color: #444;font-size: 13px; text-decoration: none; padding: 2px; font-weight: bold;}
.post-date {padding: 5px 2px 5px 30px; font-size: 11px; color: #999; margin-bottom: 5px;}
.recent-post-summ { border-left: 1px solid #69B7E2; color: #777; padding: 0px 5px 0px 20px; margin-left: 11px; font-family: Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif; font-size: 15px;}
</style></div>

بالاخير اضغط على حفظ
اتجة الان الى الصفحة الرئيسية للمدونة لتشاهد النتيجة :

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