5 Related Posts Techniques for Blogger Blogs

A relatively easy method of increasing page views on your blog is to add a list of related posts below each article. This offers readers a ready-made reading list of other articles on your blog, which are of a similar theme or subject matter.

For those using Blogger to publish their blogs, there are a few different methods available to display a list of related posts. These “related posts hacks” return a list of recent articles from the label(s) assigned to the particular article.

In this post, I’ll offer an overview of five different related posts hacks for Blogger blogs, which will offer your readers a taste of other related articles from your site.

Related Posts With No External JavaScript

After scrutinizing Purple Moggy’s method, I devised a technique to display the simplified list of related articles beneath the post without the need for external JavaScript files. This method enables you to display a simple list beneath each post (before the comments section) which should be styled in the same manner as other lists in your posts.

Here is how you can add this simple function to your Blogger template:

1. Go to Layout>Edit HTML in your Blogger dashboard, and check the “Expand widget templates” box.

2. Paste the following section of code just before the closing </head> tag:

<script type=”text/javascript”>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == ‘alternate’) {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write(’<ul>’);
while (i < relatedTitles.length && i < 20) {
document.write(’<li><a href=”‘ + relatedUrls[r] + ‘”>’ + relatedTitles[r] + ‘</a></li>’);
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write(’</ul>’);
}
//]]>
</script>

3. Next, find this section of code in your template:

<b:if cond=’data:post.labels’>
<data:postLabelsLabel/>
<b:loop values=’data:post.labels’ var=’label’>
<a expr:href=’data:label.url’ rel=’tag’><data:label.name/></a><b:if cond=’data:label.isLast != “true”‘>,</b:if>
</b:loop>
</b:if>

This is usually located in the “post-footer” section of your template (in the Blog1 widget), though if you have customized your template the location may be different.

Replace this entire section of code with the following instead:

<b:if cond=’data:post.labels’>
<data:postLabelsLabel/>
<b:loop values=’data:post.labels’ var=’label’>
<a expr:href=’data:label.url’ rel=’tag’><data:label.name/></a><b:if cond=’data:label.isLast != “true”‘>,</b:if>
<b:if cond=’data:blog.pageType == “item”‘>
<script expr:src=’”/feeds/posts/default/-/” + data:label.name + “?alt=json-in-script&callback=related_results_labels&max-results=10″‘ type=’text/javascript’/>
</b:if>
</b:loop>
</b:if>

This adds the JavaScript required to parse labels from your blog feed.

4. Finally, find this line in your template:

Immediately after this line, paste the following section of code:

<b:if cond=’data:blog.pageType == “item”‘>
<script type=”text/javascript”>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</b:if>

Then save your template.

Now when you view a post on it’s individual page, you will see a simple list of related posts appear just before the comments section. This list will be styled according to other list elements in your posts, and automatically adjusts to complement the style of your template.

I hope this post has offered some useful links and methods of displaying a list for further reading in your Blogger powered blog. If you know of any other methods, please let us know by leaving your comments below.