How to Add Numbered Pagination in Your Blogger Blog

Like everything, Blogging is also becoming more and more advanced day by day. Previously most of the bloggers used Old Posts and New Posts system in their blogs but that trend is some sort of finished or finishing now. Blogging is approaching more advanced levels now. Now a days, Numbered Pagination has much importance in the style and attraction of the blog. Its also our practical experience that you can get almost 10 times more pageviews with Numbered Pagination instead of that Older and Newer Posts.




Drive Traffic to Your Blog Ten most Tips

Add Facebook like button in every Blogger Post

How to Add Facebook Slide Likebox

What Is Numbered Pagination ?

First of all, let me introduce you to the Numbered Pagination. Its a numeric navigation menu which is mostly present at the end of your blog archive pages. Just like the pages of a book, it divides your blog into different pages. With the help of this users feel ease to look around your blog and explore different posts. Below is the screenshot of it.

How To Add Numbered Pagination In Blogger ?

This task is going to be very easy for you guys because I will guide you till the end. 

• Log in to Blogger >> Template >> Edit HTML
• Search for ]]></b:skin>. Just above it paste the following code.

.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, the stylesheet is added to your template and its time for the Java/Script coding that would turn the ordinary older/newer post buttons into robust and user friendly Numbered Pagination.

 

• In the Template, search for </body>.
• Just above it paste the following Java/Script coding.

<!--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://widcraft.googlecode.com/svn/blogger_pagenavi_min.js' type='text/javascript'/></b:if></b:if><!--Page Navigation Ends -->

 Save the Template. 

Congratulations ! you have done it. Now, go to your blog and enjoy the most latest and stylish Numbered Pagination.

Final Words 

If you enjoy this article please share this with your friends and stay tuned more interesting articles ae waiting for you if you need any help please feel free to contact us or leave a comment below will reply will be highly appreciate thanks.