Blogger: ใส่แถบแสดงเลขหน้าในบล็อก

การใส่แถบแสดงเลขหน้าในบล็อก (Numbered Page Navigation Widget Blogger) ทำได้ดังนี้

อธิบายเพิ่มเติม
นอกจากนี้สามารถลองดูวิธีแบบ Gadget ได้ที่ลิงก์นี้
http://tip.maxlayout.com/2013/10/blogger-add-gadget-page-number-navigation.html

ขั้นตอนที่ 1. เข้าสู่บล็อกของคุณจากนั้นไปที่
'แม่แบบ > แก้ไข HTML'

---

ขั้นตอนที่ 2. วางสไตล์ของแถบแสดงเลขหน้า
โดยให้กด 'Ctrl + F' บนคีย์บอร์ดแล้วสั่งค้นหาคำว่า
]]></b:skin>

จากนั้นให้แทนที่โค้ดที่หาเจอนั้นด้วยโค้ดข้างล่างนี้
<!-- Maxlayout-numbered-page-navigation-styles-start -->
.showpageArea {
padding: 0 2px;
margin-top: 10px;
margin-bottom: 10px;
}

.showpageArea a {
border: 1px solid #505050;
color: #000000;
font-weight: normal;
padding: 3px 6px !important;
padding: 1px 4px ;
margin:0px 4px;
text-decoration: none;
}

.showpageArea a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

.showpageNum a {
border: 1px solid #505050;
color: #000000;
font-weight: normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}

.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

.showpagePoint {
font-size: 11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #333;
color: #fff;
background-color: #000000;
}

.showpage a:hover {
font-size: 11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

.showpageNum a:link,.showpage a:link {
font-size: 11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;
}

.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
<!-- Maxlayout-numbered-page-navigation-styles-end -->
]]></b:skin>

---

ขั้นตอนที่ 3. วางสคริปต์ของเครื่องมือแถบแสดงเลขหน้า
โดยให้ค้นหา
</body>

จากนั้นให้แทนที่โค้ดที่หาเจอนั้นด้วยโค้ดข้างล่างนี้
<!-- Maxlayout-numbered-page-navigation-widget-start -->
<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>
<!-- Maxlayout-numbered-page-navigation-widget-end -->
</body>

---

ขั้นตอนที่ 4. กำหนดจำนวนบทความที่แสดงเมื่อเลือกป้ายกำกับ
โดยให้ค้นหา
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
โดยจะพบโค้ดนั้นแสดงอยู่ 2 จุด

โดยให้แทนที่โค้ดดังทั้งสองจุดที่กล่าวมานั้นด้วยโค้ดใหม่ด้านล่างนี้
<!-- Maxlayout-numbered-page-navigation-customize-label-start -->
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?&amp;max-results=7&quot;'><data:label.name/></a>
<!-- Maxlayout-numbered-page-navigation-customize-label-end -->
โดยเลข 7 ในบรรทัดที่ 2 ของโค้ดนี้ก็คือจำนวนบทความที่แสดงขณะเลือกป่ายกำกับ ซึ่งตั้งค่าได้ตามต้องการ

---

ขั้นตอนที่ 5. เลือกที่ 'บันทึกแม่แบบ' จากนั้นลองเปิดบล็อกดูผลลัพธ์

---

อธิบายเพิ่มเติม
เราสามารถแก้ไขจำนวนหน้าในแถบนำทางได้ด้วยการปรับตัวเลขจากโค้ดในขั้นตอนที่ 3 ได้ดังนี้

โค้ดในขั้นตอนที่ 3 บรรทัดที่ 3 ซึ่งเขียนว่า
var pageCount=5;
หมายถึงจำนวนบทความที่ถูกแสดงให้เห็นในแต่ละหน้า โดยจำนวนบทความที่ตั้งได้เอาไว้นี้จะถูกยกเว้นในหน้าแรกของบล็อก

โค้ดในขั้นตอนที่ 3 บรรทัดที่ 4  ซึ่งเขียนว่า
var displayPageNum=2;
หมายถึง จำนวนเลขหน้าถัดไปสูงสุดที่สามารถแสดงได้ทั้งก่อนและหลัง นับจากที่เรากำลังเลือกอยู่นี้

---

Credit:
http://www.anshuldudeja.com/2009/01/numbered-page-navigation-widget-blogger.html
http://www.abu-farhan.com/2009/12/numbered-page-navigation-for-blogger-new-script/
http://www.cooltricksntips.com/2010/08/numbered-page-navigation-widget-blogger.html