Blogger is a great platform for new and also for expert bloggers as well. Blogger has many features that you might not even aware of it. One of such hidden feature is that, if you don’t have page Number Navigation in your blogger then you can easily set it up by going to Settings menu Post and comments and selecting the Show at most post potion.
When your blog post is greater to the Number that is set by default, you will able to see as Older Posts and Newer Posts.
It does not look cool, Right!
So, instead of using such older and newer posts links, you can help you blog readers to directly go and jump to a specific number and navigate as per their wish.
This will also help your visitors to know exactly the total number of the post has been published in that particular category or in your whole blog.
So, you will get some of most stylish, good-looking number Navigation widget with just simple steps that will make your blog look dashing and professional. Just follow the steps and you will be done in no time.
Watch the tutorial video before proceeding:
How to add the custom numbered page navigation to your blogger blog
You just need to go only two simple steps
1. Adding the CSS code in your blogger template and
2. Adding the script.
1 Adding the CSS code
a. Login to your Blogger blog and select Template and click on Edit HTML.
b. By pressing Control + F together and type
in the search box and press Enter.
c. Now select any of the custom designs that you like or that fits your blogger theme color and paste the code above the
code.1. Page number navigation with Grey current page tabs
2. Page number navigation with Dark and blue current page tabs.
3. Page number navigation with Dark and Orange current page tabs.
4. Page number navigation with Grey and blue current page tabs.
5. Pagination on a green with orange and pink hover colors.
6. Page number navigation with Grey and red current page tabs.
7. Page number navigation with Orange and Red current page tabs.
2 Adding the script
a. Now again find by pressing Control + F and Type
in the search box and hit Enter.
b. Then add the below script just above the
tag.How to configure default page number navigation settings
When you have finished adding the CSS code and the script, you might want to change my default settings as per your requirements. So, in order to change the default settings, just follow the steps.
a. perPage
a. perPage
This will show how many posts will be shown on each page of your blog (7 by default).
b. numPages
This will show how many pages will be shown in the page navigation (6 by default).
c. var firstText, var lastText, var prevText and var nextText
These just the words that will show up to your visitors for navigation. So, you can type your own within the codes. (First, Last, Previous and Next).
Fixing the Labels
Blogger will show up 20 of your blog post on the label pages by default but you can also make this widget appear on label pages by just cutting down the value in perPage variable.
Find each occurrence of the following code snippet:
Replace it with the below code.
expr:href='data:label.url + "?&max-results=7"'
expr:href='data:label.url + "?&max-results=7"'
Here 7 is the number of your blog posts that will appear on per page.
Lastly, click on Save Template.
You are done. Now, view your blog and happy blogging.
