09 December 2009

Numbered Page Navitgation - a most wanted blogger hack

Advertisements

One of the coll feature of wordpress blogs is it's numbered page navigation system. Page navigation also known as panigation is now available for blogger due to the special work of Muhammad Rias and Abu Farhan. Page navigation allows us to number blog pages(1, 2, 3 ....) like those of a book. This replaces the 'newer' and 'older' post links and give users/visitors an ability to go to the deep into your blog.



Live demo of numbered page navigation


So let's add this feature to your blog.

Sign to blogger >> Layout >> Edit HTML.. (note - Do not click on

Find
]]></b:skin>

and replace it with

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #ed1049;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #ed1049;
background-color:#fdcfdb;
}
.showpagePoint {
color:#846c72;
text-decoration:none;
border: 1px solid #fdcfdb;
background: #fdcfdb;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #fdcfdb;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#846c72;
}


]]></b:skin>


Above is the style code. You can change the border, margin, background etc.

Now we have to add Java Script. Find

</body>

And replace it with

<b:if cond='data:blog.pageType != &quot;item&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://free.blogger.help.googlepages.com/blogger-page-navi.v1.js.txt' type='text/javascript'/>
</b:if>

Save you Template.
In above code -

var pageCount=5;     is number of posts displayed per page.
var displayPageNum=5;      is page navigation numbers displayed on the page.

You can also change the Previous and Next text.

Blogger Label Fix

As you know when you click on any label it shows 20 posts. We have to adjust this with posts per page value. Let's do it.

You will need first Labels to be visible on your blog. You can do it by Page Elements >> Add a Gadget >> Label.

Now go to Edit HTML. This time click on And find

'data:label.url'

It may be present more than one time. So replace all 'data:label.url' with

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

If you are using the label cloud widget by phydeaux3,  then find

a.href = &#39;/search/label/&#39;+encodeURIComponent(t);

and replace with

a.href = &#39;/search/label/&#39;+encodeURIComponent(t)+&#39;?&amp;max-results=5&#39;;

It's done. Thanks to Muhammad Rias and Abu Farhan.

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

Related Posts

2 comments

December 21, 2009 at 11:30 AM

Thank you for your nice posting.
it is really helpful to us.
such a nice topics.

Bathmate

January 5, 2010 at 9:24 PM

Happy new year.
Very nice website.
I am impressed.
I like it very much.


http://www.webroyalty.com

Post a Comment

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More