Change Newer Posts, Older Posts and Home Links In Blogger

Here's a simple hack to change the Older posts, Newer Posts and Home links in your blog (displayed below all your blog posts):

1. Log in to Blogger

2. Go to Layout -> Edit HTML -> Click on "Expand Widget Templates"

3. Now search (CTRL+F) for this code in the template code:

<b:includable id='nextprev'>

<div class='blog-pager' id='blog-pager'>

<b:if cond='data:newerPageUrl'>

<span id='blog-pager-newer-link'>

<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>

</span>

</b:if>

<b:if cond='data:olderPageUrl'>

<span id='blog-pager-older-link'>

<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>

</span>

</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>

<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

<b:else/>

<b:if cond='data:newerPageUrl'>

<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

</b:if>

</b:if>

</div>

<div class='clear'/>

</b:includable>

Now carefully replace the colored code regions with your own custom image icons.

The first red colored code is for "Newer Posts" link.

The second red colored code is for "Older Posts" link.

The blue colored codes are for "Home" link.

For icons, you can visit this web site:

Icon-Search.Com

To add images, simply use this code:

<img src="http://DIRECT_LINK_OF_YOUR_IMAGE.jpg"/>

Finally save your template, that's it !