Making a Problem Solved Page Navigation for Blogger/Blogspot

Many days (or months) ago, I want to applying a Page Navigation for my blog. I’ve tried to put many script from tutorials I’ve get from out there. But it didn’t work properly. I’ve so frustrated. Because I have so many posts in my blog.

But now, I have a Page Navigation that works properly. You can see it at the Home page of this blog. Or by clicking at the part of the label. You will see it at the bottom of the page.
This script is not much different from most existing scripts. It’s just take a few changes to become perfect.
Here we will explain why the script is different from the others.
The previous script have some problems, and the explanation is :

1. If we post more than one post in same day, navigation can’t show right result. They solve by only post one post in one day. But it will take a problem for someone who have many posts in previous posts and they post more than one in same day, the problem is because the pervious hack only use Date not until Time (this problem Solved in this script).
2. Label problem, if we click the label, it will show more than maximum post per page (problem is from blogger.com) , one blogger have good idea to use max (Blogger Pluggin), but he still use same script, only use max, but if I checked some page not shown properly. If you want to know why it can’t solved that problem, because Label have different JSON feed (this problem Solved in this script)

Explanation what have been changed inside the script :

1. Var timestamp , Prev hack only count Date not time, the problem occur when many post in one day.
   
2. Separate JSON link and Function script for Page and Label.
   
3. Make Max Post for Label.
   

Follow All tutorial in this post because the script is different from the other script. CSS is same with previous hack.
Now tutorial to use this script, I’ll use tutorial from Abu Farhan
Step 1 : Log in to your blogger account and navigate to Layout section. Now go to the edit HTML sub tab.
Step 2 : search this line ]]> and add this CSS code below, just before that line.

.showpageArea {padding: 0 2px;margin-bottom:10px;margin-top: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;
}

It must look like this :

(Picture source from Mohamed Rias)

Step 3 : Now search for this code or related in your template ( no need to expand widgets )

<b:section class=’main’ id=’main’ showaddelement=’yes’>

<b:widget id=’Blog1’ locked=’true’ title=’Blog Posts’ type=’Blog’/>

</b:section>

Now Add This script just below the </b:section> .
if you can’t find you can search (ctrl+f) by this key ” Blog1 ”
Or if Difficult you can put before closing </body> tag
Click SAVE TEMPLATES

This Modification Script already solve the problem for Post more than one and Label Problem.
In the code above you can edit this line only :
var pageCount=10;
var displayPageNum=6;
1 : var pageCount = 10;
The Pagecount represents number of posts to be shown in single page. Change the digit to show as many pages you want.
For example :
In my example I have put that value as 10. In each page you can see only 10 posts .
The number have to same with your setting

The picture show from Setting –> Formatting –> Show –> 10 posts
2 : var displayPageNum = 6;
here the digit 6 represents number of pages to be listed.
For example :
In my example I have chosen 6 , then 6 pages will be shown.

Important!

Modification Step for Label :
Step 1 : if you don’t have a Labels Gadget, Add Label Gadget (Layout –> page elements –> Add Gadget –> Select Labels)
Step 2 : From Layout –> Edit HTML . Don’t Forget to backup your template first! (Download Full Template)
Step 3 : Click Expand widget
Step 4 : Search this line (labels gadget has two line like this)

<a expr:dir=’data:blog.languageDirection’ expr:href=’data:label.url’><data:label.name/></a>

Change the two lines with this script

<script type='text/javascript'>
  var lblname = &quot;<data:label.name/>&quot;;

  lblname2 = encodeURIComponent(lblname);
  var feedlink = &#39;/search/label/&#39; + lblname2+&#39;?&amp;max-results=10&#39;;
  document.write(&#39;&lt;a href=&quot;&#39; + feedlink + &#39;&quot;&gt;&#39;+lblname+&#39;&lt;/a&gt;&#39;);
</script>

And Click “save template”

Finally, I hope it can work properly for your blog. Thanks.

DEMO HERE

NOTE :
Because the Maximum number of Blogger feed so far is 500, so for this hack only read last 500 post. Your post from the top 501 will not appear.
If you use the script, it will make your blog very slow to load because it have big json data to download. So, it’s up to you to take the script or not.