08 November 2012

How to add a Numbered Page Navigation Tool in your blogger blog?

12:26 AM By Pallav Jain , ,


Numbered Page Navigation

What is the reason behind writing this post?
As a beginner blogger, whenever I used to visit the blogs of some other authors, I often noticed the pages numbered in the bottom of the webpage. Seeing this, I began wondering as to how I could include that page numbering into my blog.

Usually, whenever we use any template for our blog, in most of the templates, the Numbered Page Navigation Tool is not provided. So, if you want to include this page numbering into your blog, then you need to do it yourself.

In that case, the bloggers would start Google searching for this tool, but it is not so easy to find this tool. Thus, I am writing this post in order to make the task of the bloggers easy, by providing them with the simplest method for incorporating this tool in their template.

How to include the Numbered Page Navigation Tool in your blogger blog?
You don’t have to do much hard work in order to add this tool in your blog.

Just follow the steps listed below in sequential order to include the tool: -

Step 1: - First, go to your Blogger dashboard. From there, choose Template option. Thus, a Webpage appears as shown below.
Open Template in Blogger
Click to Enlarge

Step 2: - Click on Edit HTML button in the given Webpage. Then, a dialog box opens on your screen, where you get 3 options – Proceed, Open Design Template and Cancel.
Proceed in Open template option

Step 3: - Click on Proceed button. Press Ctrl + F (for finding) to open a search query box and type </body>.
Edit Html dialog box
Click to Enlarge

Step 4:- Add the code written below before </body> attribute.


<style type="text/css">#blog-pager{font-size:normal}.showpageArea{font-family:verdana,arial,helvetica;color:#000;font-size:11px;margin:10px}.showpageArea a{color:#fff}.showpageNum a{padding:3px 8px;margin:0 4px;text-decoration:none;border-top:2px solid #000;border-left:1px solid #000;border-right:1px solid #000;border-bottom:1px solid #000;background:#666 url(http://4.bp.blogspot.com/_McxL-_3YYuM/TBG_pY-zi5I/AAAAAAAAAAs/NhvUZ3iOFe4/s1600/wp4.jpg) 0 -25px repeat-x}.showpageNum a:hover{border-top:1px solid #999;border-left:1px solid #999;border-right:1px solid #999;border-bottom:2px solid #999;background:#999 url(http://4.bp.blogspot.com/_McxL-_3YYuM/TBG_pY-zi5I/AAAAAAAAAAs/NhvUZ3iOFe4/s1600/wp4.jpg) 0 -50px repeat-x}.showpagePoint{color:#fff;padding:3px 8px;margin:2px;font-weight:700;border-top:2px solid #000;border-left:1px solid #000;border-right:1px solid #000;border-bottom:1px solid #000;background:#000 url(http://4.bp.blogspot.com/_McxL-_3YYuM/TBG_pY-zi5I/AAAAAAAAAAs/NhvUZ3iOFe4/s1600/wp4.jpg) 0 0 repeat-x;text-decoration:none}.showpageOf{margin:0 5px 0 0} </style>
<a href="http://24work.blogspot.com/" target="_blank" title="Grab this"><img src="http://24work.ucoz.com/24work-blogspot/www.24work.blogspot.com.png" alt="Blogger Tips And Tricks|Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a>
<a href="http://24work.blogspot.com/" target="_blank" title="Free Backlinks"><img src="http://24work.ucoz.com/24work-blogspot/www.24work.blogspot.com.png" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a>
<script style='text/javascript'>
var postperpage=5;
var numshowpage=10;
var upPageWord="Previous";
var downPageWord="Next";
var home_page="/";
var urlactivepage=location.href;
</script>
<script style='text/javascript' src='http://safir85.ucoz.com/24work-blogspot/page-navigation/0-test-p-n-01_00.js'></script>


You may change the number of post shown in each page by changing the highlighted text variable number.

Step 5: - Now, click on Save Template to save the changes.

Thus, you have successfully included the Numbered Page Navigation Tool in your blog.

If you have any queries related to this post, then you may comment below…

Author-