Adding Numbered Page Navigation Bar in blog For Blogger

Hi Today we are going to learn how to add page navigation bar with numbers for blogspot blogs,
i’m sure that most of you have a lot of posts and the default blogger way to navigate between new post and old post is boring. what if your visitors wants to read for your oldest posts?
should he keep clicking on “older posts”, No.
You should apply this hack for your template, it’s one of the most useful blogger tricks ever.
so lets see how to do it.
Warning :
Please Download Full Template Before making any changes.
Log into your blogger account and go to,

Dashboard >> Layout >> Edit html.

And find the following code. use ctrl+F
And just before it Add the next code 

 Next Step:-
Find the next code Or some similar code
<b:section class=’main’ id=’main’ showaddelement=’yes’>
<b:widget id=’Blog1′ locked=’true’ title=’Blog Posts’ type=’Blog’/>

And After the </b:section> Tag add the next code.

And Click “save template

In the above code you may only edit four lines to customize your navigation bar.
var pageCount=10;

In this code Number 10 control the number for posts per page, you can change it to choose how many posts per page you want to display.

Note : This Number value should be the same With in your blogger account settings
The settings can be found by going to Dashboard >> Setting >> Formatting >> Show >> 10 posts
var displayPageNum=6;

Number 6 here control the number of pages that will be shown in the navigation bar.
var upPageWord ='Previous';
var downPageWord ='Next';  

if you want to change the language or just change it to any thing, please change Previous for example to Older

LAST STEPS:- who use labels in blog   

This blogger trick my cause some problems if you use labels in your posts and to solve this problems you have to apply the next step for your template.
1. Add Label Gadget To Your Template by going to Layout >> page elements >> Add Gadget >> Select Labels and add it to your template.
2. go to, Dashboard >> Layout >> Edit html.

And find the following code.

<a expr:dir=’data:blog.languageDirection’ expr:href=’data:label.url’><></a>

And replace it with the following code.

And Click “save template
We are done.
Enjoy !
Stay Upadate
InfO PlaNet

Kindly Share The Love »»

Technorati Digg This Stumble Stumble Facebook Twitter

Share your views...

0 Respones to "Adding Numbered Page Navigation Bar in blog For Blogger"

Post a Comment


About Blog

This Blog about Technology updates included Untethered iPhone Jailbreak iPad 2 apps iPod games iPod Touch gadgets design photoshope Blogging Tips.

Follow by Email


© 2012 All Rights Reserved |Contact Us| Privacy Policy|Terms of Use|