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

السلام عليكم ورحمة الله وبركاته

بسم الله الرحمن الرحيم

أهلاً وسهلاً بكم زوارنا وأعضائنا الكرام في درس جديد وشيق ومفيد دائماً.

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

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


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

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


أولاً أذهب إلى لوحة التحكم في مدونتك 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}



رابعاً قم بالبحث عن الرمز 

<div class=’post-footer-line post-footer-line-3′>

ثم أضف الكود التالي في نهاية الرموز الخاصة به
مثال سوف يظهر لك هذا الرمز :
<div class=’post-footer-line post-footer-line-3′>
اسفله قليلاً سوف يظهر لك هذا الرمز 
</b:includable> قم بإضافة الكود التالي بينهما كما هو بالصورة التالية

إضغط على الصورة للعرض بالحجم الكامل لها

الكود:

<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;’>
وفي نهايته
</b:if></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>

إختر حفظ وإذهب الى معاينة مدونتك 

نتمنى ان تكون نالت إعجابكم ورضاكم


جميع الحقوق محفوظة
يرجى عدم نقل الموضوع إلا بعد ذكر المصدر بالرابط الأصلي للموضوع