Blogger Newer Post and Oldest Post with Post titles

This tutorial explains how to display post titles instead of next and previous link navigation below posts.

Wordpress has the cool feature of showing up next and previous post titles at the bottom of the blog, but this feature was void for Blogger. Many webmaster have tried to bring up various tricks and hacks to try this feature for Blogger. But, many have failed to display it without any error. Today, I found an interesting tutorial on the blogosphere which works like a charm without any glitch. This hack is going to increase your readers to stay more on your blog.

see Demo here

Here is the tutorial from yabtb.blogspot.in. I thought of sharing this wonderful tutorial with my readers.

Before you do this just backup your blog template.

Step 1. Go to Blogger Dashboard > Select blog > Template > Edit HTML.

Step 2. Adding jQuery to Blogger HTML template
Important: Skip this procedure, if you have already implemented jQuery script to your Blogger HTML template.
Search(Ctrl+F) for:</head>

Just before or above </head> copy paste the following code:
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>

Step 3. Adding the code which does the trick:
Search(Ctrl+F) </body>

and paste the following code just before/above </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
// Post titles to Older Post and Newer Post links (without stats skew)
// by MS-potilas 2012. See http://yabtb.blogspot.com/2012/01/add-post-titles-to-older-and-newer-post.html
//<![CDATA[
var urlToNavTitle = {};
function getTitlesForNav(json) {
for(var i=0 ; i < json.feed.entry.length ; i++) {
var entry = json.feed.entry[i];
var href = "";
for (var k=0; k<entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
href = entry.link[k].href;
break;
}
}
if(href!="") urlToNavTitle[href]=entry.title.$t;
}
}
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/posts/summary?redirect=false&max-results=500&alt=json-in-script&callback=getTitlesForNav"></'+'script>');
function urlToPseudoTitle(href) {
var title=href.match(/\/([^\/_]+)(_.*)?\.html/);
if(title) {
title=title[1].replace(/-/g," ");
title=title[0].toUpperCase() + title.slice(1);
if(title.length > 28) title=title.replace(/ [^ ]+$/, "...")
}
return title;
}
$(window).load(function() {
window.setTimeout(function() {
var href = $("a.blog-pager-newer-link").attr("href");
if(href) {
var title=urlToNavTitle[href];
if(!title) title=urlToPseudoTitle(href);
if(title) $("a.blog-pager-newer-link").html("&lt;&lt; Newer Post<br />" + title);
}
href = $("a.blog-pager-older-link").attr("href");
if(href) {
var title=urlToNavTitle[href];
if(!title) title=urlToPseudoTitle(href);
if(title) $("a.blog-pager-older-link").html("Older Post &gt;&gt;<br />" + title);
}
}, 500);
});
//]]>
</script>
</b:if>

This is the Last step Adding CSS Code:
Learn how to add CSS from here. Search(Ctrl+F) for: ]]></b:skin>

Place the code just before or above ]]></b:skin>

.blog-pager-newer-link {background-color:transparent !important;padding: 0 !important;}
.blog-pager-older-link {background-color:transparent !important;padding: 0 !important;}
#blog-pager-newer-link {padding:5px;font-size:90%;width:200px;text-align:left;}
#blog-pager-older-link {padding:5px;font-size:90%;width:200px;text-align:right;}