Add The Numbered Next And Previous Page Navigation Gadget Under Your Blog Posts




| 25 comments

Once again we are trying to make it easy for people to navigate your blog.The easier it is for people to Navigate you blog the more likely it is they will stay and become return visitors.I'm sure you have seen this script used on lots of blogs and thought 'I would like that on my blog'.You probably thought adding it to your blog would be hard but once again i have a nice easy piece of code you can add to achieve the effect.
Numbered Next And Previous Page Navigation Gadget
So what exactly is the page navigation widget.



Basically when someone reaches the end of a post they have the option to go to the next page, previous page or click a number to skip to that post, Its something we see on millions of web pages even the Google search page.

Here is how it looks on my blog :

You can see it starting from the first page with just the next option, in the image at the top of the post you how it looks with next and previous.


Page nav for blogger


You can try it out at the bottom of this post, However the template i am using is a specialized template using a specialized read more function that shows posts in a preview box not only on the home page but on all pages so it will work much better on your blog than mine.On your blog it will skip to the the full page of your next post.

Adding it to your blog

Step 1. Click 'Layout' > 'Add a gadget' for your blog

Blogger layout


add a gadget blogger


Step 2. Choose Html/Javascript

add html javascript blogger

Remember you can get all these tips sent directly to your email and stay a step ahead.Its quick easy and of course a free service provided by Google just fill in the form below the post.

Step 3. Copy the code below and paste it into the Html/Javascript area provided :
(There is a lot of code so be careful to get it all)
<script type="text/javascript">

var home_page_url = location.href;


var pageCount=1;
var displayPageNum=3;
var upPageWord ='Previous';
var downPageWord ='Next';


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 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 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;
}


}


</script>
<script type="text/javascript">

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){
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>


Once you paste in the code click save.

Putting the gadget in place.

Before we finish : If you need more help or have an opinion or suggestion Please leave a comment Below.This is a Do-Follow blog.

You will now want to place the gadget under your posts.
Click on the gadgat and 'Drag and Drop it' below the post area as shown below :


Once you have the gadget under your posts click the save button in the top Right of the layout page.

If you want there are some changes you can make to the appearance of the gadget.I wont add them here as it will only confuse people.If you have some knowledge of code and script you can edit the code yourself or you can drop a comment and i will try help you out.

I think this is a great gadget and a 'Must Have' gadget what do you think ?


Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative


If You Enjoyed This Post Please Take 5 Seconds To Share It.

25 comments:

  1. I have been wanting to add this to my blog and couldnt find it.Thanks.

    ReplyDelete
  2. Hi,
    I am writing just to introduce myself. My name is
    Anuraag, and I also have a blog in the technology niche.
    The URL is http://technoratti-anuraag.blogspot.com/.
    I found your content very interesting, and I will
    definitely be recommending it to my readers.
    Best wishes,
    Anuraag

    ReplyDelete
  3. Hi Anuraag,

    Great to meet, Thanks for the nice comment.
    Being recommended by fellow Bloggers is always an honour and is always appricated.

    I will be sure to check out your blog, keep in contact and keep blogging it's great fun !

    Paul.

    ReplyDelete
  4. Helo Paul. I got another problem. I followed whay you said. But i see the html code in my site and not that numbers. why is that ? thank you !

    ReplyDelete
  5. Hello Sorry. Now when i checked it. I got the numbers. But it is not as what you said. IT looks like this "Pages (9)1234 Next" ! Please help me. Thankx aloT ! U rock !

    ReplyDelete
  6. Hi,

    You have (9) because your blog must only have 9 posts this will increase as you publish more posts.

    Also the css in your custom template is the reason it does not appear the same as here.

    Paul.

    ReplyDelete
  7. Oh okay. So is there any way to change that ? Thank you for your help !

    ReplyDelete
  8. Genius. I'm blogging a novel, which means it reads backwards. This will help my readers get the story in chronological order, if they want. Thanks for making it available.

    ReplyDelete
  9. Genius. I'm blogging a novel, which means it reads backwards. This will help my readers get the story in chronological order, if they want. Thanks for making it available.

    ReplyDelete
  10. Good post but does not appear the pages like the image............please look up again...

    ReplyDelete
  11. Hi if I'm also using a specialized template using a specialized read more function that shows posts in a preview box not only on the home page but on all pages , how can i incorporate this widget?

    ReplyDelete
  12. @ Johran - The two scripts i have for page nav will only display on the home page and pages navigated to from the home page.They do not display on label pages, search pages or archive pages unfortunately.

    Paul.

    ReplyDelete
  13. This worked!!! sort of. but it starts at the last page...not the first. How do I fix it?

    ReplyDelete
  14. :( my blogger template dosen't show to add a gadget to my blogger :(

    ReplyDelete
  15. I've been looking for something like this for SO long! Thanks a bunch! Great site you have here!

    ReplyDelete
  16. Hello Paul. i have tried this widget with almost every code available online but it does not show a thing. i really need this widget for my blogger blog. please help me out.

    i can send you my template if you want.please reply

    ReplyDelete
  17. This is awkward as I only see single posts on the next page making navigation even more of a nightmare

    ReplyDelete
  18. thanks for the great info..iam searching for the topic like this for many days..at last i found this blog..

    ReplyDelete
  19. plz help me to add page navigation in my blog.i have already did more than 10+ efforts to add it but it still not showing me.

    ReplyDelete
  20. This does absolutely nothing when I install it. It's an old post that may have stopped working with the recent blogger updates.

    ReplyDelete
  21. Thanks for sharing this article...

    ReplyDelete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us