How to Replace Blogger Navigation Links with Image!

Hello Blogger! Today I have come with an interesting and important trick for you all. If you are blogging on Blogger platform then I am sure you re very much familiar with the Blogger Navigation Link - Older Posts <--> Home <--> Newer Posts. These links located at the bottom of the blog page. This post is completely dedicated to them who are not satisfied with thins link and want to replace these navigation link with buttons or image. And by going through this post you will be able to replace these navigation links.

Have look at image above when you will replace Navigation links then Navigation buttons or images will be shown in place of them. All you need just to find the navigation link code inside the HTML page of your blog and replace them with the code that I'm sharing. You can also use the Navigation buttons or image of your own choice. Let's see how to do the trick...

Warning: Before doing any kind of customization on your site's HTML page, I will recommend you to backup your site Template. To know more about Template backup Read This Post.

Replacing Blogger Navigation Links with Image:

• First Sign into your Blogger Account and go to Dashboard.

• Then click on Template and then click on Edit HTML button. You will land on the HTML page.

To Replace the Older Posts link:

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

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

To Replace the Newer Posts link:

• Then again find <data:newerPageTitle/> and replace it with the below code.

 <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG1AAKv8P3gPOhdgJfTK1CIRY41qMTEzV9jq8AknEIULwlqsIdATjACjowCWizKOVZRp8rTSq6J1jRo4vtSN9XxZuxOVXL7I0z_o-BAmJSR4WO1zN73D4d0xGemP1RLQmeT6bCI-oWQ-wT/s1600/btsnts-older.png' style='border: 0 none;vertical-align: middle;'/>  

To Replace the Home link:

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

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

Finally after completing all the above steps correctly, click on Save Template button..

Customization

• As I said above you can use buttons of your own choice. To do so just Replace the image URL in the above codes with your image URL. In the above three codes the image URL is colored with Red.

That's it, Now view your blog and check the navigation buttons at the buttons of your blog. If everything is OK then the Navigation links will be replaced with Navigation button or images.

Stay with www.iTTimesbd.com for more IT related post