Change Newer Post, Older Post, Home Links (Blogger)

With this tweak you can change the word  Newer Post, Older Post, and Home links at the bottom of your post. You can either change the text of these or you can use a image in their place.

1. Go to Design-->Edit HTML--> Expand Widget Templates
2. Click Ctrl+F to open the browser Find bar
3. In the find bar enter Blog1

You should see something like this below.

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
<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>

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

  </div>
  <div class='clear'/>
</b:includable>

Replace the color with text or image you want to use.

Red is your Newer Post link
Orange is your Older Post link
Blue is your Home link

If you want to use a image in their place then you should upload 3 different images to a file share and place the image embedded code in the place of the colored text instead.

The correct image code should look something like this.

<img alt='message to display while loading' src='My Direct Image URL.jpg'/>

We could even take this to a farther level and have a different image to display when no more pages are left to go any farther. Basically meaning if I am on the Homepage then "My Newer Link Image When No Pages Can Be Turned" would display. Then it works the same for the last page but only with "My Older Link Image When No Pages Can Be Turned" would display instead.

This is what the code would look like.

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
<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'><img alt='Next' border='0' src='My  Newer Link Image' title='Next'/></a>
     </span>

<b:else/>
<span id='blog-pager-newer-link'>
     <img alt='no newer post' border='0' src='My Newer Link Image When No More Pages Can Be Turned'/>
     </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'><img alt='previous' border='0' src='My Older Link Image' title='previous'/></a>
     </span>
<b:else/>
<span id='blog-pager-older-link'>
   <img alt='no previous post' border='0' src='My Older Link Image To Display When No More Pages Can Be Turned' title='no previous post'/>
   </span>
   </b:if>

   <b:if cond='data:blog.homepageUrl != data:blog.url'>
     <a class='home-link' expr:href='data:blog.homepageUrl'><img alt='home' border='0' src='My Home Link Image' title='home'/></a>
     <b:else/>
     <b:if cond='data:newerPageUrl'>
       <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
     </b:if>
   </b:if>

Just Fill in the Red with what the text ask for.