ترقيم صفحات مدونة مدون الحالى

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

                                          شرح التركيــــــب                                 

اذهب للوحة التحكم >> القالب >> تحرير HTM: 

ابحث عن 

<b:includable id='mobile-index-post' var='post'>

اضف اسفله هذا الكود 

<b:includable id='page-navi'><div class='pagenavi'><script type='text/javascript'>var pageNaviConf = {perPage: 7,numPages: 5,firstText: &quot;الأولى&quot;,lastText: &quot;الأخيرة&quot;,nextText: &quot;&#187;&quot;,prevText: &quot;&#171;&quot;}</script><script src='http://awesome-navigation.googlecode.com/files/onlinetrick.js' type='text/javascript'/><div class='clear'/></div></b:includable> 

ملاحظات 

perPage: 7 >> عدد المواضيع التى ستظهر فى كل صفحة

numPages: 5 >> عدد الصفحات التى ستظهر

ثم ابحث عن 

<b:include name='nextprev'/>

ثم استبدله بهذا الكود 

<b:if cond='data:blog.pageType == &quot;index&quot;'><b:include name='page-navi'/><b:else/><b:if cond='data:blog.pageType == &quot;archive&quot;'><b:include name='page-navi'/></b:if><b:else/><b:if cond='data:blog.pageType == &quot;item&quot;'><b:include name='nextprev'/></b:if></b:if>

ثم ابحث عن وسم ]]></b:skin>

وضع قبلـــــــــــــــه كود السى اس اس التالى

#blog-pager, .pagenavi { clear: both; text-align: center; margin: 30px auto 10px;}#blog-pager a, .pagenavi span, .pagenavi a {background-color: #3BB3E0;padding: 5px 10px;position: relative;margin: 2px;font-size: 12px;text-decoration: none;color: white;border: solid 1px #186F8F;background-image: linear-gradient(bottom, #2CA0CA 0%, #3EB8E5 100%);background-image: -o-linear-gradient(bottom, #2CA0CA 0%, #3EB8E5 100%);background-image: -moz-linear-gradient(bottom, #2CA0CA 0%, #3EB8E5 100%);background-image: -webkit-linear-gradient(bottom, #2CA0CA 0%, #3EB8E5 100%);background-image: -ms-linear-gradient(bottom, #2CA0CA 0%, #3EB8E5 100%);background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, #2CA0CA), color-stop(1, #3EB8E5) );-webkit-box-shadow: inset 0px 1px 0px #7FD2F1, 0px 1px 0px white;-moz-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 1px 0px #fff;box-shadow: inset 0px 1px 0px #7FD2F1, 0px 1px 0px white;-webkit-border-radius: 5px;-moz-border-radius: 5px;-o-border-radius: 5px;border-radius: 5px;}#blog-pager a:hover, .pagenavi a:hover {background-image: linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);background-image: -o-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);background-image: -moz-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);background-image: -webkit-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);background-image: -ms-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, #3EB8E5), color-stop(1, #2CA0CA) );}#blog-pager-older-link, #blog-pager-newer-link { float: none;}.pagenavi .current {background-image: linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);background-image: -o-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);background-image: -moz-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);background-image: -webkit-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);background-image: -ms-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, #3EB8E5), color-stop(1, #2CA0CA) );}

ثم قم بحفظ القالب ومبروك عليك الترقيم