Create Related Article Below The Blog Post (Blogspot)

| illustration |

Tuxnoob - For create related article there are many kinds, like related article with image, related article with text only, or both.

The display style very diverse, there style line to side, there style related article extends downward.

This tutorial will create with style extends downward, maximum related article show of 5 post.

For creating related article, you can follow this step by step :

• Surely, you must state of login in blogspot
• Select template, edit template
• After see template code, search with ctrl+f and find </head>
• And copy this script below the word </head>

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

• If done copied, find this code again <data:post.body/> then copy below this script to below of code. If you found two code <data:post.body/> put this script below first 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&callback=related_results_labels&max-results=5”’ type=’text/javascript’/>
</b:if>
</b:loop>
</b:if> 

<b:if cond=’data:blog.pageType == “item”‘>
<h4>Related Article</h4>
<script type=”text/javascript”>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</b:if> 

Especially for the red writing on the script can be changed as desired. After all, do not forget to keep it by pressing the Save Template button, then go back to your blog. Refresh your blog and now related post or related article will appear immediately.

Maybe that my explain for add Add Related Article on Blogspot. So if you want learning, please. Because learning not need younger, smart or experience and other the most important we still understand.

“There is a will there is a way”

Thanks, may be useful and good luck!!!