Numbered Page Navigation for Blogger

Add This To Del.icio.us StumbleUpon This Add to Technorati Digg This

LIVE DEMO (see page bottom)

Login To Blogger Go To > Design > Edit HTML.

and mark the tick box "Expand Widget Templates"

Then, find (CTRL+F) this code in the template.

</body>

And paste this code immediately Before it:

<!--PAGINATION-STARTS-->
<script type='text/javascript'>
var pageCount=10;
var displayPageNum=3;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/pagination1.js' type='text/javascript'/>
<script src='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/pagination2.js' type='text/javascript'/>
<!--PAGINATION-STOPS-->

var pageCount=10; is the number of posts to be displayed on each page. Change the number "10" to any number you want.

var displayPageNum=3; is the number of buttons to be shown (on each side) along with the page number currently seleted.

For eg. If a reader is on page 3, then in the pagination, page numbers will be displayed like this:

Then,find this code in the template:

</head>

And immediately Before it, paste this code:

<!--PAGINATION-STARTS-->
<link href='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/pagination2.css' rel='stylesheet' type='text/css'/>
<style type='text/css'>
.showpage a:hover {
color: #FFFFFF;
background-color: #92416C;
}
// STYLE CODE FOR SELECTED PAGE STARTS
.showpagePoint {
color: #FFFFFF;
background: #92416C;
border: 1px solid #92416C;
}
// STYLE CODE FOR NUMBER BUTTONS STARTS
.showpageNum a:link,.showpage a:link {
color: #000000 !important;
background-color: #92416C;
border: 1px solid #92416C;
}
// HOVER CODE for NUMBER BUTTONS
.showpageNum a:hover {
color: #FFFFFF !important;
background: #92416C !important;
border: 1px solid #92416C;
}
// STYLE CODE FOR "PREV and NEXT" BUTTONS STARTS
.showpageArea a {
border: 1px solid #92416C;
}
// HOVER CODE for NEXT-PREV BUTTONS
.showpageArea a:hover {
border: 1px solid #92416C;
color: #FFFFFF !important;
background: #92416C !important;
}
</style>
<!--PAGINATION-STOPS-http://royaltutor.net-->

Replace it with the color codes you want (get HTML hex-color codes from this page).
Now click save the Template and you are done.