How to Add Numbered Pagination in Your Blogger Blog-Box

 How to Add Numbered Pagination in Blogger?

1.The firest thing you need to do is to login into your Google account. 

2.Once logged in go to Blogger Dashboard

 >> Template >> Edit HTML and search for the Skin tag ]]></b:skin>. 

3.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;
}

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.