Thursday, December 24, 2015

ADDING POST TITLES TO YOUR POST NAVIGATION

If you are bored of your page navigation buttons only ever saying 'Next' and 'Previous', and would like them to give more information so that visitors will be enticed to read on, then this solution is for you.

Now, there are many alternative solutions out there that use jquery and javascript; but if your blogger site is running off Cloudflare's secure CDN, then this solution is probably the only one you can use, because it prevents you from having Mixed Content Errors. What it does is it extracts your post titles from your blog feed and displays them in your 'Next' and 'Previous' buttons. You can see what I mean by scrolling to the end of this post. This solution is used on this site.

So if you like this solution, then here's the script that you need to use. It comes courtesy of MS-potilas and it can be found at http://yabtb.blogspot.sg/2012/01/add-post-titles-to-older-and-newer-post.html.
<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/
//<![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="//'+window.location.hostname+'/feeds/posts/summary?redirect=false&max-results=500&alt=json-in-script&callback=getTitlesForNav"/>');
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) {
href = href.replace(/\http\:[^/]+\//, "https");
var title=urlToNavTitle[href];
if(!title) title=urlToPseudoTitle(href);
if(title) $("a.blog-pager-newer-link").html("&lt;&lt; Newer<br />" + title);
}
href = $("a.blog-pager-older-link").attr("href");
if(href) {
href = href.replace(/\http\:[^/]+\//, "https");
var title=urlToNavTitle[href];
if(!title) title=urlToPseudoTitle(href);
if(title) $("a.blog-pager-older-link").html("Older &gt;&gt;<br />" + title);
}
}, 500);
});
//]]>
</script>
To use this script, you will want to look for </body> and insert this just above it. This will ensure that you don't encounter 'blocking script' issues in Google Page Speed diagnosis. And once you have done that, you are done.

Well, not quite.

You will still need you style your CSS to your own liking and according to your site template's specifications. If you need a guide, this is what I am using.
.item #blog-pager span {
background: none;
width: 40%;
font-size: 18px;
}
.item #blog-pager a {
color: #ff9b00;
font-size: 16px;
}
.item #blog-pager a:hover {
color: #bbb;
}
.item #blog-pager-newer-link {
float: left;
text-align: left;
}
.item #blog-pager-older-link {
float: right;
text-align: right;
}
But this is not the most important thing you need to look out for. The most important bit comes from this segment of script.
document.write('<script type="text/javascript" src="//'+window.location.hostname+'/feeds/posts/summary?redirect=false&max-results=500&alt=json-in-script&callback=getTitlesForNav"/>');
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;
}
Firstly, you will notice that there is no protocol used after 'src="'. And this is because stating the protocol will give you Mixed Content Errors and the code will not work properly.

Secondly, even though the script says max-results=500, the script may not pull 500 results for your site. It pulled only 150 for mine. So you will have to test the script by pasting
//'+window.location.hostname+'/feeds/posts/summary?redirect=false&max-results=500&alt=json-in-script&callback=getTitlesForNav
in your browser and checking to see just how many posts it pulls. Of course, you will need to replace '+window.location.hostname+' with your domain name.

Now, this is important, because if the script does not capture all your posts, for the ones that are not caught, the script will revert to PseudoTitle mode, which means, it will create the title off your URL instead. You will know that it is doing this if you see your title come out truncated and in sentence font, not full caps. Clever little script, isn't it? Even has a built in fail-safe.

But you don't want the fail-safe, do you? You want it working perfectly. You want your post title displayed in full and not truncated. So if the script is not retrieving all the posts for you, then you will need to use the feed that is direct from blogger instead. In this case, replace
//'+window.location.hostname+'/feeds/posts/summary?redirect=false&max-results=500&alt=json-in-script&callback=getTitlesForNav
with
https://www.blogger.com/feeds/[the series of numbers that represent your blog id]/posts/summary?redirect=false&max-results=500&alt=json-in-script&callback=getTitlesForNav
You can get the code by doing a CTRL U and looking for the following code.
<link href='https://www.blogger.com/feeds/[the series of numbers that represent your blog id]/posts/default' rel='service.post' title='Your blog name - Atom' type='application/atom+xml'/>
From my experience, using the code direct from blogger is the most foolproof solution when it comes to retrieving feed information, and you should have no problems getting the script to retrieve the full 500 posts that is allowed by Blogger.

Now, if you have more than 500 posts, then what you need to do is to add the following script directly under the first.
document.write('<script type="text/javascript" src="https://www.blogger.com/feeds/[the series of numbers that represent your blog id]/posts//summary?redirect=false&max-results=500&start-index=501&alt=json-in-script&callback=getTitlesForNav"/>');
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;
}
You will undoubtedly realize that this is almost identical to the one above, except for this little bit.
max-results=500&start-index=501
A big thanks goes out to Adam over at http://too-clever-by-half.blogspot.sg/2011/12/blog-feed-500-post-limit-for-more-than.html for this code.

Now, that second bit is to extract the next series of 500 posts, after the code has extracted the first.

And once you have done that, you can enjoy the fruits of having more informative links.

Like our messages?

Sign up to get our messages delivered daily.

Social Media Policy Privacy Policy Disclaimer Terms of Use