RSS

Navigation : Home / , , , / Article : How to Add Page number to blogger post

How to Add Page number to blogger post

If you are blogging daily and you have more pages to navigate, still you are using Older post and Newer Post in blogger, that will navigate from one page to another page of your blog, Have you thought to add page number navigation bar in to your blogger template, so that you can navigate to a specific page number in your blog.
If yes, than you can do following tricks and enjoy Page number navigation bar in your blog, that let readers easily navigate throughout your blog.Do not forget to download/backup your blogger template first before changing any HTML code to get back your previews blogger template if you do not like changes you made.

Follow the steps to Add Page number into your blogger post :
1.Login to your account,Go to Dash board, Select Design and Edit HTML tab.
2.Do not expand widget template by checking box Expand Widget Templates.
3.Find the following code by pressing Ctrl + F.


]]></b:skin>


4. Replace that code with following code.

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



5.Next step is to find Java Script , search the following code from your template.




</body> 


6.And replace that code with following code.






<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=6;
var displayPageNum=6;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>
</b:if>
<!--Page Navigation Ends -->
</body>
  
7.You can customize the following codes from above.

var pageCount=6;

This code determines the number of posts that would be displayed per page.

var displayPageNum=6;

This code determines the number of additional page navigation numbers that will be displayed on the page.



8.Go to Edit HTML and Expand widget template & search for

'data:label.url'

including quotes and replace it with

'data:label.url + &quot;?&amp;max-results=6&quot;'

(6 is number determines how much posts to be displayed per page. )








Loading














 




















0 Responses to "How to Add Page number to blogger post"
        



    







Do not add any spam messages, as we will strictly delete the spam comments, all content posted on this blog are free for use and for knowledge, do not spoil it with spamming.