Loading...
Wednesday, September 14, 2011

Numbered Page Navigation for Blogger

Page Navigation  facilitates visitors to explore our blog and view  page per page. Blogger did not facilitate page navigation. Page Navigation is a really awesome and long awaited feature. Muhammad Rias of Techie Blogger had already developed a page navigation system for blogger.It really was an awesome trick which was made at a time when nobody could even think of implementing it on blogger.It had some minor bugs and now Abu Farhan has perfected it and he has now given us the perfect page navigation solution.

For WordPress users must already be familiar with page navigation. For Blogger users let's We hack the template.

Here are the steps:

1.Login to Blogger Dashboard and navigate to Layout > Edit Html

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

3.Now find
]]></b:skin>

and replace with
/* Page Navigation styles */
.showpageNum a {
  padding: 3px 8px;
  margin:0 4px;
  text-decoration: none;
  border:1px solid #999;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  background: #ddd;
  }

.showpageOf {
margin:0 8px 0 0;
}
.showpageNum a:hover {
  border:1px solid #888;
  background: #ccc;
  }

.showpagePoint {
  color:#fff;
  text-shadow:0 1px 2px #333;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  border:1px solid #999;
  background: #666;
  text-decoration: none;
  }
]]></b:skin>

4. Now find
</body>
and replace with
<!--Page Navigation Starts-->
<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=4;
var numshowpage=6;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://bloggerhack.googlecode.com/files/pagenav.js' type='text/javascript'/>
<!--Page Navigation Ends --> 
</body>
There are some customizable parameters in this code
varpostperpage=4;
This code determines the number of posts that would be displayed per page.
varnumshowpage=6;
This code determines the number of additional page navigation numbers that will be displayed on the page.
var upPageWord =&#39;Previous&#39;;
downPageWord =&#39;Next&#39;;
These two lines determine the text that would be shown for the previous page and next page respectively.

9 comments

You are edit my script and delete my Name.

Reply

Sorry Abu.. we just googling and share it.. I'll give a credit to your blog

Reply

not working for my blog....

Reply

oh,, i'm looking for this tutorial many more but always not working!

Reply

Very nice..it looks great on our page!

Thanks :)

Reply

Thanks View my blog http://files27.blogspot.com

Reply

Post a Comment

Attention...!!! Do not include a direct link! It will be removed automaticly from our comment system.