Wednesday, April 23, 2014

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
page navigation for blogger blog in different style

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


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


No comments:

Post a Comment