How to Change Newer, Older & Home Navigation Links With Image in Blogger

Olusegun Fapohunda Last updated on

Changing of Older post, Newer post and Home Navigation links in blogger with icons and images is a nice and good trick to make your blog look more professional and beautiful. These Navigation links can be located beneath each post section in blogger.


How-to-Replace-Newer-Older-and-Home-Navigation-Links-with-Image-Buttons

Today, I want to show you how you can easily change those links to images. Below is a tutorial on how to do that.

“Important Notice: Always Back Up Your Templates before Making Any Changes On it”

#1. Go to Blogger Dashboard -> Template tab
#2. Now find the code in red lines and replace them with codes in green as shown below:-

1.<data:newerPageTitle/>
Replace with
<img src='http://2.bp.blogspot.com/_7wsQzULWIwo/Sy4pzt1z0HI/AAAAAAAACmA/_ds20c_esrI/s400/Next-blue2.png' alt='Next Post'/>


2.<data:olderPageTitle/>
Replace with
<img src='http://3.bp.blogspot.com/_7wsQzULWIwo/Sy4pz2jTGLI/AAAAAAAACmI/VqHtjBJ4aOI/s400/Previous-blue2.png' alt='Previous Post'/>


3.<data:homeMsg/>
Replace with
<img src='http://2.bp.blogspot.com/_7wsQzULWIwo/Sy4p0L_BZXI/AAAAAAAACmQ/grR88RskyYo/s400/Home-blue2.png' alt='Home'/>

Now preview and save your template.
Then the link must appear on your blog as shown in the image below.

previous-next-home-navigation-link-to-image-in-blogger

In case you have your own icons you want to use, you can change that by changing the icon url in the code above with yours.

Over 50,000 + Readers

Get fresh content from JustNaira

Related Posts:

About The Author

I love sharing my knowledge with others. Feel free to contact me with any questions you may have. Please subscribe to the newsfeed and get updates through email, share this article with friends, or leave a comment below. New users can read about me HERE

10 Comments

  1. Electricalobjectivequestion

    Thanks for your help…i used it in my blog…it works fine…

    Reply
  2. Muneeb Baluch

    thanks uu

    Reply
  3. Admin

    Elangovan Palaniappan, no, that’s the correct code.

    Reply
  4. Elangovan Palaniappan

    Thanks a lot. We implemented in our blog http://electricalobjectivequestion.blogspot.com/ and that works fine.
    We observed one thing,. To obtain the location of “next” and “previous” buttons as shown in your site we have to interchange code 1 and 2

    Reply
  5. Admin

    @Christine, the tag has already been closed. You can give it a try on your blog.

    Reply
  6. Christine

    Just like to mention that after you enter the code for the “img” tag you have to close it with “img” afterwards since the templates are in xml and cannot be parsed with any unclosed tags.

    Reply
  7. Anonymous

    hey justnaira tanx very much but i reallt need the numbering own where by it will show 12 3 Next just like yourz

    Reply
  8. cashdove

    great one boss, am going to try that

    Reply
  9. Admin

    @Anonymous What I mean is that you should save your template on your computer before you edit it.

    Reply
  10. Anonymous

    concerning the back up of template pls i dont understand what you mean by that.

    Reply

Leave a Reply