Stylish Numbered Page Navigation Bar For Blogger

When we create a stylish blog we don’t want any kind of complications and confusion in our blogs on which we have worked so hard. Confusion in the sense, we post number of articles on our blogs for our readers so sometimes they get mixed up or shuffled up due to an improper order arrangement of the posts. In such conditions arranging the posts in proper condition is very important for the proper function of any blog, and In this case this widget numbered page navigation bar comes into play, by which you can arrange all your posts accordingly in the proper manner and make the most use of it. And due to this amazing feature this widget is used by almost all the bloggers including me.
So how can you get this amazing widget download and installed and then add up on your blog? Don’t worry or get tensed about this question. Trust me it is really very easy, just follow the simple steps stated by me in the further post. The JavaScript code used in this numbered page navigation is by Abu Farhan and the CSS code is by me.

The CSS

Add the below CSS code just above </b:skin>

#blog-pager{height: 28px;
padding: 10px 0 0;
overflow:hidden;
text-align:center;
}
.showpageArea a {
text-decoration:underline;
font-size: 16px;
text-align: center;
}
.showpageNum a {
background-color:#f8f8f8;
display:inline-block;
color:#676767;
font-size:11px;
text-decoration:none;
font-weight:bold;
margin:0 0 0 4px;
padding:7px 12px;
text-transform:uppercase
}
.showpageNum a:hover {
color:#fff;
background-color:#444
}
.showpagePoint {
font-size:16px;text-decoration:none;
background: #FF4903;
margin:0 5px;padding:5px;color:#ffffff;
}
.showpageOf {
margin:7px 30px 0 0;padding:0;background-color:transparent
}
.showpage a {
background-color:#f8f8f8;
display:inline-block;
color:#676767;
font-size:11px;
text-decoration:none;
font-weight:bold;
margin:0 0 0 4px;
padding:7px 12px;
text-transform:uppercase
}
.showpage a:hover {
color:#fff;
background-color:#444
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
}

The JavaScript

Search for this line:

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

After the above line paste the below code

<script style='text/javascript'>
var postperpage=10;
var numshowpage=6;
var upPageWord=&quot;Prev&quot;;
var downPageWord=&quot;Next&quot;;
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
</script>
<script src='http://makingdifferent.github.com/blogger-widgets/MD-Designs-Page-Navigation.js' style='text/javascript'/>

Change based on your blog setting :

var pageCount=10;

In this code Number 10 control the number for posts per page, you can change it to choose how many posts per page you want to display.

Note : This Number value should be the same With in your blogger account settings
The settings can be found by going to Dashboard >> Setting >> Posts And Comments >> Show at most >> 10 posts

var displayPageNum=6;

Number 6 here control the number of pages that will be shown in the navigation bar.

var upPageWord ='Prev';
var downPageWord ='Next';

if you want to change the language or just change it to any thing, please change Prev for example to Older
Save Template !
I hope it can work and make your blog easy to navigate

Banner 468x60