How to Create a Related Post Lists and Thumbnails Under Blog Articles

For every blog or site owner, of course, they want their blog to have complete navigation and good templates to make beta visitors read articles longer. One of the important components in the web is related post.

This related article is one component that is usually found in the middle or end of an article, which displays several articles related to the article being read.

In making related posts, it depends on the template used. There are templates that already provide this related article feature, and some don't. For templates that do not have this feature, you can create your own. So, how do you make a related post?

Here's how to make a related post that you can do yourself in your template.

How to Create Related Post List and Thumbnail Under Blog Article

Following are the steps:

• Login to your Blogger Dashboard
• Click the Template Menu then select Customize and Edit HTML.
• Look for the </head> code (to make it easier to find press CTRL + F in the HTML box)
• If you have found the code </head> then Copy and Paste the script code below just above the code. If you find some code </head>, you just select the first code.

<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, look for the code <data:post.body/> using the shortcut CTRL+F, and if you find it then copy and paste the code below right below the code <data:post.body/>. Usually there are 3 to 4 <data:post.body/> codes, you just choose the last <data:post.body/> code.

<b:if cond=’data:post.labels’>
<b:loop values=’data:post.labels’ var=’label’>
<b:if cond=’data:blog.pageType == “item”‘>
<script expr:src=’”/feeds/posts/default/-/” + data:label.name + “?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5″‘ type=’text/javascript’/>
</b:if>
</b:loop>
</b:if>
<b:if cond=’data:blog.pageType == “item”‘>
<h4>Artikel Terkait</h4>
<script type=”text/javascript”>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</b:if>

Save the Template and see the result. Reload one of your article pages, then the screenshot is as below:

So that's how to make related posts on blogspot easily and quickly. If the code above doesn't work, and you know it, you can write it in the comments column.

Note: In order to make a related post successful, you must be careful and follow the guide steps described. If you are not careful, it is possible that related article templates will not appear on your blog. We suggest you backup your template first.