Add Numbered Page Navigation For Blogger


Hello there! There's my buddy ask me this question before!
Here! I show him the simplest method in adding numbered page navigation for his blog!
Let's get started!

1. Log in your Blogger Account > Design > Edit HTML > Check on Expand Widget Templates
2. Then, click on CTRL+F and find this code ]]></b:skin> and paste the code below before it!


.showpageNum a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
border:1px solid #999;
-webkit-border-radius:3px;-moz-border-radius:3px;
background: #ddd;
}

.showpageOf {
margin:0 8px 0 0;
}
.showpageNum a:hover {
border:1px solid #888;
background: #ccc;
}

.showpagePoint {
color:#fff;
text-shadow:0 1px 2px #333;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
-webkit-border-radius:3px;-moz-border-radius:3px;
border:1px solid #999;
background: #666;
text-decoration: none;
}



3. After that, click on CTRL+F find this code </body> and paste the code below just before it!


&lt;script type=&quot;text/javascript&quot;&gt;

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==&quot;.com/&quot;;
var isLablePage = thisUrl.indexOf(&quot;/search/label/&quot;)!=-1;
var isPage = thisUrl.indexOf(&quot;/search?updated&quot;)!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf(&quot;/search/label/&quot;) 14,thisUrl.length) : &quot;&quot;;
thisLable = thisLable.indexOf(&quot;?&quot;)!=-1 ? thisLable.substr(0,thisLable.indexOf(&quot;?&quot;)) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= &#39;&#39;;
var upPageHtml =&#39;&#39;;
var downPageHtml =&#39;&#39;;

var pageCount = 3;
var displayPageNum =3;
var upPageWord = &#39;Previous&#39;;
var downPageWord = &#39;Next&#39;;



var labelHtml = &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/search/label/&#39; thisLable &#39;?&amp;max-results=&#39; pageCount &#39;&quot;&gt;&#39;;

for(var i=0, post; post = json.feed.entry[i]; i  ) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=&#39;&#39;){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c  ) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum  ;
htmlMap[htmlMap.length] = &#39;/search/label/&#39; thisLable &#39;?updated-max=&#39; timestamp &#39;T00%3A00%3A00%2B08%3A00&amp;max-results=&#39; pageCount;
}
}
}
}//end if(post.category){

itemCount  ;
}

}else{
if(title!=&#39;&#39;){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!=&#39;&#39;) postNum  ;
htmlMap[htmlMap.length] = &#39;/search?updated-max=&#39; timestamp &#39;T00%3A00%3A00%2B08%3A00&amp;max-results=&#39; pageCount;
}
}
itemCount  ;
}
}

for(var p =0;p&lt; htmlMap.length;p  ){
if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum displayPageNum)){
if(fFlag ==0 &amp;&amp; p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml   upPageWord  &#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}else{
upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;/&quot;&gt;&#39;  upPageWord  &#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}
}else{
upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;&#39; htmlMap[p] &#39;&quot;&gt;&#39;  upPageWord  &#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}

fFlag  ;
}

if(p==(thisNum-1)){
html  = &#39;&lt;span class=&quot;showpagePoint&quot;&gt;&#39; thisNum &#39;&lt;/span&gt;&#39;;
}else{
if(p==0){
if(isLablePage){
html = labelHtml &#39;1&lt;/a&gt;&lt;/span&gt;&#39;;
}else{
html  = &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/&quot;&gt;1&lt;/a&gt;&lt;/span&gt;&#39;;
}
}else{
html  = &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;&#39; htmlMap[p] &#39;&quot;&gt;&#39;  (p 1)  &#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}
}

if(eFlag ==0 &amp;&amp; p == thisNum){
downPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt; &lt;a href=&quot;&#39; htmlMap[p] &#39;&quot;&gt;&#39;  downPageWord  &#39;&lt;/a&gt;&lt;/span&gt;&#39;;
eFlag  ;
}
}//end if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum displayPageNum)){
}//end for(var p =0;p&lt; htmlMap.length;p  ){

if(thisNum&gt;1){
if(!isLablePage){
html = &#39;&#39; upPageHtml &#39; &#39; html  &#39; &#39;;
}else{
html = &#39;&#39; upPageHtml &#39; &#39; html  &#39; &#39;;
}
}

html = &#39;&lt;div class=&quot;showpageArea&quot;&gt;&lt;span style=&quot;COLOR: #000;&quot; class=&quot;showpageOf&quot;&gt; Pages (&#39; (postNum-1) &#39;)&lt;/span&gt;&#39; html;

if(thisNum&lt;(postNum-1)){
html  = downPageHtml;

}

if(postNum==1) postNum  ;
html  = &#39;&lt;/div&gt;&#39;;

if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName(&quot;pageArea&quot;);
var blogPager = document.getElementById(&quot;blog-pager&quot;);

if(postNum &lt;= 2){
html =&#39;&#39;;
}

for(var p =0;p&lt; pageArea.length;p  ){
pageArea[p].innerHTML = html;
}

if(pageArea&amp;&amp;pageArea.length&gt;0){
html =&#39;&#39;;
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
&lt;/script&gt;
&lt;script src=&quot;/feeds/posts/summary?alt=json-in-script&amp;callback=showpageCount&amp;max-results=99999&quot;; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;




Done! Save your template now! The Red tag above can be controlled. It's up to you how much page you wanna show in your blog! Good luck guys!


Sharing is simple! Make sure, drop some comment here! Thanks me if you had benefit from this post! If you have anything in mind, feel free to drop some comment here.. Just ask me if you have any problem with those codes.. Happy Blogging Guys! Follow me for the latest post and hacks!


Labels: