أفضل ترقيم لصفحات بلوجر وبأكثر من شكل احترافى فعال

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

شرح التركيب 

اذهب للوحة التحكم >> القالب >> تحرير HTML >> ابحث عن 

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

الشكل الثانى >>  معاينة الترقيم

الكــــــــــــــــــــــود 

#blog-pager, .pagenavi {     clear: both;     text-align: center;     margin: 30px auto 15px;}.pagenavi .pages {display: none;}#blog-pager a, .pagenavi span, .pagenavi a {padding: 5px 10px;text-decoration: none;font-family: arial;color: white;margin: 2px;background: black;background-position: bottom;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;border-radius: 30px;font-size: 20px;}#blog-pager a:hover, .pagenavi a:hover {background: orange;}#blog-pager-older-link, #blog-pager-newer-link {     float: none;}.pagenavi .current {background: orange;}

الشكل الثالث  >>  معاينة الترقيم 

الكـــــــــــــــــــــود 

#blog-pager, .pagenavi {     clear: both;     text-align: center;     margin: 30px auto 10px;}#blog-pager a, .pagenavi span, .pagenavi a {text-decoration: none;color: #333;text-shadow: 0 1px 0 rgba(255, 255, 255, .5);background-color: #F8F8F8;filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#fffcfcfc,EndColorStr=#fff8f8f8);background-image: -moz-linear-gradient(top,#FCFCFC 0,#F8F8F8 100%);background-image: -ms-linear-gradient(top,#FCFCFC 0,#F8F8F8 100%);background-image: -o-linear-gradient(top,#FCFCFC 0,#F8F8F8 100%);background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FCFCFC),color-stop(100%,#F8F8F8));background-image: -webkit-linear-gradient(top,#FCFCFC 0,#F8F8F8 100%);background-image: linear-gradient(to bottom,#FCFCFC 0,#F8F8F8 100%);padding: 5px 10px;border: 1px solid lightGrey;font-weight: bold;font-size: 12px;vertical-align: middle;-moz-border-radius: 2px;-webkit-border-radius: 2px;border-radius: 2px;margin: 2px 2px;-webkit-transition: .0s ease-in!important;-moz-transition: .0s ease-in!important;-ms-transition: .0s ease-in!important;-o-transition: .0s ease-in!important;transition: .0s ease-in!important;}#blog-pager a:hover, .pagenavi a:hover {border-color: #C6C6C6;filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#fff8f8f8,EndColorStr=#ffeeeeee);background-image: -moz-linear-gradient(top,#F8F8F8 0,#EEE 100%);background-image: -ms-linear-gradient(top,#F8F8F8 0,#EEE 100%);background-image: -o-linear-gradient(top,#F8F8F8 0,#EEE 100%);background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#F8F8F8),color-stop(100%,#EEE));background-image: -webkit-linear-gradient(top,#F8F8F8 0,#EEE 100%);background-image: linear-gradient(to bottom,#F8F8F8 0,#EEE 100%);}#blog-pager-older-link, #blog-pager-newer-link {     float: none;}.pagenavi .current {border-color: #C6C6C6;background-color: #E9E9E9;background-image: none;-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);-ms-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);}.pagenavi a:active {border-color: #C6C6C6;background-color: #E9E9E9;background-image: none;-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);-ms-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);}

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

بعد اتمام هذه الخطوات قد تواجه مشكلة فى الأقسام أو  التسميات 

وهى أن عدد الصفحات وعدد المواضيع فى الصفحات يكون منتظم فى كل صفحة
لكن عند فتح اى قسم تجد عدد أكبر من المواضيع عكس العدد المحدد فى الترقيم

والحل كالتالى 
ابحث عن

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>

واستبدله بهذا الكود
(ربما تجد الكود مكرر فيجب استبداله جميع الاكود )

<script type='text/javascript'>
  var lblname = &quot;<data:label.name/>&quot;;
  lblname2 = encodeURIComponent(lblname);
  var feedlink = &#39;/search/label/&#39; + lblname2+&#39;?&amp;max-results=5&#39;;
  document.write(&#39;&lt;a href=&quot;&#39; + feedlink + &#39;&quot;&gt;&#39;+lblname+&#39;&lt;/a&gt;&#39;);
</script> 

مع ملاحظة ان max-results=5 عدد المواضيع التى ستظهر فى التسميات
ويجب ان يكون مطابق للعد الذى حددته فى البداية ليكون الترقيم منتظم

ولتحديد عد الموضوعات فى التسميات التى تظهر داخل المواضيع 

ابحث عن

<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

واستبدلها ايضا بالكود السابق

واليك الحل اليدوى البسيط حتى لا أكون قصرت فى شرحى 

الحل >>
اضف هذا الجزء بعد رابط القسم فى القالب
?max-results=5
ليكون الرابط بهذا الشكل

http://myebd3at.blogspot.com/search/label/اضافات بلوجر ?max-results=9

وفى نهاية موضوع اتمنى أن يكون قد أفادكم أخوانى فى الله 
◄ كلمة شكر على المجهود المبذول تكفى لجعلنا قادرين على تقديم المزيد لخدمتكم ►