إضافة ترقيم الصفحات لمدونات بلوجر ب4 أشكال جذابة

معلومات عن الإضافة

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

اشكال الترقيم المتاحة

الخطوة الاولى

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

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

2- ثم ضع فوقه مباشرة الكود التالى :

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

 

الخطوة الثانية

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

<b:include name='nextprev'/>

2- ثم قم باستبداله بالكود التالى 

<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>

الخطوة الثالثة والأخيرة

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

]]></b:skin>

2- ثم ضع فوقه أحد الأشكال التالية التى تناسبك

الشكل الأول

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

الشكل الثانى

#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 10px;
}
#blog-pager a, .pagenavi span, .pagenavi a {
border: 1px solid #3d8bf2;            
padding: 5px 10px;              
text-decoration: none;              
font-family: arial;              
color:#fff;              
margin: 2px;              
background-image: url('http://onlinetrick-ot.googlecode.com/svn/image/menubg1.PNG');
background-position: left;        
-webkit-transition: all 0.7s ease-in-out;            
-moz-transition: all 0.7s ease-in-out;              
-o-transition: all 0.7s ease-in-out;
}
#blog-pager a:hover, .pagenavi a:hover {
background-position:right;
}
#blog-pager-older-link, #blog-pager-newer-link {
     float: none;
}
.pagenavi .current {
background-position:right;
}

الشكل الرابع

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

والآن مبروووك عليك الإضافة أتمنى ان تنال اعجباكم ولا تنسوا مشاركة الموضوع مع اصدقائك

واى استفسار او مشكلة فى التركيب أترك تعليقك وسيتم الرد عليك فى اقرب فرصة ان شاء الله