How To Change Blogger Home, Next Post and Previous Post Navigation Link With Image

When you see a Blogger blog post, there are three links shown at bottom Newer Post, Home and Older Post. Usually which does not look dynamic and makes your blogger post look ugly. This tutorial tells you how to change older post newer post and Home link text with cool pictures like right arrow left arrow or Home Icon. It is very easy and every blogger should do it to make their blogger post look good.


How To Change Blogger Home, Next Post and Previous Post Navigation Link With Image.

1. First of all download the above images by below link

Download Images

2. Now go to your Blogger post and upload it and get the image URL

3. Login to your Blogger account > Go to Dashboard > Design > Edit HTML

4. Now search the below code Use CTRL+F Key

     <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>

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

- Relace <data:newerPageTitle/>  With   <img alt='Next Page' src='SET YOUR NEXT PAGE IMAGE URL'/>

- Replace <data:olderPageTitle/>  With  <img alt='Previous Page' src='SET YOUR PREVIOUS PAGE IMAGE URL'/>

- Replace  <data:homeMsg/>  With  <img alt='Home' src='SET YOU'RE PREVIOUS PAGE IMAGE URL'/>

5. Now save your blogger template and see the effect.