How to Replace or Change Newer Post and Older Post Links With Post Title in Blogger (Blogspot)

How to Replace or Change Newer Post and Older Post Links With Post Title in Blogger (Blogspot)? The Newer Post, Home and Older Post are makes visitors and readers to easily navigate between pages and posts within your blog. But now you can show these links as your blog Post Titles which makes visitors more easily understand the next and previous articles. This tutorial will guide you on "How to Add Newer, Older and Home Links With Post Titles" on your Blog with help of jQuery Library.

 

Step: 1 
Go to your Blogger Dashboard click on ---> Design tab ---> Edit HTML tab. 
Make sure to take backup of your Template before making any changes to your HTML. 
Now click on Expand Template Widgets checkbox. 
Search for </head> in your Template and replace with below code.

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

Note: If you are running any Slider or you already have jquery inplace then dont need to add this above code, because its usually runs on jQuery.
Step: 2
Go to your Blogger Dashboard click on ---> Design tab ---> Page Elements tab.
Click on Add a Gadget then select HTML/JavaScript Widget and past below code inside it.

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

Save Widget and view your blog you will notice actual posts titles of the next and previous posts. When you hover the post titles a tooltip appear with "Newer post" or "Older post"