How To Show Related Posts In Blogger Blogs

Do not make the mistake of not implementing this on your blogger blog. It’s one of the few things that will get your readers to stay for longer periods on your site.

Unlike wordpress where you can use plugins, you have to tweak your template’s html code to be able to show related posts.

Log into your dashboard >> Layout >> Edit HTML tab >> Backup your template first.

With that out of the way, click on expand widget templates and wait for the page to reload.

If you don’t get the above, check out this post: How To Edit HTML In Blogger.

Look for the tag, </head>, add the following code just immediately above it.

<style>

#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
color : #940f04;
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #054474;
font-size : 11px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url(http://i263.photobucket.com/albums/ii150/mohamedrias/newconcept_bullet.png) no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}

</style>

<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>

After that search for the following tag, <p><data:post.body/></p>, and right after it add this code

<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<div id=’related-posts’>
<h2>Other Recommended Posts <b:loop values=’data:post.labels’ var=’label’><b:if cond=’data:label.isLast != &quot;true&quot;’>,</b:if><b:if cond=’data:blog.pageType == &quot;item&quot;’>
<script expr:src=’&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;’ type=’text/javascript’/></b:if></b:loop> </h2>

<script type=’text/javascript’> removeRelatedDuplicates(); printRelatedLabels(); </script>

</div></b:if>

If you’d rather have more or less than 5 related posts showing after each posts, modify the blue part of the code above.

Save your template and you’re done.

From my experience what this code does is use labels to create related posts.

Let’s keep our fingers crossed and hope it works for you, just as well as it did for me.

1. Show Adsense To Search Engine Visitors With JavaScript
2. How To Evade Duplicate Content In Blogger Blogs
3. Search Results
4. How To Get Relevant Adsense Ads In Blogger Blogs
5. How To Make Blogger Blogs Load Faster