Change Older & Newer Post Links With Post Titles

After long time i decide to create a blog post and hope that it will be able to continue. In this tutorial we will learn how to change older newer post link with post title. The newer post, older post link available on the bottom of every blog. Already WordPress blog show the same thing but blogger not able to display this. So we added into blogger manually. Now we just follow few steps for added your older and newer posts links with post titles.

How to replace older and newer posts links?

1. Adding jQuery.

First we will use jQuery. For jQuery codes to work, first you have to load jQuery JavaScript library.

(Note - Skip this step if you have already added jQuery to your blog)

Go to Design > Edit HTML and paste this  code before </head> line in your template:

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

2. Adding the blog pager code

Go to Design > Page Elements > Add A Gadget and paste this code into a HTML/Javascript gadget.

<!-- Post title blog pager by bloggerknown.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 bloggerknown.com END -->

Now on post pages it will show the post titles of the next and previous posts. Enjoy!