Most of the people think that page navigation hack is only for who blogs at Wordpress. But here is the hack for those who use blogger and want to add page navigation to their blog. This hack will show page number instead of text link older posts, as shown in following screenshot.

You can see live demo here.

Now this involves two things – adding some CSS code and javascript code to your template. All steps are explained below.

Steps:

  • Log in to your blogger account and navigate to Layout section. Now go to the Edit HTML tab.
  • Search for line ]]></b:skin>
  • Add CSS in this file above that line.
  • Now search for this code or related in your template (no need to expand widgets)
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/></b:section>

Mods:

In javascript codes in this file, find line…

var pageCount =5;

The digit in red represents number of posts to be shown in single page. Change the digit to show as many pages you want.

var displayPageNum = 3;

Here the digit in red represents number of pages to be listed. Change the digit to list as many pages you want.

That’s it now we have added Page Navigation menu hack to our blog successfully

Your Comments are appreciated..  :-)

(Credits: Muhammed from RTW)

Related: 6 Wordpress Plugins for Better Navigation and User Experience


[Editor Note: This is first post by Arjun Kumar on this blog. Arjun is just 16 year old and that make him youngest Devil in team DW. He is working hard on our new project OrkutBuddy, dedicated for orkut users.

If you like to write for Devils Workshop, please check this. Details about our revenue sharing programs are here.]