How to Add Related Posts Widget On your Blogger Blog

The related post widget is a very essential tool for any blogger as it makes visitors to spend more time on your blog by displaying a link of posts related to the one the reader is currently reading and thereby increasing your page views.

However you should note that the related post widget works with the labels you give to your posts, therefore it won’t work on your blog if you don’t  give labels to your posts.;

Below is how you can add related post widget to your blog like the one you can see here on brownteks.com.

The related post widget shows the posts with the same label with the current posts and it is located below post section.

How to add related posts to your blog:

• Go to your blogger dashboard
• Tap on Template>> and click on Edit HTML
• Find the following code on your html using CTRL F

</Head>

Now paste the following code above </head>

<!--Related Posts Scripts and Styles Start--><style>#related-posts {float : left;width : 350px;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 {font-size : 20px;font-weight : normal;margin : 5px 7px 0;padding : 0 0 5px;}#related-posts a {text-decoration : none;}#related-posts a:hover {text-decoration : none;}#related-posts ul {border : medium none;margin : 10px;padding : 0;}#related-posts ul li {display : block;background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCrbMihsuw4VPEqy7YQppaO9cHDcsONocJ5Y7jeAaSR8JAtDGFq-fWRorNVI1Wn_NwpOohC75K6bBibrbrqoHj4g4TIUqe7GHz65H2LiHsNapoUHh-n18RRdRJyWylAYX7NbfYLVexWJE/s200/greentickbullet.png) no-repeat 0 0;margin : 0;padding-top : 0;padding-right : 0;padding-bottom : 1px;padding-left : 21px;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>'); document.write('<a href="http://www.brownteks.com/2016/10/how-to-add-related-posts-widget.html" target="_blank" rel="nofollow"><font size="1" color="black">[Get Related Posts Widget for Your Blog]</font></a>'); } //]]>
</script> 
<!--Related Posts Scripts and Styles End-->

then Click Save template

Now use CTRL+F to find the following line of code(depending on your template)

<div class='post-footer-line post-footer-line-1'> 

OR 

<p class='post-footer-line post-footer-line-1'>

Now paste the code below immediately after any of these lines (whichever you could find):

<!-- Related Posts with Thumbnails Code Start--><b:if cond='data:blog.pageType == &quot;item&quot;'><div id='related-posts'><font 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><!-- Related Posts with Thumbnails Code End-->

Click on Save Template.

Now, go ahead to view one of your blog posts. You should see the Related posts below it.

DON'T FORGET TO LEAVE YOUR COMMENTS AND ALSO SHARE THIS POST