Blogger Footer navigation with specific number of posts in label pages

I think you have noticed a navigation menu at the bottom of my home page . Normally , blogger includes a link to older posts and previous posts at the end of each page .


In the above case , its pretty difficult as is makes us move on through each and every stories to view an inner page . Here i will discuss about a Blogger Footer navigation system which looks as shown below .
Usually the label pages in Blogger displays all the stories tagged with a particular label . So if you have 10 posts for a label "computer", everything under computer will come to a single page . After applying this hack , you will be able control the no: of posts that can appear in a single label page .

First part is to add a CSS code above tag </b:skin>. This code can be used to change the size ,colors and border of your Footer navigation menu .
download
Open Your Blogger templates' layout , select edit HTML and expand widget templates.
Now complete the first part by inserting the CSS code at the exact location .

Second step is to add the following JavaScript below </b:section> tag .
download2

In most cases ,it will the one that lies near below the Blog 1 or footer comment section .So its up to you to find out the exact location and you can do some trial and error method in this case .

<b:section class='main' id='main' showaddelement='yes'> <b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/> </b:section>

Now you can customize the Blogger Footer navigation by changing the number of posts and links on it . On the JavaScript code , search for a section var pageCount = 5; It defines the number of posts that can be displayed on a single page, while var displayPageNum = 5; defines the number of blocks of pages which are displayed (like: 1 2 3 4 5) under the post section.

Once you completed these tasks , save your template and open your blog in a new window. Now you can see a footer navigation under your blogger posts .