Replace newer, older & home links with images in Blogger

Replacing "Older Posts" and "Newer Posts" links with icons or images in Blogger is very nice trick to make your blog look very beautiful.

By default Blogger shows "Home", "Older Posts" and "Newer Posts" links at the bottom of your blog. With some nice set of icons or images you can replace these links and turn the footer even more attractive.

Before :

After :

Follow these simple steps to replace newer, older and home post links with images in Blogger / Blogspot blog.


Step 1 :

Log in to Blogger, go to Design / Layout > Edit HTML and tick the "Expand Widget Templates" checkbox.




 

Step 2 :

Now find (CTRL+F) this in the code:

<data:newerPageTitle/>

and replace it with the following code

<img src="URL-OF-PREVIOUS-BUTTON"/>

Note :

Upload an image to any image hosting website. e.g. tinypic and replace URL-OF-PREVIOUS-BUTTON with the url of previous button image.


Step 3 :

Now find (CTRL+F) this in the code:

<data:olderPageTitle/>

and replace it with the following code

<img src="URL-OF-NEXT-BUTTON"/>

Note :

Upload an image to any image hosting website. e.g. tinypic and replace URL-OF-NEXT-BUTTON with the url of next button image.


Step 4 :

Now find (CTRL+F) this in the code:

<data:homeMsg/>

and replace it with the following code

<img src="URL-OF-HOME-BUTTON"/>

Note :
Upload an image to any image hosting website. e.g. tinypic and replace URL-OF-HOME-BUTTON with the url of next button image.


Step 5 :
Save the template.