Add Numbered Page Navigation for Blogger شرح اضافة ترقيم الصفحات للمدونة بلوجر

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

كل ما عليك لتطبيق هذه الاضافة هو متابعه الشرح مع التركيز وان شاء الله سوف اعرض طريقه تركبيها مع شرح كيفية التعديل عليها بخصوص الالوان او الاحجام وغيرها ؛
طريقة التركيب :

• سجل دخولك الى لوحة تحكم المدونة بلوجر
• اختر التبويب ( قالب) على يمين لوحة التحكم
• اضافط على ( نسخ احتياطية/ استعاده) ؛ ثم اضغط على (تنزيل النموذج الكامل) وذلك لاسترجاع القالب مره اخرة فى حالة حدوث خطأ لا قد الله.
• نرجع الى التبويب (قالب)
• نختار ( تحرير HTML)
• نضغط على ( توسيع قوالب عناصر واجهة المستخدم)
• نقوم بالبحث عن الكود التالى باستخدام ازار لوحة المفاتيح ( Ctrl + F)

]]></b:skin>

•  ثم ضع فوقه مباشرة الكود الاتى :

/*------- pages-numbers-www.bloggertofree.com/-----------*/
.showpageArea{font-family:verdana,arial,helvetica; color:#000; font-size:18px; margin:10px}
.showpageArea a{color:#000; padding-top:40px; text-shadow:0 1px 2px #fff; font-weight:400}
.showpageNum a{padding:0px 8px 0px; margin:1px 4px; text-decoration:none; border:2px solid #0090D5; -webkit-border-radius:3px}
.showpageNum a:hover{background-color:#000; color:#fff; padding:0px 8px 0px; border:1px solid #6F6F6F}
.showpageOf{margin:0 8px 0 0}
.showpagePoint{color:#fff; text-shadow:0 1px 2px #333; padding:0px 8px 0px; margin:2px; font-weight:400; -webkit-border-radius:3px; border:1px solid #2A2A2A; background-color:#ff0000; text-decoration:none}
/*------- pages-numbers-www.cairo-pro.blogspot.com/-----------*/

•  فى الكود السابق يمكنك التغير كما يحلو لك فى الالوان وانواع الخطوط  والحواف والخلفيات
• ثم قم بالبحث عن الكود الاتى وذلك بواسطة الضغط على لوحة المفاتيح (Ctrl + F)

</body>

• ثم ضع فوقه هذا الكود 

<script style='text/javascript'>
var pageCount=3;
var displayPageNum=5;
var upPageWord=&quot;<img onmouseout='this.style.opacity=0.80;this.filters.alpha.opacity=80' onmouseover='this.style.opacity=1;this.filters.alpha.opacity=100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1HT27NbsrVrtRkdPJTn_7Q9h6jf3CfVBT8rJxAqbtkJZVCaznU6KpuYt_sEZ95lAC7Adk09viKxF2EYjNLgCvWsYDweLjL8P9-fU2BCzwizbqLaWCC1MBiSc3Yk3m4oO8Bf81E4Gs4Gg/s1600/leftarrow.png' style='opacity:0.80;filter:alpha(opacity=80)'/>&quot;;
var downPageWord=&quot;<img onmouseout='this.style.opacity=0.80;this.filters.alpha.opacity=80' onmouseover='this.style.opacity=1;this.filters.alpha.opacity=100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCAvcIOX75CP9XVdGj1cLaFOc0WgeE1zbwqyLdNEF1Vy217e8EaC5i3qDPmYGqdOlj3oHapenMYByhjovdfhXnhST8EW8oYbDSytBJdJ6Ko57c_wrcren-69dXh0elvHi2EKcNHo4kc3Q/s1600/rightarrow.png' style='opacity:0.80;filter:alpha(opacity=80)'/>&quot;;
</script>
<script type='text/javascript'>
//<![CDATA[
var home_page_url=location.href;function showpageCount(json){var thisUrl=home_page_url;var htmlMap=new Array();var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search?updated-max='+timestamp+'&max-results='+pageCount}}itemCount++}for(var p=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum-1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum-2){if(thisNum==2){upPageHtml='<span class="showpage"><a href="/">'+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html+='<span class="showpageNum"><a href="/">1</a></span>'}else{html+='<span class="showpageNum"><a href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPageHtml='<span class="showpage"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){html=''+upPageHtml+' '+html+' '}html='<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf">('+(postNum-1)+')</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");if(postNum<=2){html=''}for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}function showpageCount2(json){var thisUrl=home_page_url;var htmlMap=new Array();var isLablePage=thisUrl.indexOf("/search/label/")!=-1;var thisLable=isLablePage?thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length):"";thisLable=thisLable.indexOf("?")!=-1?thisLable.substr(0,thisLable.indexOf("?")):thisLable;var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';var labelHtml='<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';var thisUrl=home_page_url;for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount}}itemCount++}for(var p=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum-1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum-2){if(thisNum==2){upPageHtml=labelHtml+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html=labelHtml+'1</a></span>'}else{html+='<span class="showpageNum"><a href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPageHtml='<span class="showpage"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){if(!isLablePage){html=''+upPageHtml+' '+html+' '}else{html=''+upPageHtml+' '+html+' '}}html='<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf">('+(postNum-1)+')</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");if(postNum<=2){html=''}for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}var thisUrl=home_page_url;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}var home_page="/";if(thisUrl.indexOf("?q=")==-1&&thisUrl.indexOf(".html")==-1){if(thisUrl.indexOf("/search/label/")==-1){document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')}}
//]]>
</script>

 ملحوظة:

var pageCount=3;      = هو عدد المواضيع التى تعرض فى الصفحة الواحده
var displayPageNum=5  = هو عدد ارقام الصفحات المعروضه مثل 1 - 2- 3 - 4 - 5

•  بالتوفيق واى مشكلة لا قدر الله يمكنك المشاركة بتعليق لتشرح فيه ما  واجهك وان شاء الله سوف تجد حلى لمشكلتك