วิธีทำ Numbered Page Navigation : ใส่เลขหน้าให้กับบล็อก

เมื่อบล็อกของเรามีจำนวนบทความที่มาก เท่ากับว่าบล็อกของเราก็จะมีการแสดงผลหลายหน้า การใส่เลขหน้าให้กับบล็อก ก็สะดวกกับผู้อ่านในกรณีที่ต้องการย้อนไปอ่านบทความที่เก่ากว่า หรือ บทความล่าสุด แต่ในเทมเพลตบล็อกส่วนใหญ่ มักไม่ปรับให้มีการแสดงผลเป็นเลขหน้า บทความนี้จึงขอเสนอ วิธีการใส่เลขหน้าให้กับบล็อกหรือ "การทำ Numbered Page Navigation"

หากใครยังนึกไม่ออกว่า การใส่เลขหน้าให้กับบล็อกหรือการทำ Numbered Page Navigation มันเป็นยังไง ขออธิบายง่ายๆได้ดังภาพด้านล่าง

วิธีการทำมีดังนี้

1. ไปที่ template > Edit HTML แล้วค้นหาแท็ก ]]></b:skin>
และใส่ code สีแดง ไว้บรรทัดก่อนแท็ก ]]></b:skin>
(วิธีกดค้นหาแท็กทำได้โดยกดปุ่ม ctrl และ f พร้อมกัน)

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #ccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #ccc;
background-color:#ccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #ccc;
background: #ccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #ccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333;
}

2. หาแท็กคำว่า </body>  และใส่ code ด้านล่างไว้บรรทัดก่อนแท็ก </body>

<script style='text/javascript'>
var pageCount=5;
var displayPageNum=2;
var upPageWord=&quot;Previous&quot;;
var downPageWord=&quot;Next&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"> Pages ('+(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"> Pages ('+(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>

การปรับแต่งเพิ่มเติม
1. code สีส้ม จะเป็นตัวกำหนดการแสดงผลหน้าเลขบล็อกซึ่งสามารถปรับแต่งได้ตามต้องการ

var pageCount=5; เลขห้า คือจำนวนบทความที่คุณต้องการให้แสดงผล เมื่อมีการกดไปหน้าอื่นๆ เช่น ตอนนี้คุณอยู่หน้าแรกของบล็อก เมื่อคุณกดไปหน้าที่สอง มันก็จะแสดงผลบทความบล็อกจำนวนห้าบทความ ดังนั้นถ้าคุณต้องการให้มีการแสดงผลมากกว่านั้น ก็สามาถเพิ่มจำนวนได้โดยเปลี่ยนเลขห้า เป็น สิบ...

var displayPageNum=2; เลขสอง ก็คือ จำนวนเลขหน้าที่ต้องการแสดงโดยนับจากเลขหนึ่งไปอีกสอง ก็คือแสดงผลสามหน้า อธิบายได้ง่ายๆตามภาพด้านล่าง

ดังนั้นถ้าคุณต้องการให้มันแสดงผลเป็น 1 2 3 4 5 ก็ต้องเปลี่ยนจากเลขสองเป็น 4

 2. code สีแดงจะเป็นส่วนที่ปรับแต่งรูปแบบเลขหน้าและลูกเล่นอื่นๆให้มีความสวยงาม

 

เรียบเรียงวิธีการทำจาก : anshuldudeja.com