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.
 |
| 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.
Step 3:
- Click on Proceed button. Press
Ctrl + F (for finding) to open a search query box and type </body>.
 |
| 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-
Pallav Jain
