Touch2Know

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

1. Login to your blogger account.

2. Than go to template >> 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>

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>
</body>

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.