HOW TO ADD PAGE PAGINATION IN YOUR BLOG

This trick is very important for your blog and i think everyone want this trick in their blog.Now i am going to tell you how to add page pagination in your blog.Are you still wondering 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 using number pagination on Counterstriq Blog 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?.This is very simple and interesting trick.All you have to do is to just follow the steps given below.

*First Login to your account.

*Go to blogger dashboard.

*Then go to templates and click on EDIT HTML.

*Now press (CTRL+F) and search for ]]></b:skin>

*Now copy the code/script given below and paste it just above ]]></b:skin> 

Script:

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

*Now search for  </body> 

*Now copy the code/script given below and paste it just above </body>  

Script:

<!--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='https://mirocine.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/>

</b:if>

</b:if>

<!--Page Navigation Ends -->

*Now congrats page pagination has been added in your blog.

*Thanks for visit, please like,share and comments.

Asad

Author & Editor