Blogging Tips

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 by Categories – List in Sidebar

Hoctro was among the first Blogger hackers to devise a method of displaying related posts.

In this tutorial, you can learn how to add a related posts widget to your sidebar which offers relevant further reading for each individual post in your blog.

Related Posts by Categories – List Beneath Post

Jackbook’s Blogger hack is similar in structure to Hoctro’s tutorial as it lists related posts according to their relevant category. However, this version will display links beneath each post rather than in the sidebar.

This seems to be the most popular related posts hack for Blogger, and is relatively easy to add to your Blogger template in just a few steps.

Related Posts Widget – Beneath Posts

Purple Moggy developed a related posts hack which displays links in one longer list, rather than being segregated into different categories.

This widget will display beneath the main Blog Posts widget (beneath your comments) and is configured to display only on item pages.

Related Posts Plugin for Blogger – Beneath Article

RealTrix has developed a “plugin” style hack for Blogger which displays related articles in a stylized list.

This hack can be added to your Blogger template in only two steps, and references an externally hosted JavaScript to parse and display labels from your blog feeds.

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.