How to add related posts widget in blogspot blogger templates

To add a related posts widget with thumbnail in your blogger template you can use this handy post . Read the full post and follow the steps.

Step 1: Go to Blogger Dashboard → Theme → Edit HTML

Step 2: Click anywhere inside Template code area and Press CTRL+F

Step 3: A search box will appear, find

Step 4: Paste below code Just above tag

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

&lt;!-- related post widget by alychidesigns.com start --&gt; &lt;b:if cond='data:blog.pageType == &quot;item&quot;'&gt; &lt;style type='text/css'&gt; #related-post-title{color: #000000;margin-bottom: 0.75em;padding: 0 10px 0 0;text-align: left;font-size:20px;font-weight:bold;} #related-posts a {color: #000000;}  #related-posts ul { list-style-type: none; color: #000000; } #related-posts li { padding: 8px 2px; clear: both; overflow: auto; border: 0px solid #CCC; margin: 5px 5px 8px 5px;} .image_left{ float: left; margin: 0px 10px 10px 2px; padding: 0px; width: 80px; height: 56px;} #related_here{ float:left; width: 49%; padding: 0px; margin:0px; } #related_here2{ float:right; width: 49%; padding: 0px; margin:0px; } .related_all_ul{overflow: auto;} &lt;/style&gt; &lt;script type='text/javascript'&gt; //<![CDATA[ function related_results_labels(e){for(var l=;l&lt;e.feed.entry.length;l++){var t=e.feed.entry[l];relatedTitles[relatedTitlesNum]=t.title.$t;var r=e.feed.entry[l].media$thumbnail.url,a=r.replace("/s72-c/","/s100/");if(e.feed.entry[l].media$thumbnail)var r=e.feed.entry[l].media$thumbnail.url,a=r.replace("/s72-c/","/s100/");else if(null!=e.feed.entry[l].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/))var a=e.feed.entry[l].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/)[1];else var a="http://1.bp.blogspot.com/-a-3WZRtj7pw/VoxaVk-cPMI/AAAAAAAABMo/ivQ1HVw0ZME/s250-Ic42/no-thumbnail.png";relatedImage[relatedTitlesNum]=a;for(var n=;n&lt;t.link.length;n++)if("alternate"==t.link[n].rel){relatedUrls[relatedTitlesNum]=t.link[n].href,relatedTitlesNum++;break}}}function removeRelatedDuplicates(){for(var e=new Array(),l=new Array(),t=new Array(),r=;r&lt;relatedUrls.length;r++)contains(e,relatedUrls[r])||(e.length+=1,e[e.length-1]=relatedUrls[r],l.length+=1,l[l.length-1]=relatedTitles[r],t.length+=1,t[t.length-1]=relatedImage[r]);relatedTitles=l,relatedUrls=e,relatedImage=t}function contains(e,l){for(var t=;t&lt;e.length;t++)if(e[t]==l)return!;return!1}function printRelatedLabels(e){for(var l=;l&lt;relatedUrls.length;l++)relatedUrls[l]==e&amp;&amp;(relatedUrls.splice(l,1),relatedTitles.splice(l,1),relatedImage.splice(l,1));var t=Math.floor((relatedTitles.length-1)*Math.random()),l=;for(relatedTitles.length&gt;1;l&lt;relatedTitles.length&amp;&amp;20&gt;l&amp;&amp;l&lt;maxposts;)l%2==1?document.getElementById("related_here2").innerHTML+="<li><img class='image_left' src=\""+relatedImage[t]+'"><a href="'+relatedUrls[t]+'">'+relatedTitles[t]+"</a></li>":document.getElementById("related_here").innerHTML+="<li><img class='image_left' src=\""+relatedImage[t]+'"><a href="'+relatedUrls[t]+'">'+relatedTitles[t]+"</a></li>",t&lt;relatedTitles.length-1?t++:t=,l++;relatedUrls.splice(,relatedUrls.length),relatedTitles.splice(,relatedTitles.length),relatedImage.splice(,relatedImage.length)}var relatedTitles=new Array,relatedImage=new Array,relatedTitlesNum=,relatedUrls=new Array; //]]> &lt;/script&gt; &lt;/b:if&gt; &lt;!-- related post widget by alychidesigns.com end --&gt;

Step 5: Now open the search box again and search

Step 6: Just above

Paste the following code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<!-- related post widget by alychidesigns.com start --> <b:if cond='data:blog.pageType == "item"'> <div id='related-posts'> <p id='related-post-title'>Recommended Posts For You</p> <div class='related_all_ul'> <ul id='related_here'/> <ul id='related_here2'/> </div> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=7"' type='text/javascript'/> </b:loop> <script type='text/javascript'> var maxposts=4; removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>"); </script> </div> <div style='clear: both;'/> </b:if> <!-- related post widget by alychidesigns.com end -->

Step 7: Save your Template.

Note:

1. If you want to change CSS style according to your template design you can change it in related posts CSS code.

2. You can change no. of posts to appear in related posts. Just change number in maxposts=4; in red color

I hope you find this article is very helpful to you so don’t forget to share this post in your network.