Replace Older,Newer And Home Navigation Links With Image Button

After your blog post ends you will see a links like Older Post and Newer Post.You can change it with your own images. The icons used in this post was designed by  Visual Pharm . You can use your own icons. If you are using the Numbered Page Navigation widget, these links are visible on each post only. because the numbered page navigation is not works on single post page. and by adding these image buttons, there is no effect takes on page navigation widget.

How To Replace Newer,Older and Home Links With Images  ?

1. Login To Blogger Dashboard > Design > Edit HTML.
2. Check Expand widget templates i.e. tick it.

Replacing Older Link

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

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDP20W7tznc42T4J5LCwMGZXBJAJ4wfiwMJmrynlHnlXGEDKhAyMouqFR5XkuJdhSfVrnYSafmPcWwufWIRcsP7hUZiFebjOSYuX3x0W_jA0pJekx_IyvxyxKrYrfgNlEY10JSwlq9zLXw/s1600/btsnts-Newer.png' style='border: 0 none;vertical-align: middle;'/>

Replacing Newer Link

• Now search for <data:newerPageTitle/> tag and replace with below code.

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY3NPB7HY2MS-yPUcfJW0q0CpNZr64CTvhtACuejOoIQeqa-1iltT_LbcHbIVRCwuerV9ukKkcM8AiPaI30e1WUgEXazq8fOBaZm4NXF0fyzIjJNp_VnSJxvmV3PliDZY-1CdGlNN9MdDu/s1600/btsnts-older.png' style='border: 0 none;vertical-align: middle;'/>

Replacing Home Link

• Search for <data:homeMsg/> tag and replace with below code.

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSDl7_wpBzW_WivP06tQm55A_lS-WiBlogiDF3h7mJsMXHhVv4YjHC1qVuKmIsWSiyoJUD8g0urpRKO6bnMX0d5j9hvLrlhLqC2IDOkpPmzNM0nkQFBcerDPA-J36yj5frlFcN1Gj54RZz/s1600/btsnts-Home.png' style='border: 0 none;vertical-align: middle;'/>

Now save your template and refresh blog posts.
Note - You can change these icons by replacing it with your image URL. You can find more amazing icons online. Search on iconfinder.com to get more amazing icons.