ترقيم صفحات بلوجر

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


اولا نذهب الى القالب  ونقوم بعمل نسخه احتياطيه ومن ثم تحرير   ثم نقوم بالبحث باستخدام Ctrl+F   عن

<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: "First",

lastText: "Last",

nextText: "»",

prevText: "«"

}

</script>

<script src='http://awesome-navigation.googlecode.com/files/onlinetrick.js' type='text/javascript'/>

<div class='clear'/>

</div>

</b:includable>

 الآن نبحث من جديد عن الكود

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

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;

}

#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/menubg2.PNG');

background-position: bottom;        

-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:top;

}

#blog-pager-older-link, #blog-pager-newer-link {

     float: none;

}

.pagenavi .current {

background-position:top;

}

• الشكل الخامس

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

}

تعديل المقال