How To Make Related Posts

People says sport is good for health, that why blog also must be health with blog-jogging as their sport :) On the way of blog-jogging i often visit a blog that i like with their posts, i take a rest while reading that post, maybe i am late to read that because that article is a continues one, i try to find the older related post but it has no tool too search and no list of related posts.

That gave an inspiration to make this post about how to make a related posts? What is related posts? Related posts is a list of older posts that have similar label, several blog only appearing some latest posts, sometimes it will be hard for visitors to find the older related posts, related posts will help visitors to find the older related posts with similar label, and of course if visitors likes to read your posts and easy to find older related posts, they must be come and come and come again, so its mean your blog/web traffic will be higher.

There's Many tricks to make a related posts, in this post i will tell you a trick and tutorial about how to make a related posts?

For blogger user, first you must LOGIN to your blogger account, in the blogger DASHBOARD page select LAYOUT, select EDIT-HTML sub-menu folder and check EXPAND WIDGET TEMPLATE.

Before you continue your steps applying this trick, better you make a backup from your current template, its more safe if there's something failure with your template.

Find ]]</b:skin> code and paste theses codes bellow right before ]]</b:skin> code.

.rbbox{
border: 1px solid rgb(192, 192, 192);
padding: 5px;
background-color: #f0f0f0;
-moz-border-radius:5px;
margin:5px;
}

.rbbox:hover{
background-color: rgb(255, 255, 255);
}

If you use template without Read More function, you just find this codes:

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

If you use template with Read More function, you find this codes :

<p><data:post.body/></p>
<b:if cond='data:blog.pageType == &quot;item&quot;'>

Copy and paste theses codes bellow after that codes above :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<H2>RELATED POSTS</H2>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 10;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement('ul');
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i < maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k < 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;
if(a.href!=location.href) {
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+13);
var k;
for (k=0; k<20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement('b');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('albri').appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement('script');
script.setAttribute('src', query + 'feeds/posts/default/-/'
+ label +
'?alt=json-in-script&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 = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel < maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
<script type='text/javascript'>RelPost();</script>
</div>
</b:if>

You can change blue typed "RELATED POSTS" words as you like, that is only a title.

Now it has finished, Save your template and view blog, check out how that copied codes working on your template, It must be appearing a list of related posts that has similar label right below your blog post.


Blog, Blogger, Google, Alexa, Bing, Yahoo, Search, SEO, PageRank, Traffic, Meta, Tag, Webmaster, Analyzer, Tutorial, Tips, Trick, Booster