Easy Way To Add Related Posts Widget To Blogger

Today i will be tutoring you on how you can add related posts widget to your blog.
Some templates might have this widget but some don't have. If you are the type that yours don't have, do not panic cause you are in the right hand. All you need to do now is seat down and carefully read the procedures below.

==> Log in to your blogger dashboard
==> From there go to Layout > Edit HTML and tick the expand your widget templates box (option on the right). If you are using new Blogger dashboard, go to Template > Edit HTML
==> Click inside the HTML and use
CTRL+ F to find </head>
Right above </head> , paste the code below.

<!--Related Posts Scripts and Styles Start--><br /> <style> #related-posts { float : left; width : 250px; margin-top:15px; margin-left : 5px; margin-bottom:15px; 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/AVvXsEjquJ4lrbX22UBMNSSQf2CbhRiaazmMr1_SKKHE-0L3qY5uJ6-IrhH0E4wzsAKWkPNyMxKbWX3_D79tfDH5l57ortCAT2iaT9OqqVmHFQaycVeBfpuBSENpNongoj1YO3IU3PSs2rTjlKw/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><br /> <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.olexhome.com.ng/2017/07/easy-way-to-add-related-posts-widget-to.html" target="_blank" rel="nofollow"><font size="1" color="black">[Get Related Posts Widget for Your Blog]</font></a>'); } //]]> </script><br /> <!--Related Posts Scripts and Styles End--!>

Click on Save template to save.

2) Now use CTRL+F to find this line of code

<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 above (whichever you could find):
<!-- Related Posts with Thumbnails Code Start--><br /> <b:if cond='data:blog.pageType == "item"'><br /> <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 != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'><br /> <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> </font> <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script><br /> </div></b:if><br /> <!-- Related Posts with Thumbnails Code End-->

Click on Save Template.
Now you can now view your blog to see changes. Related posts widget will have been added to your blog.

Hope this is helpful? Kindly share this post on your social medias and don't forget to drop your comments if you have difficulties doing this.