How To Change "Older Posts", "Newer Posts", And "Home" With Stylish Icons

H, friend! Now i will teach you about how to change "Older Posts", "Newer Posts", and "Home" with an icon. Usually "Older Posts", "Newer Posts", and "Home" located under our blog. The function is direct us to go to another page, either older posts page or newer posts page. Usually, the commands ("Older Posts", "Newer Posts", "Home") are only a word, therefore we will change the word into an icon. Now, if you want this trick, just follow the steps.

1. Log in to your blogger icon
2. Go to Design>>>Edit HTML
3. Thick "Expand Widget Templates"
4. Then find this 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 + "_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>

5. Change the blue words with image script

<img border='0' src='ICON URL'/>


Examples :

<img border='0' src='http://robots1996.fileave.com/Beranda.png'/>

<img border='0' src='http://robots1996.fileave.com/Posting_lama.gif'/>

<img border='0' src='http://robots1996.fileave.com/Posting_lebih_baru.gif'/>


So like this :

<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'><img border='0' src='http://robots1996.fileave.com/Posting_lebih_baru.gif'/></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'><img border='0' src='http://robots1996.fileave.com/Posting_lama.gif'/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><img border='0' src='http://robots1996.fileave.com/Beranda.png'/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><img border='0' src='http://robots1996.fileave.com/Beranda.png'/></a>
</b:if>
</b:if>

</div>

6. If you finish, save it
NOTE : You can change the URL, with your own icon