Page Navigation Hack for Blogger (Blogspot)

Most of the people think that page navigation hack is only for who blogs at WordPress. But here is the hack for those who use blogger and want to add page navigation to their blog. This hack will show page number instead of text link older posts, as shown in following screenshot.

You can see live demo here.

Now this involves two things – adding some CSS code and javascript code to your template. All steps are explained below.

Steps:

  • Log in to your blogger account and navigate to Layout section. Now go to the Edit HTML tab.
  • Search for line ]]></b:skin>
  • Add CSS in this file above that line.
  • 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>

Mods:

In javascript codes in this file, find line…

var pageCount =5;

The digit in red represents number of posts to be shown in single page. Change the digit to show as many pages you want.

var displayPageNum = 3;

Here the digit in red represents number of pages to be listed. Change the digit to list as many pages you want.

That’s it now we have added Page Navigation menu hack to our blog successfully

Your Comments are appreciated.. Β πŸ™‚

(Credits: Muhammed from RTW)

Related: 6 WordPress Plugins for Better Navigation and User Experience


[Editor Note: This is first post by Arjun Kumar on this blog. Arjun is just 16 year old and that make him youngest Devil in team DW. He is working hard on our new project OrkutBuddy, dedicated for orkut users.

If you like to write for Devils Workshop, please check this. Details about our revenue sharing programs are here.]

69 Replies to “Page Navigation Hack for Blogger (Blogspot)”

  1. @ Arjun:

    Dude please change the colors of the Ads as recommended by our Devil…

    Those colors really look very bad on this theme πŸ™

  2. Amazing!
    It worked like a charm!
    DW should have more posts like these. Crisp, precise to the point & very easy to use!
    And Arjun, Great Post! We look forward to more posts like this.

    1. Try this code. It works for me.

      Use the CSS given above and then do this.

      replace with

      <script type=’text/javascript’>
      var home_page="/";
      var urlactivepage=location.href;
      var postperpage=3;
      var numshowpage=4;
      var upPageWord =’Prev’;
      var downPageWord =’Next’;
      </script>
      <script src=’http://bvtstv.googlecode.com/svn/trunk/bvtsts.js’
      type=’text/javascript’></script>

  3. it dint work for me friend….it does not show any parsing errors in the xml template but still….it does not work…donno why?…

  4. @ Abhishek and @ Rohit

    Some reason may be that the var pagecount=5; and the number of posts in main page of the blog which is to be edited in formatting tab in setting may be not the same..

    just check that and reply back..

    1. @Gilles
      First sorry for late reply buddy as I was away on a long vacation… πŸ™
      I checked your blog but could not get what you are talking about exactly.
      Please let us know if you are still having problem. Also try to give more details.

  5. Tried this hack, and a similar one on blogger buster, and both make some posts vanish at the beginning of each new page…
    Is there a bug somewhere?

  6. This isnt working for me. Nothing appears. the blog post widget in page elements is set to show 5 blogs in a page. Any ideas??

  7. yes i did.. Just confirming.. Am i supposed to paste the 2nd javascript codes BEFORE or AFTER /b:section??? I did both..

  8. great widget ……….
    but it couldn’t working fine….
    i installed this widget i think u r the real hacker of the code i found it on some other blogs those just modified css of this…
    i like the above navigation style that’s why i use it….

    ” the problem is when i navigate to next or 2 page it navigates some far and it displays only some posts only ”

    just check the below blog and use navigation to understand …..

    http://funevil.blogspot.com/search/label/Animal%20Pics?max-results=5

    Thanks in ADV
    From http://funevil.blogspot.com/

  9. Hi,nice hack but I wanna show this on my homepage too.While this hack works well from the second page the 1st page(homepage) still shows a small older post link.
    How can I sort it out????

  10. can u please tell me how to get page navigation widget like yours i don’t like the one that you have posted in article i like your working page navigation….

  11. Thank you very much πŸ™‚ Working fine!

    It would be better if you guys include navigation to search result also…

  12. it really works,great hack dude………keep it up i ll keep on checking ur site for updated hacks……..u rock….

  13. hey buddy this is a great tutorial =D
    i would like to ask ur permission to post this tutorial on my blog.
    i’ll link it to ur page.
    do send me an email if u give me that permission.
    thanks

  14. not working for me, i dont see numbers match the post that i desided to show in each page , just show all of them, besides, no next or numbers at the bottom of the page to go to next

  15. my blog does not show page numbers under different labels… but working on homepage…what to do??

  16. my blog does not show page numbers for different labels… but it is working on homepage effectively …and looks nice too what to do??
    i think Gurinder also have the same problem
    Plz help us
    following are the pages
    Home Page
    Label Page

Comments are closed.