Blogger - Showing related articles to your posts

Ok guys....first thing first..this widget is not created by me. It was originally created by Hoctro. Full credits and big thanks to him. This widget was became so important to me so far. If you click on one of my post, you'll see the related articles (on the same label) at the bottom of my post. You can see the original post here.

I think that I need to republish this article so that easy for me to make a reference in the future. I hope Hoctro don't mind. Hehe..

Before you done anything, make sure to save your template. Go to Template > Edit HTML and Download Full Template.

Ok, how do I do it?

Step 1

On your Blogger Dashboard, go to Settings > Site Feed. On Allow Blog Feed, select Full. Click Save Settings button at the bottom of the page.

Then, go to Settings > Archiving. On Enable Post Page?, select Yes. Click Save Settings button at the bottom of the page.


Step 2

Go to Template > Edit HTML. Click on Expand Widget Templates checkbox. Scroll down and find this code:-

<p><data:post.body/></p>


Step 3

Replace the code above with this one:-

<p><data:post.body/>

<b:if cond='data:blog.pageType == "item"'>
<div class='widget-content'>
<h3>Related Articles:-</h3>
<div id='data2007'/><br/><br/>
<div id='hoctro'>Widget by <u><a href='http://hoctro.blogspot.com'>Hoctro</a>

</u></div>
<script type='text/javascript'>

var homeUrl3 = "BLOGNAME.blogspot.com";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 1;

<b:if cond='data:blog.pageType == "item"'>
maxNumberOfPostsPerLabel = 4;
</b:if>
<b:if cond='data:blog.pageType == "item"'>
maxNumberOfLabels = 1;
</b:if>


function listEntries10(json) {
var ul = document.createElement('ul');
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
a.href = alturl;

var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}

for (var l = 0; l < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+21);
var k;
for (k=0; k&lt;20; k++)
label = label.replace("%20", " ");
var txt = document.createTextNode(label);
var h = document.createElement('h4');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('data2007').appendChild(div1);
}
}
}

function search10(query, label) {

var script = document.createElement('script');
script.setAttribute('src', 'http://' + query + '/feeds/posts/default/-/'
+ label +
'?alt=json-in-script&amp;callback=listEntries10');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}

var labelArray = new Array();
var numLabel = 0;

<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = "<data:label.name/>";

var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;

if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
</b:if>

</p>


Step 4

Change the BLOGNAME with your own blog name.

var homeUrl3 = "BLOGNAME.blogspot.com"; (e.g: dx-xel.blogspot.com)

Save your template and Done.


By now, if you click on one of your post, you will see the related articles at the bottom of your post.

You can change the value of this line:-

(The number of labels and posts that will displayed on your homepage). No need to modify this settings if you only want to show the related articles on your blog post.

var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 1;


(The number of labels and posts that will displayed on your post page)

<b:if cond='data:blog.pageType == "item"'>
maxNumberOfPostsPerLabel = 4;
</b:if>
<b:if cond='data:blog.pageType == "item"'>
maxNumberOfLabels = 1;
</b:if>

Yeahh...I think that's all. If you have found any problems, please contact me or drop a comments.

Note: This widget was modified by me according to my current settings.