How To Add Related Post on Blogger

Related Posts Widget would display links to other posts of the same category/label. It also increases SEO and Page views of your blog. This post will show you how to add related posts widget to your blogger blog.

Here is simple Some step to add Related post below your all blog post

1. Go to yout Blogger Dashboard > Template > Edit HTML
2. Backup your template Before installing
3. check Expand Template
4. Search for  </head> (using ctrl+f)
5. Add the following code just before it:

<!--Related Posts Start--> 

<style> 

#related-posts { 

float : left; 

width:550px; 

margin-top:0px; 

margin-left : 5px; 

font : 11px Verdana; 

padding:5px; 

} 

#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 : 12px; 

text-decoration : none; 

} 

#related-posts a:hover { 

color : #0080ff; 

text-decoration : none; 

} 

#related-posts ul { 

list-style:none; padding:0px !important; 

} 

#related-posts ul li { background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO3Gpk5X_tLAp90BP_iiR79lVibiPL4qKTubfHs0yHP7cq7lY4Zg3KXFGXZNjZMPJ5qDucnRDr-g-XeWlYuKZefWJ8q6H7zRC3lP1RXVjwwkCbfkGe1NWgCI6_CUorR2RicUmZF46Pwd4/s400/255.gif) no-repeat scroll 0px 6px; margin: 0.3em 0 !important; padding: 0 0 0.8em 20px; line-height : 2em; border-bottom:1px dotted #cccccc; 

} 

#related-posts ul li:hover{     

background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoNJcMdudxOd-C8FB706FwXPebwvB0TBr6RHEml7pD_9wb4oCr9prqBXBJ58eQYOe1NBI4aLHT_cj5cmlnNKOlLYjv9DJvbpM2EpPiBgedrbZkXyDU7ECKgV1AbI-vg6n6ABXNOoKnquw/s400/251.gif) no-repeat scroll 0px 6px !important; 

} 

  

</style> 

<script language='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 < 6) { 

document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>'); 

if (r < relatedTitles.length - 1) { 

r++; 

} else { 

r = 0; 

} 

i++; 

} 

document.write('</ul>'); 

document.write('<a rel="dofollow" href="http://makeurbloguniq.blogspot.com/2012/12/add-related-post.html" style="float:right;font-size:10px;">Get This Widgets</a></font>'); 

} 

//]]> 

</script> 

<!--Related Posts Stop-->

6.Now search for <data:post.body/>

7. Paste the following code just before it.

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<div id='related-posts'> 
<font color='#289728' face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><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> </font> 
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); 
</script> 
</div></b:if>

8. Save your Template you are done

Customize your Widget

• To display any other text in place of "Related Posts" then simply replace it with any text you want
• To change the color of the related post title change this code #289728 to the one you want