To replace Newer Post & Older Post with Post titles

When you open one of the posts of a blog, you must have observed that 'Newer Post', 'Home' and 'Older Post' links appear at the bottom of post body. It's as shown below:

But we have learned in my earlier post on how to remove this middle 'Home' link. Now we have to bother about other two links: Newer Post & Older Post. In some templates, these links will Previous Post and Next Post. But it's same.

Whether your template shows in either way, the main purposes of these links will remain same: To navigate readers from one page to another. Whatsoever, let us learn to replace those two links with the post title links. Follow the given steps:

Login to your blog>Click on Layout>Click on Add a Gadget>Choose HTML/JavaScript>Keep the Title area blank and in Content Area, paste the given HTML code:

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

If you don't have any JQuery (like sliding popular post, content slider, sliding banner etc), you have to add given HTML code at the top of above code. Otherwise you can just ignore adding this in your HTML Gadget.

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

Once you have incorporated above steps, HTML/JavaScript Gadget will appear in layout portion of your blog. It should be placed below Blog Posts box. If it's in sidebar, do drag-and-drop and bring it below Blog Posts Box. You can click on Save Arrangement and you're done. Cheers!