Blogging Tip : Replace Older post, Home and Newer post with icon links.

You may also replace Older post, Home and Newer post with icons. But you need to have a small picture (40 x 40), means that you got to resize it by using the photo editing software and upload the pictures onto your free image hosting. In the end, you will be having something like below:-

Now, let's move things forward. Just follow these few steps:-

1- Click on Dashboard > Layout > Edit Html
2- Look for Expand Widget Templates and tick the box.
3- Find this lines:-

<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 "_blog-pager-newer-link"' 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 "_blog-pager-older-link"' 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>


4- Change the colored portions with these codes as shown below:-

<data:newerPageTitle/>
change to
<img src="http://i44.servimg.com/u/f44/11/94/91/73/
left12.jpg" />

<data:olderPageTitle/>
change to
<img src='http://i44.servimg.com/u/f44/11/94/91/73/
right11.jpg'/>

<data:homeMsg/>
change to
<img src='http://i44.servimg.com/u/f44/11/94/91/73/
homeic11.jpg'/>

5- Save the template.