Customize Page Navigation Links | Blogger Tips

By default, Blogger shows a navigation link after each post. This navigation link offers reader to navigate Older posts,Newer posts and Home page. You may want to show image instead of text link for looking good. Today as a Blogger tips , I am going to described how to change this Navigation link to your preferable one. Before starting look at below image:





Before changing Navigation Link:


 Customize Page Navigation Links


After customizing Navigation Link:



 Navigation Links
So, which one looking better? Now If you are determined to customize it then follow the blogging tips below:


1. Login to Blogger.com

2. Click on Dashboard. Then go to Layout Tab. Select Edit HTML.

3. Select Expand Widget Templates check box. Before editing HTML, download your full template for safety.Now search for the code:
expr:title='data:newerPageTitle'><data:newerPageTitle/></a>

expr:title='data:olderPageTitle'><data:olderPageTitle/></a>

<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
4. Let us explain what this code means. I have shown below their equivalent output in template.
  • <data:newerPageTitle/> tag shows "Newer Posts" in Template
  • <data:olderPageTitle/>tag shows "Older Posts" in Template
  • <data:homeMsg/> tag shows "Home" in Blogger Template

5. Now change the red code to your preferable name.
expr:title='data:newerPageTitle'>Previous Page</a>
expr:title='data:olderPageTitle'>Newer Page</a>
<a class='home-link' expr:href='data:blog.homepageUrl'>Home</a>
6. Now If you want to put image instead of text link , then get your image URL from free hosting sites. Suppose your image URL is : <img src="Your image URL"/> Now replace this image URL with red code in Step 3.
expr:title='data:newerPageTitle'> <img src="Your previous button image URL"/></a>
expr:title='data:olderPageTitle'> <img src="Your Newer button image URL"/></a>
<a class='home-link' expr:href='data:blog.homepageUrl'> <img src="Your home button image URL"/></a>
I hope you like this blogger tips. Now share it with world to help others. For Latest Blogger Tips and Tricks subscribe Here !

Comments Post a Comment

Abd Essamad - April 19, 2009

Hey
Thank you for your useful inforamtion,


Maps And Earth

The Stylish House - April 19, 2009

This is a great tip! Nice blog I am going to look around more.. ~Cathy~

Bati - April 22, 2009

Really good tips for blogspoter.Thanks

Sandee - February 16, 2010

Wow, I just did this and it's great. Thanks for all your hard work. :)

Gian Faye - September 09, 2010

Thanks! I've been looking for this. :-)

Leave a Comment