By default every blogspot template has Older – Newer link in text type. The link will appear on the bottom of the post, leading readers to visit older or newer post. Sometimes readers miss it because the link is not so eye catching to get people attention to click it. But, you can change that by replace the link with attractive image button.

This blogspot tutorial for beginner will show you how to replace older – newer text link to image button by host the image on free photo storage like Photobucket or imageshack. So first make sure you already have account to one of those site. Now follow the steps below:

1. Log in to your Blogger account. On your Dashboard, choose TEMPLATE. It’s an easy tutorial, but if it’s first time you edit HTML code, make sure to backup your template. The backup/restore button is on the right corner on template page view.

2. Click EDIT HTML. And your template HTML box will show like the pic below:

You will see there are several button above HTML window, click EDIT TEMPLATE.

3. Now find ( Ctrl + F ) this code below:

}
#blog-pager-newer-link {
float: left;
display;none

}
#blog-pager-older-link {
float: right;
display;none

}
#blog-pager {
text-align: center;
clear:both;

Delete the display;none line, so the Older – Newer link will show.

To replace it with image, find ( Ctrl + F ) code below:

• <data:olderPageTitle/> and replace it with this code:<img border=’0′ src=’[your_image button_url]‘/></a>
• <data:newerPageTitle/> and replace it with this code:<img border=’0′ src=’[your_image button_url]‘/></a>
• <data:homeMsg/> and replace it with this code:<img border=’0′ src=’[your_image button_url]‘/></a>

4. PREVIEW TEMPLATE and see if the Older – Newer image button appear. If it’s there click SAVE TEMPLATE.