Change Home,Newer Post & Older Post to Page Naviagation

Finally, I have done with this cool tricks after going through so many errors. You often see a Home, Newer Post and Older Post ( How to Remove these links? ) link at the bottom of Blog. There is no need to customising these links but if you are interested in blog designing and wants your blog to look more professional then obviously this tutorial is for you. Anyone can easily change these links to Numbered page navigation by going through this tutorial. If your blog having a large number of posts with large number of visitors then visitors on your site can reach to different posts easily. So lets to apply this tricks on the blog.

How To Change Home, Newer Post to Numbered Navigation:-

1. Login to Blogger Dashboard.
2. Go to Design /  Edit HTML.
3. Click "Expand widget templates'.
4. Download full template before making any changes in it ( More info).

 

5. Find following piece of code in template.

 ]]></b:skin>

6. Paste the following code just above it.

<!.. Plugins By Shahbaz Malik at http://internetricks4u.blogspot.com ..> 

#blog-pager-newer-link {display:none;}

#blog-pager-older-link { display:none; }

#blog-pager {display:none; } 

.showpageArea a{text-decoration:none;} 

 .showpageNum a {text-decoration:none;border: 1px solid #cccccc;margin:0 3px;padding:3px;} 

.showpageNum a:hover 
{border: 4px solid #cccccc;background-color:#cccccc;text-decoration:none;} 

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

7. Find </body> in template and paste following code just above it.

<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=5;var displayPageNum=5;var upPageWord =&#39;Previous&#39;;var downPageWord =&#39;Next&#39;;                                                     </script>                                                                        <script src='http://blogger-page-navigation.googlecode.com/files/blogger-page-navi..js' type='text/javascript'/></b:if></b:if> 

8. Finally save the template and see the result.

Note:Make Following Modification

• pagecount=5 is the number of post per page.
• displayPagenum=5 additional page navigation number that will be displayed on the page.

If you find difficulty in this tutorial then comments are always open for that. More article by the same author

• How to remove subscribe to post atom
• Awesome facebook status tricks.