2 ways to rename "older" and "newer posts" to post titles

View demo.

"OLDER" and "NEWER" posts.

a.k.a. blog-pager or default blogger page navigation
usually located at the bottom of the blog post

Why rename?

It's more user-friendly. Readers will see right away what the older and newer topics were while scanning through the currently being-read post.
It's more search-engine friendly. The more internal links with appropriate anchor texts your blog has, the better.

How to rename "OLDER and NEWER posts" to blog post titles.
There are two ways to go about this. Both will require to place a code on the template.

Before we proceed,
1. Backup your template!
2. Go to EDIT HTML page.
3. Press CTRL + F, type in </head> on the search bar.
4. Above it, add this script.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

NOTE: This script calls for jQuery, a new kind of javascript library. If you already have lightbox on blogger, stylish AJAX contact form, interactive navigation menu or any component that uses jQuery anywhere on your blog, no need to do this step anymore.

5. SAVE TEMPLATE.

On to the techniques.

Technique #1. Using HTML/JAVASCRIPT gadget.

The code originally came from ETBlue and was tweaked by Greenlava of Blogger Sentral.

1. Go to DESIGN tab. Choose PAGE ELEMENTS.
2. ADD A GADGET. Select HTML/JAVASCRIPT.
3. On the CONFIGURE HTML/JAVASCRIPT window, add this code from Blogger Sentral

<!-- Post title blog pager by BloggerSentral.com START -->
<style type="text/css"> 
#blog-pager-newer-link {font-size:85%;width:200px;text-align:left;} 
#blog-pager-older-link {font-size:85%;width:200px;text-align:right;} 
</style> 
<script type="text/javascript">
$(document).ready(function(){ 
var newerLink = $("a.blog-pager-newer-link").attr("href"); 
$("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() { 
var newerLinkTitle = $("a.blog-pager-newer-link").text(); 
$("a.blog-pager-newer-link").text("<< " + newerLinkTitle); 
}); 
var olderLink = $("a.blog-pager-older-link").attr("href"); 
$("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() { 
var olderLinkTitle = $("a.blog-pager-older-link").text(); 
$("a.blog-pager-older-link").text(olderLinkTitle + " >>");//rgt 
}); 
}); 
</script>
<!-- Post title blog pager by BloggerSentral.com END -->

4. SAVE.
5. Click SAVE from the PAGE ELEMENTS page as well.

Technique #2. Through EXPAND WIDGET TEMPLATES mode.

Use this if you're more comfortable with CSS, coding and editing the template.

1. Go to EDIT HTML Page.
2. Tick EXPAND WIDGET TEMPLATES.
3. Press CTRL + F, search for #blog-pager.
4. You'll see something like this.

#blog-pager {
   font-size: 140%
}

5. Right after the code, add this:

#blog-pager-newer-link {
font-size:85%;
width:200px;
text-align:left;
} 
#blog-pager-older-link {
font-size:85%;
width:200px;
text-align:right;
} 

You may change width and font-size according to your preference.

Press CTRL + F and search for <b:includable id='nextprev'>

6. You'll see something similar to 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 + &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>

what each section means.
<b:if cond='data:newerPageUrl'>code for NEWER post link
<b:if cond='data:olderPageUrl'>code for OLDER post
<a class='home-link' expr:href='data:blog.homepageUrl'> code for HOME

7. Below the chunk of lines, add the code

<script type='text/javascript'>
var olderLink = $(&quot;a.blog-pager-older-link&quot;).attr(&quot;href&quot;);
$(&quot;a.blog-pager-older-link&quot;).load(olderLink+&quot; h3&quot;, function() {
var olderLinkTitle = $(&quot;a.blog-pager-older-link:first&quot;).text();
$(&quot;a.blog-pager-older-link&quot;).text(&quot;&lt;&lt; &quot; + olderLinkTitle);
});

var newerLink = $(&quot;a.blog-pager-newer-link&quot;).attr(&quot;href&quot;);
$(&quot;a.blog-pager-newer-link&quot;).load(newerLink+&quot; h3&quot;, function() {
var newerLinkTitle = $(&quot;a.blog-pager-newer-link:first&quot;).text();
$(&quot;a.blog-pager-newer-link&quot;).text(newerLinkTitle + &quot; &gt;&gt;&quot;);
});
</script>

8. SAVE TEMPLATE.

Result.

Next tutorial: Move OLDER and NEWER posts on Blogger

Other "Older Posts" and "Newer Posts" Tweaks.

4 ways to hide older posts and newer posts on blogger
5 places to move older and newer posts on blogger

Related Blog and Discussion.

How do I add post title to older and newer post link?
Replace Older & Newer post links with post titles