How To Change The Older, Home & Newer Link With Images In Your Blogger Blog

In this article i'll tell you how to change the Older, Home & Newer post links in blogger blogs.You are able to find these links beneath of your blogger posts, and below in Home page of our blog.If you have page numbered navigation widget installed in your blog then the links only appear below blog posts only because the numbered page navigation widget doesn't work below each article it works only on home page.

The Changing of link into image gives your blog a truly new and different look to your blog, and and these links and changing totally Search Engine friendly so it doesn't affect your blog's traffic and rankings.

And if you add these images in your blog in place of Links then these changes doesn't affect your numbered page navigation bar.

The Icons used in this tutorial is created by My Blogger Tricks (MBT) but you are able to add your own images by changing a little code of image in this tutorial.

How To Add The Images In Place Of Newer, Home & Older Post Links.??

Changing the links with images is very easy and you need to change a little code in your blogger template HTML with this step by step tutorial you will able to add these images very easily.

Step1.) First Login to your blogger account and Go to your Dashboard.

Step2.) In Your Blog's Dashboard > Click On Design > Click On Edit HTML.

Step3.) Now "Check the "Expand Template Widget" you will find right above the HTML of your template.

Step4.) For changing Older Post Link search this code <data:olderPageTitle/> and replace it with the below given code.

<img src='https://lh4.googleusercontent.com/-KMFd_Pth-aQ/Tw-lf-R9yGI/AAAAAAAAAhA/Am1qQ5tXXW4/s85/Next-page.png' style='border: 0 none;vertical-align: middle;'/>

Step5.) Now For changing the Home link search this code <data:homeMsg/> and replace it with the below given code.

<img src='https://lh3.googleusercontent.com/-jb6yRwh5m_M/Tw-lf0dgH9I/AAAAAAAAAg8/0PGekL9GwEc/s60/Home-page.png' style='border: 0 none;vertical-align: middle;'/>

Step6.) For changing the Newer Posts Link search this code <data:newerPageTitle/> and replace it with the below given code.

<img src='https://lh3.googleusercontent.com/-B-NK5cBab5I/Tw-lgY-2yuI/AAAAAAAAAhE/O_WNtXM5KJg/s85/Previous-posts.png' style='border: 0 none;vertical-align: middle;'/>

Note: You are able to change the icons by changing the icons url in the above codes whcih is highlighted in red color.

Step7.) Now Save your template and enjoy the icons instead of links in your blog.

If you like our this tutorial then i am sure you will also like our other tips and tricks about blogs so check out other blogger tricks and follow us on twitter and Facebook.

If you facing any difficulty in adding the code then leave a comment and i will get back to you.