كيفية التركيب :-
اولا:ادخل الى ادارة المدونة ثم الى التخطيط وقم بتحرير رسائل المدونة الإلكترونية ، وتوجه الى خانة عدد رسائل الصفحة الرئيسية ضع عدد التوينات التي تريدها أن تظهر في صفحة التدوينات وكذلك هذا الرقم التي وضعته هنا سنضعه في الترقيم أيظا لكي لا تكون هناك مشكلة .
ثانيا: إذهب الى قالب ثم تحرير HTML و إضغط Ctrl+F للبحث ، نبحثعن وسم <b:includableid='post'var='post'>
و أضف الكود التالي مباشرة فوقه:-
ثانيا: إذهب الى قالب ثم تحرير HTML و إضغط Ctrl+F للبحث ، نبحثعن وسم <b:includableid='post'var='post'>
و أضف الكود التالي مباشرة فوقه:-
<b:includable id='page-navi'>
<div class='pagenav'>
<script type='text/javascript'>
var pageNaviConf = {
perPage: 9,
numPages: 5,
firstText: "الصفحة الأولى",
lastText: "الصفحة الأخيرة",
nextText: "التالي",
prevText: "السابق"
}
</script>
<script type='text/javascript'>
//<![CDATA[
function pageNavi(o){var m=location.href,l=m.indexOf("/search/label/")!=-1,a=l?m.substr(m.indexOf("/search/label/")+14,m.length):"";a=a.indexOf("?")!=-1?a.substr(0,a.indexOf("?")):a;var g=l?"/search/label/"+a+"?updated-max=":"/search?updated-max=",k=o.feed.entry.length,e=Math.ceil(k/pageNaviConf.perPage);if(e<=1){return}var n=1,h=[""];l?h.push("/search/label/"+a+"?max-results="+pageNaviConf.perPage):h.push("/?max-results="+pageNaviConf.perPage);for(var d=2;d<=e;d++){var c=(d-1)*pageNaviConf.perPage-1,b=o.feed.entry[c].published.$t,f=b.substring(0,19)+b.substring(23,29);f=encodeURIComponent(f);if(m.indexOf(f)!=-1){n=d}h.push(g+f+"&max-results="+pageNaviConf.perPage)}pageNavi.show(h,n,e)}pageNavi.show=function(f,e,a){var d=Math.floor((pageNaviConf.numPages-1)/2),g=pageNaviConf.numPages-1-d,c=e-d;if(c<=0){c=1}endPage=e+g;if((endPage-c)<pageNaviConf.numPages){endPage=c+pageNaviConf.numPages-1}if(endPage>a){endPage=a;c=a-pageNaviConf.numPages+1}if(c<=0){c=1}var b='<span class="pages">Pages '+e+' of '+a+"</span> ";if(c>1){b+='<a href="'+f[1]+'">'+pageNaviConf.firstText+"</a>"}if(e>1){b+='<a href="'+f[e-1]+'">'+pageNaviConf.prevText+"</a>"}for(i=c;i<=endPage;++i){if(i==e){b+='<span class="current">'+i+"</span>"}else{b+='<a href="'+f[i]+'">'+i+"</a>"}}if(e<a){b+='<a href="'+f[e+1]+'">'+pageNaviConf.nextText+"</a>"}if(endPage<a){b+='<a href="'+f[a]+'">'+pageNaviConf.lastText+"</a>"}document.write(b)};(function(){var b=location.href;if(b.indexOf("?q=")!=-1||b.indexOf(".html")!=-1){return}var d=b.indexOf("/search/label/")+14;if(d!=13){var c=b.indexOf("?"),a=(c==-1)?b.substring(d):b.substring(d,c);document.write('<script type="text/javascript" src="/feeds/posts/summary/-/'+a+'?alt=json-in-script&callback=pageNavi&max-results=99999"><\/script>')}else{document.write('<script type="text/javascript" src="/feeds/posts/summary?alt=json-in-script&callback=pageNavi&max-results=99999"><\/script>')}})();
//]]>
</script>
<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>
/* CSS Page Navigation */
.pagenav {
clear: both;
margin: 10px 0 10px;;
padding: 15px;
text-align: left;
font-size: 13px;
font-family: 'Droid Sans';
font-weight: 700;
text-align: center;
}
.pagenav span, .pagenav a {
padding: 10px 15px;
display: inline-block;
background-color: #fff;
color: #4d90fe;
font-size: 15px;
margin: 0px 4px 8px 4px;
transition: all .2s ease;
}
.pagenav .pages {
background-color: #4d90fe;
color: #fff;
transition: all .2s linear;
}
.pagenav a:hover {
background-color:#dd5d24;
color:#fff;
transition: 0.5s
}
.pagenav .current {
background-color:#dd5d24;
color:#fff;
}
.pagenav .pages {display:none;}
لتنسيق الترقيم كي يتلائم مع القالب
هذا الكود هوخلفية الترقم : background-color: #fff; استبدله باللون الذي يناسب القالب.هذا الكود هولون الترقم : color: #4d90fe; استبدله باللون الذي يناسب القالب.
هذا الكود هولون رقم الصفحة الظاهرة أمامك: background-color:#dd5d24; استبدله باللون الذي يناسبك.
اما هذا الكود فهو عندما تمرر الموس يظهر لك : background-color:#dd5d24;
وهذا لون الأرقام عندما تمرر الموس color:#fff;
إرسال تعليق