Adding Post Titles To Older Post Newer Post Links On Blogger

原文地址：

http://www.itechcolumn.com/2012/04/replace-newer-and-older-links-with-post.html

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



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. Seehttp://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 5. Save the template. You are done!!