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

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

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 themAs 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>


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.


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>

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.


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:
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 be something 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

Post a Comment

13 Comments

  1. Hi jumia

    do you have script code for "load more" like you have in homepage and archive?

    its look good ,seems the script doesn't called url parameter for pagination (search-updated?max=)

    ReplyDelete
  2. Great Article. Thank you for providing such a unique and valuable information to your readers. I really appreciate your work.If you require about pvt ltd registration delhi | pvt ltd company registration fees delhi please click on it.

    ReplyDelete
  3. Anonymous9/18/2021

    Nice Blog...
    I read your blog it's very informative for me. I appreciate your blog.
    Keep sharing. I Will try this for sure. Buy the best Dedicated Server Hosting service for your website.

    ReplyDelete
  4. All thanks to Mr Anderson for helping with my profits and making my fifth withdrawal possible. I'm here to share an amazing life changing opportunity with you. its called Bitcoin / Forex trading options. it is a highly lucrative business which can earn you as much as $2,570 in a week from an initial investment of just $200. I am living proof of this great business opportunity. If anyone is interested in trading on bitcoin or any cryptocurrency and want a successful trade without losing notify Mr Anderson now.Whatsapp: (+447883246472 )
    Email: tdameritrade077@gmail.com

    ReplyDelete
  5. That DM was founded with the aim of assisting everyone in finding solutions to their personal and professional issues.thatdreammeaning

    ReplyDelete
  6. I was suffering from herpes since January before I met Dr Ajayi who got me cured. Thank god, I'm cured. I had for some time now noticed having difficulty in pain. Never in my wildest dreams did it cross my mind that I may develop a serious herpes disease. Few months ago I purchased herbal remedy from Dr Ajayi, after taking it for 14 days, I was totally reversed. I'm so happy to share this great news to everyone and I want to advise anyone suffering from herpes diseases or any type of diseases he will get you cured. you may need his email for assistance. Email him at ajayiherbalhome@gmail.com you can also call or WhatsApp him +2348154724883. visit his website https://ajayiherbalhome.weebly.com for more information and don't forget to share as you read.

    ReplyDelete
  7. IPTV is a strategy of dispersing <a href="https://iptvsubscription.biz/”>iptv m3u subscription</a> membership material over broadband that makes it possible for a lot more tailor-make along with interactive customer experience. Interactivity utilizing a quick two-way web link will absolutely increase IPTV ahead of today's television.

    ReplyDelete
  8. I read your blog. It's very nice and very helpful. I learn something new every time from this website. Thanks for sharing this information with us. I am also a blogger and I guide people on App and Software Development.
    You can visit our Services here
    PHP development services
    Progressive Web Apps Development
    AngularJs Development Company

    ReplyDelete
  9. WordPress is a fantastic website solution if you are on a budget. You can build an amazing website with a number of different themes that can be installed in minutes. If you don't have the time or skills to do this you can always look for a WordPress designer, if you can afford it. However, if you are on a tight budget and have the skills to make your own website, then that is always a great option. You can hire an Wordpress Developer
    to build a website for you, but pay half the price.

    ReplyDelete
  10. Thank you so much for this tutorial. The pagination in my particular template was messed up and happily, this fixed it.

    ReplyDelete
  11. Great Post!
    I really enjoyed reading this blog.
    Thanks for sharing such a wonderful post!
    If you're in need of the top progressive web development company in India! Contact us now to transform your online business.

    ReplyDelete
  12. Superb blog. This blog is simply amazing! The content is top-notch and very informative. Thank you for thoughtfully communicating this information to us.
    Looking for the top eCommerce development company in India? Contact us today for cutting-edge solutions!

    ReplyDelete