How To Add Page Navigation In Blogger

 

Blogger gives us the choice to set the number of posts we want to exhibit or display per page by going to the  Settings menu **Posts and Comments**Show at most ? posts. Once the whole number of posts in our blog supersedes this number, we will see ''Older Posts'' and "Newer Posts" navigation links on the home page as blogger does not have built-in function for page numbering.
Are you still puzzled that how most of the famous blogs are using numbered pagination, instead of displaying older and new post buttons at the bottom of every Blogger archive page? Recently, one of our users asked us, How to add Numeric Pagination in Your Blogger Blog? We have been making use number pagination on My BloggerLab for quite a while now, and from our experience it gives you 10 times better page views than the older and newer post button. It is more user friendly, attractive, and SEO friendly. Most of the advance Blogger templates like Templateism comes with builtin Numeric pagination. In this article, we will show you how to add numbered pagination in your blogger blog?

What is Numbered Pagination?

Numbered pagination is a numeric navigation menu which is usually present at the bottom of the archive pages. It divides your whole blog into different pages, just like the pages of a book. Users can simply navigate through your page 1, 2, 3, 4 and etc . We have attached a screenshot below, so that users can easily understand our words.

How to Add Numbered Pagination in Blogger?

You can insert this widget in just two steps 

1. Adding The CSS

2. Adding The Script  

    

 1. Adding The CSS

The first thing you need to do is to login into your Google account. Once logged in go to Blogger Dashboard >> Template >> Edit HTML and search for the Skin tag ]]></b:skin>. After finding the skin tag, just above it paste the following piece of coding.

.showpageNum a {
background: #02ab68;
padding: 5px;
padding-left: 10px;
border: 1px solid #b9b9b9;
padding-right: 10px;
margin-right: 5px;
color: #000;
font-weight: bold;
}
.showpage a {
background: #02ab68;
padding: 5px;
padding-left: 10px;
border: 1px solid #b9b9b9;
padding-right: 10px;
margin-right: 5px;
color: #000;
font-weight: bold;
}
.showpageArea {
float: left;
}
.feed-links {
display: none;
}
.showpageArea a {
float: left;
font-size: 15px;
color: #fff!important;
padding-left: 15px;
padding-right: 15px;
}
.showpagePoint {
float: left;
font-size: 15px;
padding-left: 15px;
padding-right: 15px;
}
.showpageArea a {
text-decoration: none;
}
.showpageArea {
float: left;
width: 363px;
margin-top: 10px;
}

2. Adding The Script
 
Now once the style sheet is added to your template, it is the time to add the JavaScript coding that would turn the ordinary looking order/newer post buttons into a robust and user-friendly  numeric pagination. Search for the ending </body> tag and just above it paste the following JavaScript coding. Once everything is done press “Save Template” button located on the top right corner of your screen.

<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=6;
var displayPageNum=6;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://templateism.com/js/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if>
</b:if>
<!--Page Navigation Ends -->

Congratulations: You have successfully added numbered pagination in blogger. Now go and check out the interactive preview to see the amazing navigation in action. With a little modification is CSS, anyone can customize to give it the desire touch that he needs.

https://chidexmikky.blogspot.com/2017/07/blogger-gives-us-choice-to-set-number.html