This tutorial explains how to display post titles instead of next and previous link navigation below posts.
Replace Newer and older links with post titles on Blogger

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

Here is the tutorial from yet another Blogger tips blog. I thought of sharing this wonderful tutorial with my readers.

Please have a look at this snapshot on how it looks below the blog post:

Newer Older Post Links

Here is my part of the tutorial explanation.

Steps to display post titles instead of next and previous post links:

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>

Step 4. Adding CSS Code: 
Learn how to add CSS from here. Search(Ctrl+F) for:

]]></b:skin>

Paste the following 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;} 

Step 5Save the template. You are done!!

Hope you liked this tutorial. Thanks to MS-Potilas for showing this wonderful trick. Thanks for reading. Have a great time reading rest of my blog. Comments and sharing is always appreciated.

~iTechColumn

About The Author

Karan Vyas is the founder at itechcolumn.com, a 19 year old student pursuing his B.Tech in ECE.He is passionate blogger,Web Developer having vast knowledge on reverse engineering,hacking,software developement.Apart from this he is involved in witchcraft black magic and hypnotism.

Leave a Reply

Your email address will not be published.