Page number navigation in blogger – Page Number, Next, Previous post navigation in blogger in different style

After long time I got correct code for Page number navigation for blogger blog. In Last two month I search many queries on “How to add page navigation on my blogger blog home page”, “different style for page navigation”, “and Beautiful style for page navigation with next previous button”. Finally I applied many of style in my blog. You also can apply in your blog easily through the below step by step guide. For that you don’t have any type of html or CSS programming knowledge. Just read carefully each step any apply in your blog one by one. Here in this post I give three different style code you can apply any one of three.

page navigation for blogger blog in different style

More useful for your blogger in blogging niche please read our articles on useful blogger tricks

• Get awesome traffic on blog from US and UK.
• Best free SEO customized Blogger template for blogger blog
• Best Adsense revenue sharing sites to make money online, 
• Increase Becklinks sharply and pagerank

If you have any problem than put your comment in below comment box than we can help you!

Step to add Page number navigation in your blogger blog

1. Apply one of three style for different look
2. Apply single java script

Three different styles for page number navigation in your blogger blog

Adding CSS Step 1
Go to Blogger dashboard > Template > Click on Edit HTML
Click on HTML code and Find tag “]]></b:skin>” with “Cltr + F” button. After pasting tag in search box inside html code hit enter and find this tag in your code.

Adding CSS Step 2
Paste below style code just above “]]></b:skin>” tag in your blog code.

Style 1 : Style for Simple look and feel

.page-navigation{clear:both;margin:30px auto;text-align:center;}
.page-navigation span,.page-navigation a{padding: 3px 7px;margin-right:5px;background:#E9E9E9;color: #888;border:1px solid #E9E9E9;}
.page-navigation a:hover,.page-navigation .current{background:#CECECE;text-decoration:none;color: #000;}
.page-navigation .pages,.page-navigation .current{font-weight:bold;color: #888;}
.page-navigation .pages{border:none;}

Style 2: Style for Black and orange number page navigation

.page-navigation{clear:both;margin:30px auto;text-align:center;}
.page-navigation span,.page-navigation a{padding: 5px 10px;margin-right:5px; color: #F4F4F4; background-color:#404042;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}
.page-navigation a:hover,.page-navigation .current{background:#EC8D04;text-decoration:none;color: #fff;}
.page-navigation .pages,.page-navigation .current{font-weight:bold;color: #fff;-webkit-box-shadow: inset 0px -1px 2px 0px rgba(50, 50, 50, 0.69);-moz-box-shadow:inset 0px -1px 2px 0px rgba(50, 50, 50, 0.69);box-shadow:inset 0px -1px 2px 0px rgba(50, 50, 50, 0.69);}
.page-navigation .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}

Style 3: Style for Black and blue number page navigation

.page-navigation{clear:both;margin:30px auto;text-align:center;font-size: 11px;background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #000000),color-stop(1, #292929));background-image: -o-linear-gradient(top, #000000 0%, #292929 100%);background-image: -moz-linear-gradient(top, #000000 0%, #292929 100%);background-image: -webkit-linear-gradient(top, #000000 0%, #292929 100%);background-image: -ms-linear-gradient(top, #000000 0%, #292929 100%);background-image: linear-gradient(to top, #000000 0%, #292929 100%); padding: 6px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.page-navigation span,.page-navigation a{padding: 3px 10px;margin-right:5px; color: #fff;}
.page-navigation a:hover,.page-navigation .current{background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #59A2CF),color-stop(1, #D9EAFF));background-image: -o-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -moz-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -webkit-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -ms-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: linear-gradient(to top, #59A2CF 0%, #D9EAFF 100%);text-decoration: none;color: #000;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.page-navigation .pages{border:none;background: none;}

First part adding CSS is complete now you have to adding the script.

Adding Script Step 1
Find the blow tag in your HTML code , If you don’t find full line code then try this code only “ title='Blog Posts' type='Blog'>”

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

Adding Script Step 2
Put below code just above step 1 line code

<b:includable id='page-navi'>
<div class='page-navigation'>
<script type='text/javascript'>
var pgNavigConf = {
perPage: 7,
numPages: 6,
firstText: &quot;First&quot;,
lastText: &quot;Last&quot;,
nextText: &quot;Next&quot;,
prevText: &quot;Prev&quot;
}
</script>
<script src='http://helplogger.googlecode.com/svn/trunk/page-navigation.js' type='text/javascript'/>
<div class='clear'/>
</div>
</b:includable>

Adding Script Step 3

Now you have to add page navigation give inbuilt simple function on next and previous post so find first one line out of two give in below (if you don’t find then find only first line on below code)

<!-- navigation -->
<b:include name='nextprev'/>

Adding Script Step 4
Remove above two line and past below code at same place; means replace step 3 code with blow code

<b:if cond='data:blog.pageType == "index"'>
<b:include name='page-navi' />
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<b:include name='page-navi' />
</b:if>
</b:if>

Other Search for this post:
Add page number navigation at home page of blogger blog
How to add page navigation in template source code
Step by step guide for page navigation

Final Conclusion: if you don’t getting add page navigation in your blog than revise all step once again because it will work for all blogger template like inbuilt blogger template and third party blogger templates.
Don’t miss to share this article with your friends because this one is very useful including me also in past.

Please say something about this article in below comment box. We improve your suggestion as of your request.