How to Add Number Page Navigation Widget in Blogger

Page navigation is one of the most important elements of a professional Blogger template. If your blog has many posts, users need an easy way to browse older and newer content without confusion. By default, Blogger only shows Older Posts and Newer Posts links, which is not always user-friendly.

Many professional Blogger blogs use a numbered pagination widget, where users can jump directly to Page 1, Page 2, Page 3, and so on. This not only improves navigation but also enhances your blog’s design and usability.

JKSSB Aspirants Groups

WhatsApp Group Join Now

Telegram Group Join Now

In this tutorial, you will learn how to add a Number Page Navigation Widget in Blogger step by step. This widget displays page numbers along with First, Last, Previous, and Next buttons, giving your blog a modern and professional look.

What Is a Number Page Navigation Widget

A number page navigation widget is a pagination system that appears below blog posts on the homepage and archive pages. Instead of only showing older and newer posts, it displays numbered links like: 1to5

This allows visitors to:

Jump directly to any page
Browse older posts quickly
Navigate smoothly without scrolling endlessly

Why You Should Use Numbered Pagination in Blogger

There are many benefits of adding a number page navigation widget to your Blogger blog.

1. Better User Experience

Visitors can quickly move between pages instead of clicking “Older Posts” repeatedly.

2. Professional Blog Appearance

Numbered pagination makes your blog look modern and well-designed.

3. Improved Content Discovery

Readers can explore more posts easily, increasing page views.

4. Helpful for Large Blogs

If your blog has hundreds of posts, this widget is essential.

5. SEO-Friendly Navigation

Clean pagination improves internal linking and crawlability.

Add Number Page Navigation Widget in Blogger

Follow the steps below carefully to add this widget to your Blogger blog. This tutorial works with most classic and modern Blogger templates.

Important: Always backup your template before editing HTML.

Step 1: Add Pagination Script to Blogger Template

Go to Blogger Dashboard

Log in to Blogger
Select your blog
Go to Theme
Click Edit HTML

Find the Following Code

Use Ctrl + F and search for:

Paste the Code Before It

Now copy and paste the following code just before the line above.

What This Code Does

perPage: Number of posts per page
numPages: Number of page numbers shown
firstText: Text for first page button
lastText: Text for last page button
nextText and prevText: Navigation arrows

You can customize these values later if needed.

Step 2: Replace Default Blogger Navigation Code

Now we will replace Blogger’s default navigation system.

Find This Code

Search for:

Replace It With This Code

Delete the original line and paste the following code in its place.

Why This Step Is Important

Shows numbered pagination on home and archive pages
Keeps default navigation on individual posts
Prevents layout issues

Step 3: Add CSS Styling for Pagination Widget

Now we will style the pagination buttons.

Find the Following Tag

Search for:

Paste the CSS Code Before It

#blog-pager, .pagenavi {

clear: both;

text-align: center;

margin: 30px auto 10px;

}

#blog-pager a, .pagenavi span, .pagenavi a {
margin: 0 5px 0 0;
padding: 2px 10px 3px;
text-decoration: none;
color: #fff;
background: #2973FC;
border-radius: 2px;
transition: all .3s ease-in;
}#blog-pager a:visited, .pagenavi a:visited {
color: #fff;
}#blog-pager a:hover, .pagenavi a:hover {
color: #fff;
background: #000;
}

#blog-pager-older-link,
#blog-pager-newer-link {
float: none;
}

.pagenavi .current {
color: #fff;
background: #000;
font-weight: bold;
}

.pagenavi .pages {
font-weight: bold;
background: #2973FC;
}

What This CSS Does

Centers pagination buttons
Adds smooth hover effects
Highlights the current page
Gives a clean and professional look

Final Step: Save and Test

Click Save
Open your blog homepage
Scroll to the bottom
You will see numbered pagination

Congratulations! You have successfully added a number page navigation widget to your Blogger blog.

Customization Tips

Change Button Color

Replace #2973FC with any color code.

Increase Page Numbers

Change:

to a higher value.

Change Text Labels

Modify "First" and "Last" to any language.

Is This Pagination Widget AdSense-Safe?

Yes, this widget is:

Non-intrusive
Does not interfere with ads
Uses clean HTML, CSS, and JavaScript
Fully compliant with Google AdSense policies

Common Problems and Solutions

Pagination Not Showing

Ensure script is added correctly
Clear browser cache

Broken Layout

Check for missing tags
Restore template backup if needed

Mobile Issues

Some templates may require extra mobile styling

Troubleshooting & Support

If you follow all the steps correctly, this pagination widget will work perfectly. However, Blogger templates vary, so minor adjustments may be needed.

If you face any issues:

Double-check placement of code
Ensure no duplicate pagination scripts exist

Final Words

Adding a number page navigation widget to Blogger is one of the best ways to improve usability and design. It makes your blog look professional, helps users explore content easily, and increases engagement. This tutorial showed you how to add a numbered pagination system in Blogger step by step, without plugins or heavy scripts.

Happy Blogging