How To Add Related Post With Thumbnails below Blogger Post?

In this post I will explain how to add the "Related Post" widget to blogger by hosting java script in blogger.

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see </head> tag.

4.Copy below code and paste it just before </head> tag.

<!--Related Posts with thumbnails Scripts and Styles Start--><br /><b:if cond='data:blog.pageType == &quot;item&quot;'><br /><style type='text/css'><br />#related-posts {<br />float:center;<br />text-transform:none;<br />height:100%;<br />min-height:100%;<br />padding-top:5px;<br />padding-left:5px;<br />}<br /><br />#related-posts h2{<br />font-size: 1.6em;<br />font-weight: bold;<br />color: black;<br />font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;<br />margin-bottom: 0.75em;<br />margin-top: 0em;<br />padding-top: 0em;<br />}<br />#related-posts a{<br />color:black;<br />}<br />#related-posts a:hover{<br />color:black;<br />}<br /><br />#related-posts a:hover {<br />background-color:#d4eaf2;<br />}<br /></style><br /><script type='text/javascript'><br />//<![CDATA[<br /><br />//Script by Aneesh of www.bloggerplugins.org<br />//Released on August 19th August 2009<br />var relatedTitles = new Array();<br />var relatedTitlesNum = 0;<br />var relatedUrls = new Array();<br />var thumburl = new Array();<br />function related_results_labels_thumbs(json) {<br />for (var i = 0; i < json.feed.entry.length; i ) {<br />var entry = json.feed.entry[i];<br />relatedTitles[relatedTitlesNum] = entry.title.$t;<br />try<br />{thumburl[relatedTitlesNum]=entry.media$thumbnail.url;}<br /><br /><br />catch (error){<br />s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b 5);d=s.substr(b 5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){<br />thumburl[relatedTitlesNum]=d;} else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYVHQLlM16BguWUk1MZJoAVM9GdFZYMdG98MI6Py0D4P0wXTAcxBWh_AjwLKP8c2DXeWpSjD4xGgqHBs5ngNIdLQF4qMIYRhEjv0x1qZrSThXms26r12pJh-FubIIAffE8q4lYYF4W8B4/s400/noimage.png';<br /><br /><br /><br /><br />}<br /><br />if(relatedTitles[relatedTitlesNum].length>35) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 35) "...";<br />for (var k = 0; k < entry.link.length; k ) {<br />if (entry.link[k].rel == 'alternate') {<br />relatedUrls[relatedTitlesNum] = entry.link[k].href;<br />relatedTitlesNum ;<br /><br /><br />}<br />}<br />}<br />}<br />function removeRelatedDuplicates_thumbs() {<br />var tmp = new Array(0);<br />var tmp2 = new Array(0);<br />var tmp3 = new Array(0);<br />for(var i = 0; i < relatedUrls.length; i ) {<br />if(!contains_thumbs(tmp, relatedUrls[i]))<br />{<br />tmp.length = 1;<br />tmp[tmp.length - 1] = relatedUrls[i];<br />tmp2.length = 1;<br />tmp3.length = 1;<br />tmp2[tmp2.length - 1] = relatedTitles[i];<br />tmp3[tmp3.length - 1] = thumburl[i];<br />}<br />}<br />relatedTitles = tmp2;<br />relatedUrls = tmp;<br />thumburl=tmp3;<br /><br /><br />}<br /><br />function contains_thumbs(a, e) {<br />for(var j = 0; j < a.length; j ) if (a[j]==e) return true;<br />return false;<br />}<br />function printRelatedLabels_thumbs() {<br />for(var i = 0; i < relatedUrls.length; i )<br />{<br />if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i])))<br />{<br />relatedUrls.splice(i,1);<br />relatedTitles.splice(i,1);<br />thumburl.splice(i,1);<br /><br />}<br />}<br /><br /><br />var r = Math.floor((relatedTitles.length - 1) * Math.random());<br />var i = 0;<br /><br />if(relatedTitles.length>0) document.write('<h2>' relatedpoststitle '</h2>');<br />document.write('<div style="clear: both;"/>');<br />while (i < relatedTitles.length && i < 20 && i<maxresults) {<br /><br /><br />document.write('<a style="text-decoration:none;padding:5px;float:left;');<br />if(i!=0) document.write('border-left:solid 0.5px #d4eaf2;"');<br />else document.write('"');<br />document.write(' href="' relatedUrls[r] '"><img style="width:72px;height:72px;border:0px;" src="' thumburl[r] '"/><br/><div style="width:72px;padding-left:3px;height:65px;border: 0pt none ; margin: 3px 0pt 0pt; padding: 0pt; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; line-height: normal; font-size-adjust: none; font-stretch: normal;">' relatedTitles[r] '</div></a>');<br /><br /><br />if (r < relatedTitles.length - 1) {<br />r ;<br />} else {<br />r = 0;<br />}<br />i ;<br />}<br />document.write('</div>');<br /><br />}<br /><br />//]]><br /></script><br /></b:if><br /><!--Related Posts with thumbnails Scripts and Styles End-->

5.Now scroll down to where you see below code:

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

NOTE: If you can't find <div class='post-footer-line post-footer-line-1'> in your template,find <data:post.body> instead of it.

6.Copy below code and paste it just after above code.

<!-- Related Posts with Thumbnails Code Start--><br /><b:if cond='data:blog.pageType == &quot;item&quot;'><br /><div id='related-posts'><br /><b:loop values='data:post.labels' var='label'><br /><b:if cond='data:label.isLast != &quot;true&quot;'><br /></b:if><br /><b:if cond='data:blog.pageType == &quot;item&quot;'><br /><script expr:src='&quot;/feeds/posts/default/-/&quot; data:label.name &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a><br /><script type='text/javascript'><br />var currentposturl=&quot;<data:post.url/>&quot;;<br />var maxresults=5;<br />var relatedpoststitle="Related Posts";<br />removeRelatedDuplicates_thumbs();<br />printRelatedLabels_thumbs();<br /></script><br /></div><div style='clear:both'/><br /></b:if><br /><!-- Related Posts with Thumbnails Code End-->

Note: You can change 5 and, Related Posts in above code as your choice.

7.Now save your template and you are done.