ترقيم الصفحات بلوجر بطريقة صحيحة و باشكال متعددة

السلام عليكم ورحمة الله ، في هده التدوينة بإذن الله سوف نقدم حل لمشكلة ترقيم صفحات بروجر ، كما تعلمون أن العديد من المدونين وخاصة الذين يستخدمون  بلوق | blogger، يواجهون عدة مشاكل في الترقيم  page navigation .

ومن ميزات الترقيم أنه يسهل على المستخدم التنقل من صفحة إلى أخرى، وكذلك لمعرفة العدد الإجمالي للتدوينات  التي تم نشرها. 

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

1- الدخول إلى لوحة التحكم  الخاصة بك، انتقل إلى "قالب" ثم انقر على "تحرير HTML". وقبل ذالك خذ نسخة احتياطية من القالب الخاص بك أولا. 

2. انقر في أي مكان على رمز واضغط  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=9;
    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="http://bloggerwizard.com/scripts/page-navigation2.js"/>
</b:if>
</b:if>

رقم 9 الموجود في هذا الكود هوعدد التدونلت التي ستظهر فقم بستبداله بالعدد الذي وضعته في خانة عدد رسائل الصفحة الرئيسية.
رقم 5 هو عدد الارقام التي ستظهر في الترقيم للزائر .

3- قم بالبحث عن هذا الكود :]]></b:skin> بعد العثور على علامة  ]]></b:skin>، انسخ  واحد من الانماط التالية ولصقه فوقه ]]></b:skin>

1- 

#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;}

2- 

#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;}

3-

  #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;}

4-

 #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;}

تابع الشرح بالفيديو :