How to Create number pagination in blog

 By using the older/newer or previous/next navigation, users can view your blog's pages one at

 a time using Blogger's regular pagination.

This tutorial will demonstrate how to implement a numbered pagination in place of the older/newer pagination,

 allowing visitors to navigate between pages numerically.

The pagination.js file in step 2 below must now be hosted directly within your theme and

 not in an external file due to Blogger's restrictions. Although it should function,

it is now housed on my Github account, thus I advise hosting it yourself.

1. Styling The Pagination

To alter the appearance of the pagination and make it work with your blog's style, change the CSS shown above.

 You can style it however you like, 

however I recommend changing the colors, adjusting the padding, and adding your own fonts.

 #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;  
 }  

Copy that ( choose layout >add gadget>html and java script ) past in html java script

Note: paste that code between <style></style>

look below figure

2. Add Pagination Functionality

Now that JavaScript has been included, the older/newer navigation on index pages can be changed to a numeric pagination.

 <b:if cond='data:blog.pageType == &quot;index&quot;'>  
 <!-- Start XOmisse Pagination -->  
 <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'/>  
 <!-- End XOmisse Pagination -->  
 </b:if>  

copy that code paste in given below

Note : paste Styling The Pagination and Add Pagination Functionality in the same configue html and javascript place

As you can see, we're targeting only the index page using a conditional statement, leaving the older/newer navigation 

on all other pages.

The number of posts that will display on each page should be changed in the postperpage parameter. This need to be 

the same as the value you entered for Show at most under Options > Posts, comments, and sharing settings.

The number of pages you want displayed in the numbered page navigation should be changed in the numshowpage value.

Additionally, you can alter the prevpage and nextpage values to reflect the text you want to see.

After saving the template, the index pages should now have numbered pagination.

Thanks