Awesome Page Navigation Widget For Blogger With Scroll

Page navigation widget helps your readers to jump from one page to another page directly.This page navigation widget was developed by karaboz and abu-farhan converted it into blogger.It has a small knob at bottom by which any visitors can go directly on last page,also they can select any page on your blog.Search on Google you will see many widgets about page navigation but if you are using this widget then your reader/visitors can go to a specific page which they want.

See Demo At Bottom Of My Homepage

How To Add Page Navigation Widget To Blogger?

You can add this widget in just two steps.

1. Adding The CSS.
2. Adding The Script.

Now lets see how to add page navigation to your blog.

Adding The CSS

1. Go to Blogger Dashboard > Design > Edit HTML.
2. Backup your template.
3. Now find ]]></b:skin>
4. Add below code just above ]]></b:skin>.

.paginator {
 margin-top:60px;
 font-size:1em;
}
.paginator table {
 border-collapse:collapse;
 table-layout:fixed;
 width:100%;
}
.paginator table td {
 padding:0;
 white-space:nowrap;
 text-align:center;
}
.paginator span {
 display:block;
 padding:3px 0;
 color:#fff;
}
.paginator span strong,
.paginator span a {
 padding:2px 6px;
}
.paginator span strong {
 background:#ff6c24;
 font-style:normal;
 font-weight:normal;
}
.paginator .scroll_bar {
 width:100%; height:20px;
 position:relative;
 margin-top:10px;
}
.paginator .scroll_trough {
 width:100%; height:3px;
 background:#ccc;
 overflow:hidden;
}
.paginator .scroll_thumb {
 position:absolute;
 z-index:2;
 width:0; height:3px;
 top:0; left:0;
 font-size:1px;
 background:#363636;
}
.paginator .scroll_knob {
 position:absolute;
 top:-5px; left:50%;
 margin-left:-10px;
 width:20px; height:20px;
 overflow:hidden;
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl6YAri3bnmaMAnnRRRdjzThGrXanGoUspevKqDwEkixi7u2QvorsNI13EM15UzwJX9fa6fiyjzeUc_StPvbxGugnVVwSsOS7fciH0ndMfx8jbIMddY2b4OsQIcFiWFdZt2V8udahQfhQ/s1600/slider_knob.gif) no-repeat 50% 50%;
 cursor:pointer; cursor:hand;
}
.paginator .current_page_mark {
 position:absolute;
 z-index:1;
 top:0; left:0;
 width:0; height:3px;
 overflow:hidden;
 background:#ff6c24;
}

.fullsize .scroll_thumb {
 display:none;
}

.paginator_pages {
 width:600px;
 text-align:right;
 font-size:0.8em;
 color:#808080;
 margin-top:-10px;
}

Adding The Scripts

1. Now find this </body>
2. Add below code just above that.

<script src='http://scriptabufarhan.googlecode.com/svn/trunk/paginator3000.js' type='text/javascript'></script>
<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=6;
</script>
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/paginator3000-forblogger-v1.0.0.js' type='text/javascript'/>

Change based on your blog setting :

var postperpage=7; (Line Number 6 In Above Code)
var numshowpage=6; (Line Number 7 In Above Code)

Postperpage : Number of posts per page
numshowpage : Numbers to show on widget (Recommend - 6)

I hope you will like this widget.