How to add pagination in blogger

Know How To Add Pagination in Blogger

Simple JavaScript and CSS will give your Blogger blog a modern, stylish Paged Navigation.
Blogger offers a traditional set of blog elements. In the example below, I have shown you an Older / Newer navigation, and Previous / Next navigation to browse the index of Blogger posts.
If you want visitors to keep reading your blog, you may need to rethink the navigation. The content on your blog is essential for retaining visitors, but the look and feel of your website are also crucial in generating engagement from users.
If you've been reading this blog post, you may have noticed that many sites on the internet use page navigation (which means pagination). Those sites are usually WordPress sites.

In this tutorial post, we will cover the steps for how to create a beautiful paged navigation in Blogger.

CSS Code:

Let's start by adding the CSS styling. You can do this by navigating to Template > Edit HTML and searching for []></b:skin>. Here is a tutorial that might help you find it.
Paste the following code above the ]]></b:skin> tag

/* Start Pagination*/
#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 4px;
     background: #434343;
     color: #333;
     border: 2px solid #434343;
     font-size: 12px;
     border-radius: 2px;
     transition: all .3s;
}
 .showpage a:hover, .pagenumber a:hover, .current {
     background: blue;
     color: #ffffff;
     text-decoration:none;
}
/* End Pagination */

To make the pagination fit your blog design, you can edit the CSS above. It can be styled any way you want but I suggest adding your own fonts and changing the colors
.

JAVASCRIPT Code:

In the next step, we'll configure JavaScript to use pagination on index pages instead of the default older/newer navigation.
Similarly, go to Template > Edit HTML and look for the closing body tag, </body>, towards the end of your template.
The following should be pasted just above the closing body tag:

 <b:if cond='data:blog.pageType == &quot;index&quot;'> 
<script type='text/javascript'> //<![CDATA[ /** WRITTEN BY XOMISSE.COM **/ 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>

Here we are targeting only the index page with a conditional statement, keeping the older/newer navigation on all other pages.
Posts per page are determined by the postperpage value. If this is the number you select in Settings > Posts, comments, and sharing settings > Posts > Show at most, then that should also be the maximum number.
If you wish to show more than one page, change the numshowpage value.
Additionally, you can modify the text displayed on the previous and next pages.
After saving the template, the numbered pagination should appear on the index pages.