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

مداد الجليد

6 يناير, 2014

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

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

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

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

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

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

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

أولاً أذهب إلى لوحة التحكم في مدونتك 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW7tgYYTO2caJFCZuBOL4as6DLB77W1CAZAZsVuXB8f30Fyvy42cSIXmiZl5s5U5YsszP8jnzNDCCE_pn5JFY2JvV0JVtYbtJ1it5yd_z7AzW_AJwEzQ1cR1RS5uTL1Y3-Sn4i8lDRVcA/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSFrzWo6hGfAfQQRu3PYjvxtRVXkyHvvX4vgUf1m_x26d7z5lLgbSQGAlofsAo0-4LT271UM6b6abklrWK-IhFF8kgr8VjhegRzDjvcDoOI5DBCvPiqt-LzMX39sL9YpfgafShvNK8NC0/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 != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
وفي نهايته
</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>

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

Wiliam 13‏/04‏/2014، 11:00:00 م

أزال المؤلف هذا التعليق.

رد
Mahmoud Nassar 29‏/09‏/2014، 8:25:00 ص

كل عام وأنت إلى الرحمن أقرب كل عام وصحائف أعمالك بالحسنات اثقل .. كل عام وهمتك للجنة تكبر
----====--------====----
ادعو من اقسم بالفجر والليالي العشر أن يسعدك مدى الدهر ويشفع فيك محمد عند الحشر *ويبارك لك* * * في * * *شهر النحر* وكل عام وانتم بخير
----====--------====----
الا ياعقد من الماس .. الا ياللي القمر جارك .. اقولك قبل كل الناس .. يجعل عيدك مبارك
----====--------====----
باقة ازهار وورود .. وسلة بخور وعود .. والعيد عليكم يعود .. وكل عام وانتم بخير
----====--------====----
كنوز الأرض تفديكم وعطر العود نهديكم بوسط القلب مسكنكم وبعيد الاضحى أهنيكم

المصدر: http://sms.t3mq.com/s103.html

رد