How to Add Page Number in Blogger to Navigate Page from Template

Posted by Unknown Wednesday, February 22, 2012

How to Add Page Number in Blogger from Template? Page number is very necessary to navigate page of blog. It make more easier to navigate site for site visitors. With page number they can easily go to their desire page. You can do it from template or using a widget. It look like the below screen shot...

To add this page number just follow the below steps:-

1. Login to your blogger account.

2. Than dashboard >> layout >> Edit HTML.

3. Don't forget to backup your template first.

4. Check the Expand Widget Templates box.

5. Now find out ]]></b:skin> code.

6. 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>

Note: This code will appear showing navigation page. You can edit it if you need.

7. Next Find </body>

8. Now replace it with below code.

<b:if cond='data:blog.pageType != "item"'>

<script type='text/javascript'>

var pageCount=5;

var displayPageNum=5;

var upPageWord ='Previous';

var downPageWord ='Next';

</script>

<script src='http://tools.adityawebs.com/javascript/blogger-page-nav-v2.js' type='text/javascript'/>

</b:if>

Note: Change based on your blog setting :

var pageCount=5;

var displayPageNum=5;

pageCount : How many Post every Page for your blog

displayPageNum : how Many number will show in Your page Navigation

9. Save your template and you are done.

You can our another post Add Menubar with Submenu in Blogger IF you need.

Subscribe to Get Newest Articles By Email!