How To Add Page Navigation To Your Blogger Templates
Just like WordPress, the default navigation system for Bogger is annoying. Today we are going to learn how to remove “Newer Post” and “Older Post” from your Blogger template and replace with a standard numbered navigation system which will allow your readers to navigate your site deeper.Firstly, before any modification to your Blogger templates, ensure that you have carried out a back up. If you don’t know how,
8 Easy Steps To Add Paage Navigation to Blogger
1. Login to your Blogger account
2. Navigate to Layout > Add Gadget
3. Add Html/Javascript from the pop up window, Leave the title blank
4. Copy and paste the code below in the widget body
2. Navigate to Layout > Add Gadget
3. Add Html/Javascript from the pop up window, Leave the title blank
4. Copy and paste the code below in the widget body
<style type='text/css'>
#blog-pager{height: 28px;
padding: 10px 0 0;
overflow:hidden;
text-align:center;
}
.showpageArea a {text-decoration:underline;
font-size: 16px;
text-align: center;}
.showpageNum a {font-size:16px;text-decoration:none;border: 1px solid #cccccc;margin:0 5px;padding:5px;}
.showpageNum a:hover {border: 1px solid #cccccc;background-color:#cccccc;}
.showpagePoint {font-size:16px;text-decoration:none;border: 1px solid #cccccc;background: #216FD9;margin:0 5px;padding:5px;color:#ffffff;}
.showpageOf {text-decoration:none;padding:5px;margin: 0 5px;}
.showpage a {text-decoration:none;border: 1px solid #cccccc;padding:5px;}
.showpage a:hover {text-decoration:none;background: #cccccc;}
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#333333;}</style>
<script style='text/javascript'>var pageCount=7;
var displayPageNum=5;var upPageWord="Previous";var downPageWord="Next";</script>
<script style='text/javascript' src='http://netoopscodes.googlecode.com/svn/netoops-page-nav-v2.js'></script>
#blog-pager{height: 28px;
padding: 10px 0 0;
overflow:hidden;
text-align:center;
}
.showpageArea a {text-decoration:underline;
font-size: 16px;
text-align: center;}
.showpageNum a {font-size:16px;text-decoration:none;border: 1px solid #cccccc;margin:0 5px;padding:5px;}
.showpageNum a:hover {border: 1px solid #cccccc;background-color:#cccccc;}
.showpagePoint {font-size:16px;text-decoration:none;border: 1px solid #cccccc;background: #216FD9;margin:0 5px;padding:5px;color:#ffffff;}
.showpageOf {text-decoration:none;padding:5px;margin: 0 5px;}
.showpage a {text-decoration:none;border: 1px solid #cccccc;padding:5px;}
.showpage a:hover {text-decoration:none;background: #cccccc;}
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#333333;}</style>
<script style='text/javascript'>var pageCount=7;
var displayPageNum=5;var upPageWord="Previous";var downPageWord="Next";</script>
<script style='text/javascript' src='http://netoopscodes.googlecode.com/svn/netoops-page-nav-v2.js'></script>
5. Change pageCount=7; in line 17 to any number of your choice.
Note: Any figure you choose for your count number must be reflected in your Blogger seetings.
Go to Settings > Post and Comments; change value of Show at most as you given in PageCount.
The page counts determines how many blog post would be shown per page.
6. Change displayPageNum=5 in line 18 to any number of your choice.
This number determines how many additional Page Navigation numbers would be display on your page
7. Save
8. Finally, Move the widget from the Sidebar, place it under the Blog posts. Save Arrangement.
If you followed the instructions correctly, you should see your beautiful Page Navigation on your template.
Note: Any figure you choose for your count number must be reflected in your Blogger seetings.
Go to Settings > Post and Comments; change value of Show at most as you given in PageCount.
The page counts determines how many blog post would be shown per page.
6. Change displayPageNum=5 in line 18 to any number of your choice.
This number determines how many additional Page Navigation numbers would be display on your page
7. Save
8. Finally, Move the widget from the Sidebar, place it under the Blog posts. Save Arrangement.
If you followed the instructions correctly, you should see your beautiful Page Navigation on your template.