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

كيف الحال إخواني اتمنى تكونوا بألف خير

في هذا الموضوع سيتم شرح طريقة إضافة ترقيم الصفحات لمدونات بلوجر

ومتوفر في خمسة أشكال إختر منها الشكل الذي يتناسب مع مدونتك

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

أول خطوة هي البحث عن الوسم التالي

<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: "الأولى",
lastText: "الأخيرة",
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 == "index"'>
<b:include name='page-navi'/>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<b:include name='page-navi'/>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<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;

}