Numbered page navigation for Blogger

By on July 16, 2014


Many blogs, especially on WordPress, are using numbered page navigation because it is very easy for the user to navigate and jump from page to page and also to see the total number of posts published.
Blogger has the option to set how many posts to display per page. After the number of posts on the entire blog goes over the displayed number per page, “Older Posts” and “Newer Posts” navigation links will appear on footer of homepage and archive pages. This is not bad but it is not so efficient as a numbered page navigation. Sadly Blogger doesn’t have yet a build-in function for numbered page navigation and this is why I am going to show you how to build one.
The numbered page navigation for blogger will look something like this:
Numbered_page_navigation_blogger
I am also going to give more styles, so you can choose one which fits your template design.
If you have some knowledge about working with CSS, you can create your own style or just edit one which is provided below.
So lets get started:
1. Login into your dashboard, go to “Template” then click on “Edit HTML”. You also might want to back-up your template first.
blogger_dashboard_edit_template
2. Click anywhere on the code and hit CTRL + F.
In the top right corner of the code a search-box will appear. Type in  ]]></b:skin>
blogger_edit_html
3. After finding the ]]> tag, copy and paste right above it the desired style which you can find below.
desired_style_blogger_edit_HTMLStyle 1:

numbered-page-navigation-style-1

 Style 2:

numbered-page-navigation-style-2

 Style 3: I find this one to be very nice for common use, as it has the most neutral color ever.

numbered-page-navigation-style-3

Style 4: This one has very nice web 2.0 vivid colors. It fits perfectly to a candylike template 🙂

numbered-page-navigation-style-4

 Style 5:

numbered-page-navigation-style-5

 Style 6: Perfect for dark templates.

numbered-page-navigation-style-6

 Style 7: This one fits perfectly to Blogger default Simple dark template.

numbered-page-navigation-style-7

If you have any CSS knowledge, you can modify any of the above styles in order to fit your template perfectly, or to make your own from the scratch.
Also if you indent to eliminate the “First” and “Last” buttons, you just add the following line of CSS right after the style:

4. OK! we finished with the looks, but now we need to add the functionality script. So, in the code type in the Search box (CTRL + F) </body>

code_search_body5. After you find the </body> tag in the code, right above it copy and paste the following script:

It should look something like this:

pahe_navigation_script_bloggerOk now if you need to make some changes according to your setings:
var perPage represents how many posts will be shown in each page, by default it is 7. IMPORTANT!  This value has to be the same as the number of posts set on the main page. In order to check and/or change this go to Settings -> Post and comments and there you can see / change it.

blogger_setting_posts_and_comments
var numPages represents how many pages will be shown in the page navigation. The default number is 6.

Now save you template and check it out! Yay! now you have a numbered page navigation on your Blogger website as the big boys do 🙂

If you have any trouble in using Numbered Page Navigation for Blogger, don’t hesitate to contact us.

21 Comments

  1. Jamal

    July 16, 2014 at 11:00 am

    Octopus you are the best! Thank you! I was looking for this by a loong time 🙂

  2. Drake500

    July 16, 2014 at 1:59 pm

    Thank you for this! It works like a charm!

  3. PinkDonut

    July 16, 2014 at 2:04 pm

    It only shows button “1”. Please help me!

    • Wizard

      July 16, 2014 at 2:06 pm

      I suppose that you have more then 1 post on your blog. If you do, you need to change perPage= number. the number from the script has to match your posts per page number. It has to be the same!

      • PinkDonut

        July 16, 2014 at 3:10 pm

        LOL thanks I’ve missed that. It works now thank you!

        • Wizard

          July 16, 2014 at 3:23 pm

          I’m glad to hear that it works 🙂

  4. Oreg

    July 16, 2014 at 8:36 pm

    Thank you 1000! I bought you a beer 🙂 Cheers!

    • Wizard

      July 16, 2014 at 8:45 pm

      Thank you Oreg, I appreciate it. Cheers!

  5. SmileyDoll

    July 17, 2014 at 8:21 am

    Thank you so much for sharing this. It works perfectly!
    Have a beer from me too.
    Cheers!

    • Wizard

      July 17, 2014 at 10:05 am

      Thank you too! Cheers!

  6. Darwin

    July 22, 2014 at 9:44 pm

    Hey Octopus! I would like to add some smileys on the comment area in my blogger. Is there any way to do so?

    • Wizard

      July 22, 2014 at 9:45 pm

      Dear Darwin, that’s an interesting request. I will write the next article based on that 🙂

  7. Eva

    November 5, 2014 at 11:13 pm

    CAN YOU PLEASE HELP ME!!!!!!!!

    I tried it, and yes, there are buttons… but they are very weird.

    it looks like this: Page 1 of 3123Next »Last

    CAN YOU PLEASE HELP ME, I DON’T KNOW HOW TO REMOVE THEM!

    • Wizard

      November 5, 2014 at 11:23 am

      Dear Eva, please give me the link of your blog in order to see what’s going on there so I can fix it fast.

  8. Manoj

    October 12, 2015 at 3:46 pm

    thanks, It is working in home page only but it is not working in remaining pages properly how to overcome this problem

    • Wizard

      October 12, 2015 at 4:31 pm

      Dear Manoj, please share your link to see what’s going on there. So, we can work this step by step.

  9. Sandra

    October 12, 2015 at 4:33 pm

    Thank you Wizard! It works like a charm. You just need to use it on default templates if you have no idea what are you doing 😛

    Thank you so much!

  10. leos

    January 6, 2016 at 1:44 am

    best tutorial, I searched a lot for this navigation solution :{P kiss

  11. fred

    April 20, 2016 at 7:16 pm

    Please my label pages are not showing the numbered pages please help me

  12. Jim Geier

    October 4, 2016 at 2:11 am

    I have tried this a number of times, and I cannot get it to work. How can I get some help. The instructions are clear, and the editing of the HTML seems to go right, but when I view the blog after saving the template, I never see numbered pages.

  13. Govinda

    November 14, 2016 at 1:37 pm

    I can’t find the ]]>
    in my blog

Leave a Reply

Your email address will not be published. Required fields are marked *