How to add related post widget in blogger

Related post widget is a very helpful widget to engage a visitor for more time on your blog and it also help a visitor to get to know about more links of same category in the same blog.
So in this blogger tutorial I will tell you how to add this widget in your blog. It is a very easy procedure and will take only 5 minute of you.

How to add Related Posts Widget

1. Go to Blogger Dashboard > Template > Edit HTML > Expand widget template

2. Backup your template Before installing


3. Search for  </head>

4. 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/AVvXsEgenfdF66UxZZtkxYXQYM8VvgG7GOm72VKdApvZQhNAe6zlURw5DtrSbOnVjKNT3Py7Djl7tKfrLzbhPCE6-iqKMGKSTBDJSsxO87DLc1xUsZT8p0-qM7h6elF2FMbBWwFwxTBChQEhMFyX/s1600/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/AVvXsEgIl1b9Er4wkImP4uZIuAK92LLIZ0NYVN6aDuIoPh5ystw5b6N8SC8GPN7EuAxaTgTerHvuibdjfHewI_q4wXJIQwpqhoCM1B8p4jC0PWCPUy-9KBvzO0utt17XKTcfog3TIPwMLf5gLDVX/s1600/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://ollengg.blogspot.com/2012/07/how-to-add-related-post-widget-in.html" style="float:right;font-size:10px;">Get This</a></font>'); 

} 

//]]> 

</script> 

<!--Related Posts Stop-->

----------------------------------------------------------------------------------------

 5. Next step is to search for <data:post.body/>
Paste the following code just before this
----------------------------------------------------------------------------------------

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

---------------------------------------------------------------------------------------

Thats it. Now you will start seeing related post at the end of every single post !