Change Home,Newer Post & Older Post to Page Naviagation

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

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 .

 

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.

And if you liked this post, please consider sharing it. Thanks

Template Design, widgets