26 March 2011

Numbered Page Navigation hack with Scroll for Blogger

Advertisements

Numbered Page Navigation is a rocking hack for Blogger blogs. Abu Farhan now come with new Page Navigation hack that have scrolling.

This hack is inspired from a WordPress plug in Paginator.

Check out Live Demo here.

How to add

Step 1
First we will add Style. Go to Blogger Dashboard > Design > Edit HTML and look for ]]></b:skin>

Add following code 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(http://3.bp.blogspot.com/_McxL-_3YYuM/TBG843o8-TI/AAAAAAAAAAM/tAE1hAOX6Ys/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;
}


Step 2
Now it's time to add JavaScript. Now look for </body>
Add following code ABOVE </body>

<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'/>

Customise above code for

var postperpage=7;
var numshowpage=4;

Postperpage : How many Posts you want to show on one Page of blog.
Numshowpage : how Many number will show in Your page Navigation

e.g. If you want to show 5 posts per page then change var postperpage=7; to var postperpage=5;

Save your Template.


Step 3
Finally we have to fix labels. Again go to Blogger Dashboard > Layout > Edit HTML. This time Click on Expand Widget templates.
Look for
'data:label.url'

And replace it with

'data:label.url + &quot;?&amp;max-results=7&quot;'

Again here you have to change 7 to 5 if you want to show 5 posts per page.

Save your template.

Similar hack
Numbered Page Navigation hack for Blogger (New & Error free)

Related Posts

3 comments

March 27, 2011 at 9:39 AM

Hello Drraman,

Congratulations on this great improvement.
No problem except when you click on previous page (with firefox 4.0), the page displayed is not the same.

Apparently there is no problem with Internet Explorer 7.0.

I use the Template "Minima Stretch" with Blogger.

Thanks again for your work.

November 5, 2011 at 10:37 AM

thanks





see my blog http://freecall24.blogspot.com

March 26, 2012 at 2:58 AM

thanx nice i applied this on my blog
http://internetricks4u.blogspot.in/

Post a Comment

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More