Stylish Numbered Page Navigation Bar For Blogger

I

n this tutorial I’m gonna show you, How to add a perfect Numbered Page Navigation In Blogger. This is the numbered page navigation I’m using in this blog(check the homepage). This is very simple to add, 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