Change/Replace Newer, Older And Home Navigation Links With Image Button On Blogger

This is another awesome way of replacing the newer, older and home links with an image button,in my previous post, i have discuss on how how to replace older and newer posts with posts title links but today tutorial is base on how to replace it with an image button, you can surf the web for different types of icons that can be use to replace newer, older and home links or you create an icon that best suit your blog, example of this can be found at the bottom of this blog posts.

This navigation icon will appear at the button of your every post, which will allow readers to navigate through your older and newer posts. By default the links are represented with text, but today it became history, because you are going to learn how to replace those links with an image button, which will makes your blog to look more professional.

How To Replace The Navigation Links With Image Button

• Go to your blogger dashboard
• Click on "Design" > "Edit HTML" > back up your template
• Mark/Tick "Expand Widget Templates"
• Use ctrl F to find <data:newerPageTitle/> and replace it with the code below.

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirO0mn6KGD9j61NB7uMrk-MyG3wXEKWB1E2d5_Z37pkU-8gzw9na1DbP-wbqzCVQsiBi-PNOjbxwRXW4MFWWRL670dKtwAvryevHYM5EDLILfcH08Z60bQzQE7I1mXbgwo66J2mjrXkXtT/s1600/RB+Newer+Posts.jpg' alt='Next Post'/>

• Now find <data:olderPageTitle/> and replace it with the code below.

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-ZxnUhIK7774kc3RXwuOspFYiptwbgPPd16YxPmXxDfoAcJAHsCOgFW8MHemffBZTa1OJEOOwvNKIkQTMF3_yhov21LrnDXymDZYoW3apbXNGH3T4Y9WR2DWvZ7ZUz4HN8Qa6oYmSs2mD/s1600/RB+Older+Posts.jpg' alt='Previous Post'/>

• Now search for <data:homeMsg/> and replace it with the code below.

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcNz3jWjQJz9kHgZLwLlUTWqz9GKgg8ltaD_zGm12o1T76D3yd8pqFtqEo-MIRwTAzMzUZK5-lZUYm4jyzjdDSqxKhzUAGM4zgG-h0WWaQb1qo21vAMw3zfuE5xdNF6pQ5asVSvzmt2r9m/s1600/Home.jpg' alt='Home'/>

• Replace all highlighted portion with your image button url or leave it as it is, if you want the image button below this blog posts, and click "SAVE TEMPLATE"

That's all, if you like this article, take few seconds to share it and we like to hear from you, what you feel about this awesome changes.

Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

Follow @realcombiz