How To Add Numbered Pagination And Use Post Titles As Navigation In Blogger

Hi!, welcome to yet another interesting blogger blog tutorial on How To Add Numbered Pagination To Blogger On The Homepage And Replace Older and Newer Post Links With Actual Post Titles On Post Pages. In this tutorial, you have 4 options provided which you're to use only one. So my advice to you is to read through first, this way, you can determine what is perfect for your blog. If you're interested in how to use blogger to blog, see the Complete Blogger Blog Tutorial.

Table Of Content:

1. Introduction
2. What Is Pagination As Used On Web And Blog Sites
3. Why Use Pagination, The Importance Of Web Or Blog Site Pagination
4. Option 1:Replace Newer And Older Post Links With The Actual Post Titles In Blogger Blog - Index Pages And Posts Pages As Well
5. Option 2: Replace Newer And Older Post Links With The Actual Post Titles On Post Pages Only
6. Option 3: How to Add Numbered Pagination to Blogger Blog Index Pages
7. Option 4: How To Add Numbered Pagination To Blogger On The Homepage And Replace Older and Newer Post Links With Actual Post Titles On Post Pages

Other Blogger Tutorials:

How To Create HTML Sitemap Page In Blogger (With Infographics) 

How To Set Custom Header Tags For Blogger Blog Step By Step - 4 Steps 

How To Show Only Post Thumbnails And Snippets In Blogger Blog Homepage

How To Underline Links In Blogger Blog Step By Step - 2 Steps 

Meta Tags Explained: How To Add Meta Tags To Blogger Blog 

How To Add Numbered Pagination To Blogger On The Homepage And Replace Older and Newer Post Links With Actual Post Titles On Post Pages - Introduction

One of the most commonly overlooked and under-refined elements of a website is its pagination controls. In many cases, these are treated as an afterthought. I rarely come across a website that has decent pagination, and it always makes me wonder why so few manage to get it right. 

What Is Pagination As Used On Web And Blog Sites

Pagination is any kind of control system that lets the user browse through pages of search results, archives, or any other kind of continued content. Search results are the obvious example, but it's good to realize that pagination is also found on blogs which is the subject matter of our tutorial (Previous/Next post links).

Pagination is the process of splitting the contents of a website, or a section of contents from a website, into discrete pages. This user interface design pattern is what designers use to save site visitors from being overwhelmed by a mass of data on one page. Since pagination’s primary purpose is to serve as improved navigation, it is supposed to make it clear for the visitors where they are, where they’ve already been and where they can go next.

Pagination in web applications is usually controlled by a code, which typically orders dataset items from newest to oldest, this is exactly what this tutorial is about. It is prevalent in web design, appearing in most web applications to allow direct access to divided contents across a number of different pages.

When dealing with very large numbers of items, these codes see that page breaks are automatically set with the use of rules and algorithms, which are based on cultural and semantic factors. These factors determine which page of contents each item belongs to in the pagination number list. 

Algorithms and rules are also employed when dividing contents in search engines, where items are arranged on the basis of a number of different factors, such as the regularity with which the search term appears within websites and electronic documents. Pagination patterns are usually placed at the bottom of all the pages containing the individual items within the dataset.

Why Use Pagination? The Importance Of Website Or Blog site Pagination

We have already mentioned a few reasons that necessitate the use of pagination, for example, when there is a large amount of data that cannot reasonably be presented as a single page. Others include:

1. Site Pagination Brings About Better User Experience

If too much information is published on one page, the user may get overwhelmed. Pagination allows webmasters to present a lot of information in small and manageable chunks. E-commerce sites will show the product’s image and price on the home page for example. If a user is interested in more details about the product, they can click on the image/price/link with a call to action to learn more.

2. Site Pagination Aids Easier Page Navigations

Pagination allows you to make large amounts of content easy to find and breaks up several entries or web content into multiple pages, allowing you to toggle through content with ease. Pagination also makes it easier for a user to find the information that they are looking for.

Since pagination’s primary purpose is to serve as improved navigation, paginations make it clear for the visitors where they are, where they’ve already been and where they can go next. In short, paginations make navigation easier for the user who wants to go through the course. Where numbering is used, the user is able to decide how many more pages they are willing to look at. It also gives them an idea of how big the data set is. A large data set may be appealing to a user looking for variety.

3. Pagination Helps Your Site’s Crawling By Search Engine Bots

When it comes to sites with a lot of pages, bot crawler has to determine what content on the site they need to crawl, how frequently they need to crawl the site and the resources that the site’s server can allocate to the crawling process. In comes the crawl budget concept.

When your site has large amounts of data, search engine bots need to use their crawl budget wisely. They need to choose what content to crawl, and how often. This means that there is a likelihood that some of your content will neither be crawled nor indexed. There is also a likelihood that the crawl budget will be spent on the pages that the pagination directs to, and other significant pages may never be crawled nor indexed. What does this mean then?

After implementing pagination on your site, you need to prioritize the most important pages on your home page, or on the page where pagination begins. An example here would be a search engine like Google. The most relevant search results are on page one. This way, your crawl budget will be spent on your best content. Once users are on your site, then they have the opportunity to interact with other pages as structured by your pagination.

Option 1:Replace Newer And Older Post Links With The Actual Post Titles In Blogger Blog - Index Pages And Posts Pages As Well

Blogger’s page navigation at the bottom of the page displays just “Newer Post” and “Older Post”. It is preferable to show the actual page title instead of them. As I have seen in other sites, it looks better if it showed the next and previous post titles instead. So in this tutorial, I will show you how to customize your post navigation links so that it will display the titles of your next and previous posts. With this setup, the post title navigation will work on all pages of your blog -- homepage, search results, archive list, and post pages as well. 

1: Adding the script
In this step, we will be adding a script to your template. To add the script, go to Blogger Dashboard>>Layout then click on "Add a Gadget" and select HTML/JavaScript from the list. In the Configure HTML/JavaScript window, leave the Title empty and paste the following code in the Content, Click Save once you're done. 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js?attredirects=0&amp;d=1"></script>
<script type="text/javascript">$(document).ready(function(){ 
 var olderLink = $("a.blog-pager-older-link").attr("href"); $(".blog-pager-older-title").load(olderLink+" .post-title:first", function() {  $(".blog-pager-older-title").text($(this).text()); });
 var newerLink = $("a.blog-pager-newer-link").attr("href"); $(".blog-pager-newer-title").load(newerLink+" .post-title:first", function() {  $(".blog-pager-newer-title").text($(this).text()); });
});</script>

2: Modifying The Template

Next is to update the template code. Go to Theme » Edit HTML and search for the line <data:newerPageTitle/> and replace it with the following code:
If you don't know how to do it don't worry I am taking you through this tutorial step by step. Click inside the template and press ctrl +F keys on your keyboard simultaneously. This action will trigger a search box to appear at the upper right corner of the template codes. Copy and paste the above code inside the search box and press Enter on your keyboard. Replace the following code with it.

<span class="label">&amp;laquo;</span> <span class="blog-pager-newer-title"></span>

Do another search and look for the line <data:olderPageTitle/> and replace it with the following code:

<span class="blog-pager-older-title"></span>
<span class="label">&amp;raquo;</span>

After replacing the lines of code, your template code should look like this:

With this basic setup, the post title navigation will work on all pages of your blog -- homepage, search results, archive list, and post pages

Option 2: Replace Newer And Older Post Links With The Actual Post Titles On Post Pages Only

With this setup, the post title navigation will work only on your post pages only, excluding all other pages of your blog -- homepage, search results, archive list, etc.

Step 1: Adding the script
In this step, we will be adding a script to your template. To add the script, go to Layout then click on "Add a Gadget" and select HTML/JavaScript from the list. In the Configure HTML/JavaScript window, leave the Title empty and paste the following code in the Content  Click Save once you're done. Refer to option 1 on how to add HTML/JavaScript.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js?attredirects=0&amp;d=1"></script>
<script type="text/javascript">$(document).ready(function(){ 
 var olderLink = $("a.blog-pager-older-link").attr("href"); $(".blog-pager-older-title").load(olderLink+" .post-title:first", function() {  $(".blog-pager-older-title").text($(this).text()); });
 var newerLink = $("a.blog-pager-newer-link").attr("href"); $(".blog-pager-newer-title").load(newerLink+" .post-title:first", function() {  $(".blog-pager-newer-title").text($(this).text()); });
});</script>

2: Modifying The Template

Go to Theme » Edit HTML and search for the line <data:newerPageTitle/> and replace it with the following code. Refer to option 1 on how to search for a specific code in the blogger template.

<b:if cond='data:blog.pageType == &quot;item&quot;'> <span class="label">&amp;laquo;</span> <span class="blog-pager-newer-title"></span><b:else/> <data:newerPageTitle/>
</b:if>

Do another search and look for the line <data:olderPageTitle/> and replace it with the following code:

<b:if cond='data:blog.pageType == &quot;item&quot;'> <span class="blog-pager-older-title"></span> <span class="label">&amp;raquo;</span><b:else/> <data:olderPageTitle/>
</b:if>

With this setup, the post title navigation will work only on your post pages only, excluding all other pages of your blog -- homepage, search results, archive list, etc.

Option 3: How to Add Numbered Pagination To Blogger Blog Index Pages - homepage, search results, archive list, etc.

We’re going to use conditional statements to target only the index page, leaving the older/newer navigation on all other pages.

1. Styling The Pagination
Firstly we’ll add the styling to the CSS. To do so, go to Theme >> Edit HTML and search for ]]></b:skin> Just above the ]]></b:skin> tag paste the following code. Refer to option 1 on how to search for a specific code in the blogger template. 

#blog-pager, .blog-pager {
display:block;
padding:5px 0;
}
.showpage a, .pagenumber a, .totalpages, .current {
position: relative;
display: inline-block;
padding: 5px 10px;
margin: 0 2px;
background: #ffffff;
color: #333;
border: 1px solid #f2f2f2;
font-size: 12px;
border-radius: 2px;
transition: all .3s;
}
.showpage a:hover, .pagenumber a:hover, .current {
background: #333333;
color: #ffffff;
text-decoration:none;
}

2. Add Pagination Functionality

Now we can add the JavaScript to turn the default older/newer navigation into numeric pagination on index pages. Again go to Theme >> Edit HTML. Search for the closing body tag, </body>, which will be near the end of your template. Just above the closing body tag paste the following:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<script type='text/javascript'> //<![CDATA[ /
var postperpage=3; var numshowpage=4; var prevpage ='Previous'; var nextpage ='Next'; var urlactivepage=location.href; var home_page="/";
//]]> </script>
<script src='https://cdn.rawgit.com/xomisse/ac8ccfa4b8fb2c26d5cf76270db92201/raw/f957494b1691cce3d5a8cb92e5b4ed57cded9729/pagination.js' type='text/javascript'/>
</b:if>

As you can see, we’re using a conditional statement to target only the index page, leaving the older/newer navigation on all other pages. Change the postperpage value to the number of posts that will appear on each page. This should match the number you’ve selected in Settings > Posts, comments and sharing settings > Posts > Show at most.

Change the numshowpage value to how many pages you want to be shown in the numbered page navigation. You can also change the prevpage and nextpage values to the text you want to be displayed. Then Save Template, you should now see the numbered pagination on index pages.

Option 4: How To Add Numbered Pagination To Blogger On The Homepage And Replace Older and Newer Post Links With Actual Post Titles On Post Pages

This is the fourth option from which you may make your choice of what you wish to use on your blogger blog site. I tell you honestly that you can't find this one anywhere on the web. It is something I generated myself when I wanted to paginate my blogger blog site. This fourth blogger blog widget will help you have a numbered pagination on your blogger blog home page and posts titles replacing Older and Newer post links on post pages. Follow the tutorial closely and for the purpose of not confusing anyone, I will repeat anything which could have been referred back to the previous codes above.

1. Styling The Pagination
Firstly we’ll add the styling to the CSS. To do so, go to Theme >> Edit HTML and search for ]]></b:skin> Just above the ]]></b:skin> tag paste the following:

#blog-pager, .blog-pager {
display:block;
padding:5px 0;
}
.showpage a, .pagenumber a, .totalpages, .current {
position: relative;
display: inline-block;
padding: 5px 10px;
margin: 0 2px;
background: #ffffff;
color: #333;
border: 1px solid #f2f2f2;
font-size: 12px;
border-radius: 2px;
transition: all .3s;
}
.showpage a:hover, .pagenumber a:hover, .current {
background: #333333;
color: #ffffff;
text-decoration:none;
}

2. Add Pagination Functionality

Now we can add the JavaScript to turn the default older/newer navigation into numeric pagination on index pages. Again go to Theme >> Edit HTML. Search for the closing body tag, </body>, which will be near the end of your template. Just above the closing body tag paste the following:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<script type='text/javascript'> //<![CDATA[ /
var postperpage=3; var numshowpage=4; var prevpage ='Previous'; var nextpage ='Next'; var urlactivepage=location.href; var home_page="/";
//]]> </script>
<script src='https://cdn.rawgit.com/xomisse/ac8ccfa4b8fb2c26d5cf76270db92201/raw/f957494b1691cce3d5a8cb92e5b4ed57cded9729/pagination.js' type='text/javascript'/>
</b:if>

Change the postperpage value to the number of posts that will appear on each page. This should match the number you’ve selected in Settings > Posts, comments and sharing settings > Posts > Show at most.

Change the numshowpage value to how many pages you want to be shown in the numbered page navigation. You can also change the prevpage and nextpage values to the text you want to be displayed. Then Save Template, you should now see the numbered pagination on index pages.

3. Adding The Script

In this step, we will be adding a script to your template. To add the script, go to Layout then click on "Add a Gadget" and select HTML/JavaScript from the list. In the Configure HTML/JavaScript window, leave the Title empty and paste the following code in the Content Click Save once you're done. 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js?attredirects=0&amp;d=1"></script>
<script type="text/javascript">$(document).ready(function(){ 
 var olderLink = $("a.blog-pager-older-link").attr("href"); $(".blog-pager-older-title").load(olderLink+" .post-title:first", function() {  $(".blog-pager-older-title").text($(this).text()); });
 var newerLink = $("a.blog-pager-newer-link").attr("href"); $(".blog-pager-newer-title").load(newerLink+" .post-title:first", function() {  $(".blog-pager-newer-title").text($(this).text()); });
});</script>

4: Modifying The Template
Go to Theme » Edit HTML and search for the line <data:newerPageTitle/> and replace it with the following code:

<b:if cond='data:blog.pageType == &quot;item&quot;'> <span class="label">&amp;laquo;</span> <span class="blog-pager-newer-title"></span><b:else/> <data:newerPageTitle/></b:if>

Do another search and look for the line <data:olderPageTitle/> and replace it with the following code:

<b:if cond='data:blog.pageType == &quot;item&quot;'> <span class="blog-pager-older-title"></span> <span class="label">&amp;raquo;</span><b:else/><data:olderPageTitle/></b:if>

With this setup, the post title navigation will work only on your post pages and while you may have numbered pagination on your index pages on your blog -- homepage, search results, archive list. If you examine very well, in this fourth option, we just combined options 2 & 3 to give option 4.That's it, remember, you're to use only one option out of the 4 options given here. So the choice is yours.

I have tried so much to cover everything in this tutorial, How To Add Numbered Pagination And Use Post Titles As Navigation In Blogger. If you follow the tutorial strictly, I don't think you'll encounter any issues, however, if you encounter any, comment it at the comment section below and I will attend to you! Happy blogging! And don't forget to share, thanks!
full-width