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

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

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

خطوات التركيب

1- قم بالدخول الى قالب > تحرير HTML ثم ابحث عن </body>
وضع الكود التالي فوق الـ </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 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+="<span
 class='showpageOf'>Page "+nomerhal+' of 
'+maksimal+"</span>";var 
prevnomer=parseInt(nomerhal)-1;if(nomerhal>1){if(nomerhal==2){if(jenis=="page"){html+='<span
 class="showpage"><a 
href="'+home_page+'">'+upPageWord+'</a></span>'}else{html+='<span
 class="showpageNum"><a 
href="/search/label/'+lblname1+'?&max-results='+postperpage+'">'+upPageWord+'</a></span>'}}else{if(jenis=="page"){html+='<span
 class="showpageNum"><a href="#" 
onclick="redirectpage('+prevnomer+');return 
false">'+upPageWord+'</a></span>'}else{html+='<span 
class="showpageNum"><a href="#" 
onclick="redirectlabel('+prevnomer+');return 
false">'+upPageWord+'</a></span>'}}}if(mulai>1){if(jenis=="page"){html+='<span
 class="showpageNum"><a 
href="'+home_page+'">1</a></span>'}else{html+='<span 
class="showpageNum"><a 
href="/search/label/'+lblname1+'?&max-results='+postperpage+'">1</a></span>'}}if(mulai>2){html+='
 ... '}for(var 
jj=mulai;jj<=akhir;jj++){if(nomerhal==jj){html+='<span 
class="showpagePoint">'+jj+'</span>'}else 
if(jj==1){if(jenis=="page"){html+='<span class="showpageNum"><a
 href="'+home_page+'">1</a></span>'}else{html+='<span 
class="showpageNum"><a 
href="/search/label/'+lblname1+'?&max-results='+postperpage+'">1</a></span>'}}else{if(jenis=="page"){html+='<span
 class="showpageNum"><a href="#" 
onclick="redirectpage('+jj+');return 
false">'+jj+'</a></span>'}else{html+='<span 
class="showpageNum"><a href="#" 
onclick="redirectlabel('+jj+');return 
false">'+jj+'</a></span>'}}}if(akhir<maksimal-1){html+='...'}if(akhir<maksimal){if(jenis=="page"){html+='<span
 class="showpageNum"><a href="#" 
onclick="redirectpage('+maksimal+');return 
false">'+maksimal+'</a></span>'}else{html+='<span 
class="showpageNum"><a href="#" 
onclick="redirectlabel('+maksimal+');return 
false">'+maksimal+'</a></span>'}}var 
nextnomer=parseInt(nomerhal)+1;if(nomerhal<maksimal){if(jenis=="page"){html+='<span
 class="showpageNum"><a href="#" 
onclick="redirectpage('+nextnomer+');return 
false">'+downPageWord+'</a></span>'}else{html+='<span 
class="showpageNum"><a href="#" 
onclick="redirectlabel('+nextnomer+');return 
false">'+downPageWord+'</a></span>'}}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>

انتهينا من الخطوة الاولى
الخطوة الثانية توجد اربعة الوان من هذه الاضافة "احمر ازرق اخضر رمادي" يمكنك نسخ لون واحد فقط ووضعه فوق الـ ]]></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')}

#blog-pager{float:left;font-size:16px;line-height:normal;margin:0 20px;padding:2em 0}
.showpageNum a,.showpage a,.showpagePoint{background:#2ecc71;border:none;border-bottom:3px solid #208C4D;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:#27ae60;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:#34495e;border:none;border-bottom:3px solid #202D3A;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:#2c3e50;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')}

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

Abdelrhman

اضف تعليق

اضافات بلوجر

الأربعاء، 10 سبتمبر 2014

عن الكاتبحسام

هذا النص الغبي ، غير مقصود لقرائته . وفقا لذلك فمن الصعب معرفة متى وأين نهايته ، لكن حتى . فإن هذا النص الغبي ، ليس مقصود لقرائته . نقطة رجوع لسطر مدونة عرب ويب ترحب بك