What's new

Page Navigation for blogger

Monday, January 2, 2012




Page Navigation system was developed by Muhammad Rias of Techie Blogger.It is a good widget that nobody think in time that we can also implement it in blogger. There are some minor bugs before thats why Abu Farhan fixed it and we can now have a perfect page navigation for our blogs.

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 it with
 
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}
]]></b:skin>
 
4.Next is the JavaScript part. Find
</body>
and replace it with


<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>
</b:if>
<!--Page Navigation Ends -->
</body>
 
you can adjust the following parameters depending on your needs 

var pageCount=5;

This code determines the number of posts that would be displayed per page.
 
var displayPageNum=5;
This code determines the number of additional page navigation numbers that will be displayed on the page.
 
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
These two lines determine the text that would be shown for the previous page and next page respectively.

Label Fix:

But wait, we still have problem.By default,the blogger label pages will show 20 posts. We will have to cut this down to the value that we gave for the variable pageCount (or the posts per page).For this we will have to edit our template

How to Edit the template to cut short the posts per page?

Go to the Edit HTML page and expand the Widget Templates
Now find each occurrence of
'data:label.url'
(including the quotes) and replace each of it with
'data:label.url + &quot;?&amp;max-results=5&quot;'

Here 5 is the number of posts to be displayed per page.
Now if you are using the label cloud widget by phydeaux3,then find
a.href = &#39;/search/label/&#39;+encodeURIComponent(t);
and replace it with
a.href = &#39;/search/label/&#39;+encodeURIComponent(t)+&#39;?&amp;max-results=5&#39;;

Here also 5 is the number of posts to be displayed per page.

You can now use the page navigation system perfectly on your blog. enjoy!

FULL STORY >>