طريقة تركيب رسائل أحدث واقدم فوق التعليقات في مدونة بلوجر بشكل مطور حديث حصرياً

اليوم سوف أشرح لكم طريقة تركيب رسائل أحدث وأقدم بشكل مطور وحديث المعاينة كما  هي في هذه المدونة يمكنك النزول أسفل التدوينة هذه ومشاهدتها

مميزات هذه الإضافة:
شكل سلس وحديث
إظهار المواضيع الأقدم أسفل كلمة رسائل أقدم وإظهار رسائل أحدث أسفل كل كلمة {سائل أحدث
زيادة نسبة مشاهدات مدونتك إذا كانت شيقة فعلاً


لن أطيل عليكم في المقدمات والأهداف من هذه الإضافة المطورة

كيف تقوم بتركيبها على مدونتك؟ الشرح:
تحذير: الرجاء أخذ نسخة إحتياطية من قالب مدونتك قبل العمل


أولاً أذهب إلى لوحة التحكم في مدونتك blogger.com
ثانياً أختر القالب ثم أضغط على تحرير html
ثالثا بإستخدام مفاتيح الإختصار في كمبيوترك ctrl و f إبحث عن الرمز 
]]></b:skin>
إذا كنت لا تعرف كيف تجد الرموز داخل قالب مدونتك يمكنك مشاهدة هذه الصورة التوضيحية أو مشاهدة هذه التدوينة لكيفية البحث عن الاكواد داخل قالب مدونتك
بعد العثور على الرمز ]]></b:skin> أضف الكود التالي فوقه مباشرةً

.pager-isi{background:white;overflow:hidden;border:1px solid #DDD;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
.pager-isi a,.pager-isi .linkgrey{width:45%;display:block;float:left;padding:10px 0;font-size:120%}
.pager-isi a:hover,.pager-isi .linkgrey{background-color:#F7F7F7;text-decoration:none}
.pager-isi h6{color:#575757;font-size:80%;font-weight:bold}
a.blog-pager-newer-link{background-image:url(http://4.bp.blogspot.com/-r8YeL5MClP8/UIT2mjkPR6I/AAAAAAAAGGM/QM_4AcjZNfY/s1600/small-left.png);background-repeat:no-repeat;background-position:2% center;padding-left:3.5%;text-align:left}
a.blog-pager-older-link{background-image:url(http://1.bp.blogspot.com/-SovF-2Yqzx8/UIT2nmYLCuI/AAAAAAAAGGU/FjDXOtx5erk/s1600/small-right.png);background-repeat:no-repeat;background-position:98% center;padding-right:3.5%;text-align:right}
.pager-isi .linkgrey.left{padding-left:3.5%;text-align:left}
.blog-pagerager-isi .linkgrey.right{padding-right:3.5%;text-align:right}

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='social-side2'/>
<div class='blog-pager' id='blog-pager'>
<div class='pager-isi'>
<b:if cond='data:newerPageUrl'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><h6>مواضيع أحدث</h6><h5><data:newerPageTitle/></h5></a>
<b:else/>
<span class='linkgrey left'><h6>مواضيع أحدث</h6><h5>هذا الموضوع هو الأحدث.</h5></span>
</b:if>
<b:if cond='data:olderPageUrl'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><h6>مواضيع أقدم</h6><h5><data:olderPageTitle/></h5></a>
<b:else/>
<span class='linkgrey right'><h6>مواضيع أقدم</h6><h5>هذا الموضوع هو الأقدم.</h5></span>
</b:if>  
</div>
</div>
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){
    var newerLink = $('a.blog-pager-newer-link').attr('href');
 $('a.blog-pager-newer-link').load(newerLink + ' .post-title:first', function () {
        var newerLinkTitle = $('a.blog-pager-newer-link').text();
  $('a.blog-pager-newer-link').html('<h6>مواضيع أحدث</h6><h5>' + newerLinkTitle + '</h5>');
    });
    var olderLink = $('a.blog-pager-older-link').attr('href');
 $('a.blog-pager-older-link').load(olderLink + ' .post-title:first', function () {
        var olderLinkTitle = $('a.blog-pager-older-link').text();
  $('a.blog-pager-older-link').html('<h6>مواضيع أقدم</h6><h5>' + olderLinkTitle + '</h5>');
    });
});
//]]>
</script>
</b:if>

    <b:includable id='nextprev'>
<b:if cond='data:blog.pageType != &quot;item&quot;'> 
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>
<data:newerPageTitle/>
</a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>
<data:olderPageTitle/>
</a>
</span>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'>
<data:homeMsg/>
</a>
<b:if cond='data:mobileLinkUrl'>
<div class='blog-mobile-link'>
<a expr:href='data:mobileLinkUrl'>
<data:mobileLinkMsg/>
</a>
</div>
</b:if>
</div>
<div class='clear'/>
</b:if></b:if>
</b:includable>