إضافه وبرمجه - الترقيم الصفحات Trekam

البحث عن
]]></b:skin>
فوقه
ازرق باسود مستطيل
.Label a{ background: rgb(0,100,180);
background: -moz-linear-gradient(top, rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%);
background: -webkit-gradient(linear, left top, left bottom,color-stop(0%,rgba(0,100,180,1)),color-stop(100%,rgba(20,60,100,1)));
background: -webkit-linear-gradient(top, rgba(0,100,180,1)0%,rgba(20,60,100,1) 100%);
background: -o-linear-gradient(top, rgba(0,100,180,1)0%,rgba(20,60,100,1) 100%);
background: -ms-linear-gradient(top, rgba(0,100,180,1)0%,rgba(20,60,100,1) 100%);
background: linear-gradient(top, rgba(0,100,180,1)0%,rgba(20,60,100,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0064b4', endColorstr='#123d60',GradientType=0 );
display:inline-block;border: 1px solid #005ca6;padding:0 8px;color:#fff!important; height:28px; line-height:28px;text-transform:capitalize;text-decoration:none;float:left;margin-top:5px;font-size:14px;-webkit-transition:all .4sease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all.4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all.4s ease-in-out;text-shadow: 0 -1px -1px rgba(0, 0, 0, 0.2);
}
.Label a:hover{color:#000 !important; background:#123d60;}
او ازرق ورصاصي
#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 14px;padding: 5px 12px;margin-right:5px; color: #666; background-color:#eee;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#359BED;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#359BED;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}
البحث عن
</body>
فوقه
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
/*<![CDATA[*/
var perPage=9;
var numPages=6;
var firstText ='اولا';
var lastText ='الاخير';
var prevText ='« سابق';
var nextText ='التالي »';
var urlactivepage=location.href;
var home_page="/";

if(typeof firstText=="undefined")firstText="First";if(typeoflastText=="undefined")lastText="Last";var noPage;var currentPage;varcurrentPageNo;var postLabel;pagecurrentg();functionlooppagecurrentg(pageInfo){var html='';pageNumber=parseInt(numPages/ 2);if(pageNumber==numPages-pageNumber){numPages=pageNumber*2+1}
pageStart=currentPageNo-pageNumber;if(pageStart<1)pageStart=1;lastPageNo=parseInt(pageInfo/ perPage)+1;if(lastPageNo-1==pageInfo /perPage)lastPageNo=lastPageNo-1;pageEnd=pageStart+numPages-1;if(pageEnd>lastPageNo)pageEnd=lastPageNo;html+="<spanclass='showpageOf'>Page "+currentPageNo+' of'+lastPageNo+"</span>";varprevNumber=parseInt(currentPageNo)-1;if(currentPageNo>1){if(currentPage=="page"){html+='<spanclass="showpage firstpage"><ahref="'+home_page+'">'+firstText+'</a></span>'}else{html+='<spanclass="displaypageNum firstpage"><ahref="/search/label/'+postLabel+'?&max-results='+perPage+'">'+firstText+'</a></span>'}}
if(currentPageNo>2){if(currentPageNo==3){if(currentPage=="page"){html+='<spanclass="showpage"><ahref="'+home_page+'">'+prevText+'</a></span>'}else{html+='<spanclass="displaypageNum"><ahref="/search/label/'+postLabel+'?&max-results='+perPage+'">'+prevText+'</a></span>'}}else{if(currentPage=="page"){html+='<spanclass="displaypageNum"><a href="#"onclick="redirectpage('+prevNumber+');returnfalse">'+prevText+'</a></span>'}else{html+='<spanclass="displaypageNum"><a href="#"onclick="redirectlabel('+prevNumber+');returnfalse">'+prevText+'</a></span>'}}}
if(pageStart>1){if(currentPage=="page"){html+='<spanclass="displaypageNum"><ahref="'+home_page+'">1</a></span>'}else{html+='<spanclass="displaypageNum"><ahref="/search/label/'+postLabel+'?&max-results='+perPage+'">1</a></span>'}}
if(pageStart>2){html+=' ... '}
for(varjj=pageStart;jj<=pageEnd;jj++){if(currentPageNo==jj){html+='<spanclass="pagecurrent">'+jj+'</span>'}elseif(jj==1){if(currentPage=="page"){html+='<spanclass="displaypageNum"><ahref="'+home_page+'">1</a></span>'}else{html+='<spanclass="displaypageNum"><ahref="/search/label/'+postLabel+'?&max-results='+perPage+'">1</a></span>'}}else{if(currentPage=="page"){html+='<spanclass="displaypageNum"><a href="#"onclick="redirectpage('+jj+');returnfalse">'+jj+'</a></span>'}else{html+='<spanclass="displaypageNum"><a href="#"onclick="redirectlabel('+jj+');return false">'+jj+'</a></span>'}}}
if(pageEnd<lastPageNo-1){html+='...'}
if(pageEnd<lastPageNo){if(currentPage=="page"){html+='<spanclass="displaypageNum"><a href="#"onclick="redirectpage('+lastPageNo+');returnfalse">'+lastPageNo+'</a></span>'}else{html+='<spanclass="displaypageNum"><a href="#"onclick="redirectlabel('+lastPageNo+');returnfalse">'+lastPageNo+'</a></span>'}}
varnextnumber=parseInt(currentPageNo)+1;if(currentPageNo<(lastPageNo-1)){if(currentPage=="page"){html+='<spanclass="displaypageNum"><a href="#"onclick="redirectpage('+nextnumber+');returnfalse">'+nextText+'</a></span>'}else{html+='<spanclass="displaypageNum"><a href="#"onclick="redirectlabel('+nextnumber+');returnfalse">'+nextText+'</a></span>'}}
if(currentPageNo<lastPageNo){if(currentPage=="page"){html+='<spanclass="displaypageNum lastpage"><a href="#"onclick="redirectpage('+lastPageNo+');returnfalse">'+lastText+'</a></span>'}else{html+='<spanclass="displaypageNum lastpage"><a href="#"onclick="redirectlabel('+lastPageNo+');returnfalse">'+lastText+'</a></span>'}}
var pageArea=document.getElementsByName("pageArea");varblogPager=document.getElementById("blog-pager");for(varp=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}
if(pageArea&&pageArea.length>0){html=''}
if(blogPager){blogPager.innerHTML=html}}
function totalcountdata(root){var feed=root.feed;vartotaldata=parseInt(feed.openSearch$totalResults.$t,10);looppagecurrentg(totaldata)}
function pagecurrentg(){varthisUrl=urlactivepage;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){postLabel=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{postLabel=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}
if(thisUrl.indexOf("?q=")==-1&&thisUrl.indexOf(".html")==-1){if(thisUrl.indexOf("/search/label/")==-1){currentPage="page";if(urlactivepage.indexOf("#PageNo=")!=-1){currentPageNo=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{currentPageNo=1}
document.write("<scriptsrc=\""+home_page+"feeds/posts/summary?max-results=1&alt=json-in-script&callback=totalcountdata\"><\/script>")}else{currentPage="label";if(thisUrl.indexOf("&max-results=")==-1){perPage=20}
if(urlactivepage.indexOf("#PageNo=")!=-1){currentPageNo=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{currentPageNo=1}
document.write('<scriptsrc="'+home_page+'feeds/posts/summary/-/'+postLabel+'?alt=json-in-script&callback=totalcountdata&max-results=1"><\/script>')}}}
functionredirectpage(numberpage){jsonstart=(numberpage-1)*perPage;noPage=numberpage;varnameBody=document.getElementsByTagName('head')[0];varnewInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nameBody.appendChild(newInclude)}
functionredirectlabel(numberpage){jsonstart=(numberpage-1)*perPage;noPage=numberpage;varnameBody=document.getElementsByTagName('head')[0];varnewInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary/-/"+postLabel+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nameBody.appendChild(newInclude)}
function finddatepost(root){post=root.feed.entry[0];vartimestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);vartimestamp=encodeURIComponent(timestamp1);if(currentPage=="page"){varpAddress="/search?updated-max="+timestamp+"&max-results="+perPage+"#PageNo="+noPage}else{varpAddress="/search/label/"+postLabel+"?updated-max="+timestamp+"&max-results="+perPage+"#PageNo="+noPage}
location.href=pAddress}

/*]]>*/
</script>
</b:if>
</b:if>
صوره وكود
blog-pagerlone1 + blog-pagerlone1 / blog-pagerlone2 +blog-pagerlone2 / blog-pagerlone3 + blog-pagerlone3 / blog-pagerlone4 + blog-pagerlone4 / blog-pagerlone5 + blog-pagerlone5
blog-pagerlone6 + blog-pagerlone6 / blog-pagerlone7 + blog-pagerlone7 / blog-pagerlone8 + blog-pagerlone8
تطبيق اخر
البحث
div#blog-pager{display:none}
ما يهم هههه
البحث عن
]]></b:skin>
اضافه هذا فوقه
#blog-pager, .blog-pager{display:block;padding:5px 0;}
.showpage a,.pagenumber a,.totalpages{
position:relative;display: inline-block;padding:5px 10px;margin:0 2px;background:#eeeded;color:#170017;
border:1px solid#eaeaea;font-size:14px;border-radius:2px;transition:all .3s;
}
.current{background-color:#9E267D;padding:5px 10px;color:white;margin:0 2px;border:1px solid #eaeaea;font-size:14px;border-radius:2px;}
.showpage a:hover,.pagenumber a:hover{background:#2b5a97;color:#fff;text-decoration:none;}
والبحث عن
</body>
فوقه
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<script type='text/javascript'> //<![CDATA[//
var postperpage=3; var numshowpage=4; var prevpage ='السابق'; var nextpage ='التالي'; var urlactivepage=location.href; var home_page="/";
//]]> </script>
<script src='https://cdn.rawgit.com/xomisse/ac8ccfa4b8fb2c26d5cf76270db92201/raw/f957494b1691cce3d5a8cb92e5b4ed57cded9729/pagination.js'/>
</b:if>

pagination1blog js

تطبيق اخر
البحث
</body>
فوقه
<script src='https://cdn.jsdelivr.net/gh/codatey/cdt-pagination@1.2.2/dist/cdt-pagination.min.js'/>
البحث
</head>
فوقه اختر احدهم
]]></b:skin>
شرح تخصيص الإضافة
هذا الجزء من الشرح يحتاج القليل من الخبرة في الجافاسكربت.
يمكنك تخصيص مكونات الإضافة بإستعمال المتغير paginationConfig حيث يتم وضعه قبل سكربت أداة الترقيم، هذا المتغير يحتوي على الإعدادات التي سيتم تطبيقها على أداة الترقيم، كمثال :
var paginationConfig = {
perPage: 10,
showNav: true,
text_next: "الصفحة التاليه",
};
في هذا المثال قمنا بتحديد 3 إعدادات هي perPage و showNav و text_next، كل إعداد والوظيفة التي يقوم بها. ستجد كل الإعدادات وشرحها في الأسفل

blog-pagerl css
blog-pagerl js
blog-pagerl1 + blog-pagerl1 / blog-pagerl2 + blog-pagerl2 / blog-pagerl3 + blog-pagerl3