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

اضافة ترقيم الصفحات لمدونة بلوجر

يمكنك إضافة هذه القطعة في خطوتين فقط.
1. إضافة CSS.
2. اضافة الجافا سكربت JavaScript.
الان دعونا نرى كيفية اضافة CSS لترقيم الصفحات.

1. اضافة CSS

الخطوة الأولى: الذهاب الى لوحة تحكم بلوجر > قالب > اضغط على تحرير HTML.
تعديل قالب بلوجر
الخطوة الثانية: انقر داخل المكان الموجود به الكود و بعدها استعمل لوحة المفاتية واضغط CTRL + F لفتح مربع البحث.
البحث فى قالب بلوجر
اكتب أو لصق الكود التالى داخل مربع البحث واضغط على Enter للعثور عليه:
]]></b:skin>
الخطوة الثالثة: الان عليك اختيار الشكل أو اللون الذى تريد اضافتة واختيار الكود الخاص به واضافتة فوق كود ]]></b:skin>.

الشكل 1:
اضافة ترقيم الصفحات لمدونة بلوجر 1
#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 7px;margin-right:5px;background:#E9E9E9;color: #888;border:1px solid #E9E9E9;}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background:#CECECE;text-decoration:none;color: #000;}
.showpageOf{display:none!important}
#blog-pager .showpage, #blog-pager .pagecurrent{font-weight:bold;color: #888;}
#blog-pager .pages{border:none;}

الشكل 2:
اضافة ترقيم الصفحات لمدونة بلوجر 2
#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 5px 10px;margin-right:5px; color: #F4F4F4; background-color:#404042;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#EC8D04;text-decoration:none;color: #fff;}
#blog-pager .showpage, #blog-pager, .pagecurrent{font-weight:bold;color: #000;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}

الشكل 3:
اضافة ترقيم الصفحات لمدونة بلوجر 3
#blog-pager{clear:both;margin:30px auto; padding: 7px;text-align:center;font-size: 11px;background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #000000),color-stop(1, #292929)); background-image: -o-linear-gradient(top, #000000 0%, #292929 100%);background-image: -moz-linear-gradient(top, #000000 0%, #292929 100%);background-image: -webkit-linear-gradient(top, #000000 0%, #292929 100%);background-image: -ms-linear-gradient(top, #000000 0%, #292929 100%);background-image: linear-gradient(to top, #000000 0%, #292929 100%); padding: 6px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 10px;margin-right:5px; color: #fff;}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #59A2CF),color-stop(1, #D9EAFF));background-image: -o-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -moz-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -webkit-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -ms-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);
background-image: linear-gradient(to top, #59A2CF 0%, #D9EAFF 100%);text-decoration: none;color: #000;
-webkit-border-radius: 3px;-moz-border-radius: 3px;
border-radius: 3px;}
.showpageOf{display:none!important}.blog-pager-older-link, .home-link, .blog-pager-newer-link {background: transparent;}
a.blog-pager-older-link, a.home-link, a.blog-pager-newer-link {color: #fff;}
#blog-pager .pages{border:none;background: none;}

الشكل 4:
اضافة ترقيم الصفحات لمدونة بلوجر 4
#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 14px;padding: 5px 12px;margin-right:5px; color: #666; background-color:#eee;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#359BED;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#359BED;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}

الشكل 5:
اضافة ترقيم الصفحات لمدونة بلوجر 5
#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #3E5801; background-color:#E0EDC1;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#FEF6DF;text-decoration:none;color: #E16800;}
#blog-pager .pagecurrent{font-weight:bold;color: #D25E71;background:#FFDEDF;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}

الشكل 6:
اضافة ترقيم الصفحات لمدونة بلوجر 6
#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #AD0B00; background-color:#FAB001;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#DB4920;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}

الشكل 7:
اضافة ترقيم الصفحات لمدونة بلوجر 7
#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 12px;padding: 5px 12px;margin-right:5px; color: #222; background-color:#eee; border: 1px solid #EEEEEE;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#E5E5E5;text-decoration:none;color: #222;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}

ملاحظة: إذا كنت تريد إخفاء أزرار"First" و "Last" إضافة هذا السطر تحت كود CSS:

2. اضافة الجافا سكربت JavaScript

الخطوة الرابعة: اضغط (CTRL + F) و ابحث عن هذا الكود
</body>
الخطوة الخامسة: اضافة الكود التالى فوقة
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
  /*<![CDATA[*/
    var perPage=7;
    var numPages=6;
    var firstText ='First';
    var lastText ='Last';
    var prevText ='« Previous';
    var nextText ='Next »';
    var urlactivepage=location.href;
    var home_page="/";
  /*]]>*/
</script>
  <script src="https://googledrive.com/host/0B-MkbyBUyPsbOHZjZVRtY0lsQ0k"/>
</b:if>
</b:if>

اعداد الكود

بعد تثبيت الكود تحتاج الى تغيير الاعدادات الافتراضية.
perPage: 7,
numPages: 6,
var firstText ='First';
var lastText ='Last';
var prevText ='« Previous';
var nextText ='Next »';
}

1. perPage: تدل على عدد المشاركات الى سوف تظهر فى الصفحة الواحده وهى (7). و يمكن تعديلها حسبما تريد.
2. numPages: عدد الصفحات التى سوف تظهر فى ترقيم الصفحات وهى (6).
3. يمكنك استبدال 'First', 'Last' وأيضا "« Previous" and "Next »" على حسب اللغة التى تريد.

اصلاح مشاكل التسميات Labels:

الاعدادات الافتراضية لبلوجر تقوم بعرض 20 مشاركة فى صفحات التسميات ولكى تظهر هذه القطعة فى صفحة التسميات علينا خفض القيمة التى تعطيها بلوجر الى 7 مشاركات فقط مثل المتغير perPage.
وذلك يكون كالأتى وعن طريق البحث عن الكود التالى.
expr:href='data:label.url'
واستبداله بالكود التالى.
expr:href='data:label.url + "?&amp;max-results=7"'
7 هو عدد المشاركات الذى سوف يظهر فى كل صفحه
الخطوة الأخيرة: اضغط خفظ النموذج واستمتع بالقالب!!
اذا واجهتكم اى مشكلة فى تركيب الكود شاركونا المشاكل لحلها ان شاء الله.

إرسال تعليق

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

    ردحذف
  2. أستخدمت الطريقة اللتي تم شرحها ولكن لم تفلح, أريد ظهور الترقيم في الصفحة الرئيسية وحاولت ولم اد طريقة

    ردحذف
    الردود
    1. ممكن تصور لنا شكل القالب بعد اضافة الكود بالطريقة المشروحه وان شاء الله يكون فيه حل :)

      حذف
  3. السلام عليك أخي الكريم جربت الطريقة ونجحت بقي لي مشكل واحد فقط وهو كيف أقوم بعكس الترقيم كي يظهر من اليمين إلى اليسار لأن المدونة عربية على هذا الشكل
    1 2 3 4 5 6 وشكرا لك على الماعدة

    ردحذف
    الردود
    1. اعطينى المثال الذي قمت بالتطبيق عليه حتى اقوم بمعالجة المشكلة

      حذف
  4. السلام عليكم شكرا علي الشرح ايمكنك ان توضح لي كيفية حذف last و first

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

    ردحذف

 
Top