اضافة ترقيم الصفحات بشكل بسيط و جذاب بشكل احترافي لبلوجر

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

الان خطوات التركيب
1- قم بالدخول الى قالب ثم تحرير html وابحe عن </body>
وضع الكود التالي فوق الـ </body> مباشرة

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
/*<![CDATA[*/
var postperpage=5;
var numshowpage=2;
var upPageWord ='« السابق';
var downPageWord ='التالي »';
var urlactivepage=location.href;
var home_page="/";
/*]]>*/
</script>
<script type='text/javascript'>
/*<![CDATA[*/
var nopage;var jenis;var nomerhal;var lblname1;halamanblogger();function loophalaman(banyakdata){var html='';nomerkiri=parseInt(numshowpage/2);if(nomerkiri==numshowpage-nomerkiri){numshowpage=nomerkiri*2+1}mulai=nomerhal-nomerkiri;if(mulai<1)mulai=1;maksimal=parseInt(banyakdata/postperpage)+1;if(maksimal-1==banyakdata/postperpage)maksimal=maksimal-1;akhir=mulai+numshowpage-1;if(akhir>maksimal)akhir=maksimal;html+="Page "+nomerhal+' of '+maksimal+"";var prevnomer=parseInt(nomerhal)-1;if(nomerhal>1){if(nomerhal==2){if(jenis=="page"){html+='<a href="'+home_page+'">'+upPageWord+'</a>'}else{html+='<a href="/search/label/'+lblname1+'?&max-results='+postperpage+'">'+upPageWord+'</a>'}}else{if(jenis=="page"){html+='<a href="#" onclick="redirectpage('+prevnomer+');return false">'+upPageWord+'</a>'}else{html+='<a href="#" onclick="redirectlabel('+prevnomer+');return false">'+upPageWord+'</a>'}}}if(mulai>1){if(jenis=="page"){html+='<a href="'+home_page+'">1</a>'}else{html+='<a href="/search/label/'+lblname1+'?&max-results='+postperpage+'">1</a>'}}if(mulai>2){html+=' ... '}for(var jj=mulai;jj<=akhir;jj++){if(nomerhal==jj){html+=''+jj+''}else if(jj==1){if(jenis=="page"){html+='<a href="'+home_page+'">1</a>'}else{html+='<a href="/search/label/'+lblname1+'?&max-results='+postperpage+'">1</a>'}}else{if(jenis=="page"){html+='<a href="#" onclick="redirectpage('+jj+');return false">'+jj+'</a>'}else{html+='<a href="#" onclick="redirectlabel('+jj+');return false">'+jj+'</a>'}}}if(akhir<maksimal-1){html+='...'}if(akhir<maksimal){if(jenis=="page"){html+='<a href="#" onclick="redirectpage('+maksimal+');return false">'+maksimal+'</a>'}else{html+='<a href="#" onclick="redirectlabel('+maksimal+');return false">'+maksimal+'</a>'}}var nextnomer=parseInt(nomerhal)+1;if(nomerhal<maksimal){if(jenis=="page"){html+='<a href="#" onclick="redirectpage('+nextnomer+');return false">'+downPageWord+'</a>'}else{html+='<a href="#" onclick="redirectlabel('+nextnomer+');return false">'+downPageWord+'</a>'}}var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}function hitungtotaldata(root){var feed=root.feed;var totaldata=parseInt(feed.openSearch$totalResults.$t,10);loophalaman(totaldata)}function halamanblogger(){var thisUrl=urlactivepage;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{lblname1=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){jenis="page";if(urlactivepage.indexOf("#PageNo=")!=-1){nomerhal=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{nomerhal=1}document.write("<script src=\""+home_page+"feeds/posts/summary?max-results=1&alt=json-in-script&callback=hitungtotaldata\"><\/script>")}else{jenis="label";if(thisUrl.indexOf("&max-results=")==-1){postperpage=20}if(urlactivepage.indexOf("#PageNo=")!=-1){nomerhal=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{nomerhal=1}document.write('<script src="'+home_page+'feeds/posts/summary/-/'+lblname1+'?alt=json-in-script&callback=hitungtotaldata&max-results=1" ><\/script>')}}}function redirectpage(numberpage){jsonstart=(numberpage-1)*postperpage;nopage=numberpage;var nBody=document.getElementsByTagName('head')[0];var newInclude=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");nBody.appendChild(newInclude)}function redirectlabel(numberpage){jsonstart=(numberpage-1)*postperpage;nopage=numberpage;var nBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary/-/"+lblname1+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nBody.appendChild(newInclude)}function finddatepost(root){post=root.feed.entry[0];var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);var timestamp=encodeURIComponent(timestamp1);if(jenis=="page"){var alamat="/search?updated-max="+timestamp+"&max-results="+postperpage+"#PageNo="+nopage}else{var alamat="/search/label/"+lblname1+"?updated-max="+timestamp+"&max-results="+postperpage+"#PageNo="+nopage}location.href=alamat}
/*]]>*/
</script>
</b:if>
</b:if>

انهينا الخطوو الاولى
2- توجد اربعة الوان من هذه الاضافة احمر ازرق اخضر رمادي يمكنك نسخ لون واحد فقط ووضعه فوق الـ]]></b:skin>

الشكل الأحمر

#blog-pager{float:left;font-size:16px;line-height:normal;margin:0 20px;padding:2em 0}
.showpageNum a,.showpage a,.showpagePoint{background:#e74c3c;border:none;border-bottom:3px solid #862B20;color:#FFF;font-size:15px;font-family:open sans;font-weight:700;margin-left:10px;border-radius:5px 5px 5px 5px;-webkit-border-radius:5px 5px 5px 5px;-moz-border-radius:5px;-o-border-radius:5px 5px 5px 5px;transition:background 400ms;-webkit-transition:background 400ms;-moz-transition:background 400ms;-o-transition:background 400ms;padding:10px 20px}
.showpageNum a:hover,.showpage a:hover,.showpagePoint,.blog-pager-newer-link,.blog-pager-older-link,.home-link{background:#c0392b;color:#FFF}
.showpageOf{display:none!important}
@font-face{font-family:'font-style:normal;font-weight:700;src:local('OpenSansBold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format('woff')}

الشكل الأزرق

#blog-pager{float:left;font-size:16px;line-height:normal;margin:0 20px;padding:2em 0}
.showpageNum a,.showpage a,.showpagePoint{background:#3498db;border:none;border-bottom:3px solid #246EA0;color:#FFF;font-size:15px;font-family:open sans;font-weight:700;margin-left:10px;border-radius:5px 5px 5px 5px;-webkit-border-radius:5px 5px 5px 5px;-moz-border-radius:5px;-o-border-radius:5px 5px 5px 5px;transition:background 400ms;-webkit-transition:background 400ms;-moz-transition:background 400ms;-o-transition:background 400ms;padding:10px 20px}
.showpageNum a:hover,.showpage a:hover,.showpagePoint,.blog-pager-newer-link,.blog-pager-older-link,.home-link{background:#2980b9;color:#FFF}
.showpageOf{display:none!important}
@font-face{font-family:'font-style:normal;font-weight:700;src:local('OpenSansBold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format('woff')}

الان انتهى الموضوع اي استفسار اترك تعليق يرجى ذكر المصدر عند النقل تقديرا للمجهود

By glok

Similiar tagsإضافات بلوجر دروس و شروحات Css