A very cool way pagination widget for blogger

This is a very cool and beautiful pagination widget by Abu-farhan. The cool thing about it is that you see all the numbering of pages in one page.
I mean to say that you don’t have to choose Next or Previous to go to pages instead it can be done on whatever page you are and you will see all the pages numbers.

See demo and you will understand what i am saying.

Demo

To install it to your blog follow the steps below.
Step 1 : Login to Blogger Dashboard and navigate to Layout > Edit Html

1. Don’t click the checkbox which says ‘Expand Widget Templates’

Find this

]]></b:skin>

and replace it with

.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(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/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;
}
]]></b:skin>

Step 2 : Find This

</body>

Replace with :

<script src='http://all-in-one-blogger-widget.googlecode.com/files/paginator3000.js' type='text/javascript'></script>
<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=6;
</script>
<script src='http://all-in-one-blogger-widget.googlecode.com/files/paginator3000-forblogger-v1.0.0.js' type='text/javascript'/>
</body>

You can change the following above:-


var postperpage=7;



var numshowpage=6;



Postperpage : How many Post every Page for your blog;



numshowpage : how Many number will show in Your page Navigation;

Step 3 : Customize Label  Go to the Edit HTML page and “Expand Widget Templates”.Find this

'data:label.url'

and Replace with this

'data:label.url + "?&max-results=7"'

Change 7 base on how many post every page

Grab The Post URL

URL: http://foodandbaveragearticleblogs.blogspot.com/2010/06/very-cool-way-pagination-widget-for.html
HTML link code: <a href="http://foodandbaveragearticleblogs.blogspot.com/2010/06/very-cool-way-pagination-widget-for.html">food and baverage article blogs: A very cool way pagination widget for blogger "clickable"</a>
BB (forum) link code: [url=http://foodandbaveragearticleblogs.blogspot.com/2010/06/very-cool-way-pagination-widget-for.html]food and baverage article blogs: A very cool way pagination widget for blogger "clickable"[/url]