Adding Numbered Page Navigation Bar For Blogger

Adding Numbered Page Navigation Bar For Blogger

Step 1: Adding The CSS Code.

Log into your blogger account and go to,
Dashboard >> Layout >> Edit html.
And find the following code.

]]>

And just before it Add the next code

.showpageArea {padding: 0 2px;margin-bottom:10px;margin-top:10px;
}

.showpageArea a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

.showpageNum a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;

}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #333;
color: #fff;
background-color: #000000;

}

.showpage a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;}

.showpageNum a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

Step 2: Adding The Java Code.

Find the next code Or some similar code

And After the Tag add the next code.

And Click “save template”
In the above code you may only edit four lines to customize your navigation bar.

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 >> Formatting >> Show >> 10 posts

var displayPageNum=6;

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

var upPageWord ='Previous';
var downPageWord ='Next';  

if you want to change the language or just change it to any thing, please change Previous for example to Older

Final Step

This blogger trick my cause some problems if you use labels in your posts and to solve this problems you have to apply the next step for your template.
1. Add Label Gadget To Your Template by going to Layout >> page elements >> Add Gadget >> Select Labels and add it to your template.
2. go to, Dashboard >> Layout >> Edit html.
And find the following code.

And replace it with the following code.

And Click “save template”
We are done.

Demo.

To see how it looks see this demo blog