How to Add Related Post widget on Blogger (with thumbnail)

Hello Bloggers, as you all are aware that after reading the desired article or post every visitor on blog / website always give attention on related post articles. Related article or recommended post widget is a most on any blog. This related post widget is SEO optimized and fast in load. Titles are appearing in an elegant style which will surely attract your visitor. We've set 6 number of posts by default. You can increase or decrease the num from 6 to 3 or 9.
Related post thumbnails for blogger

Adding Related Post widget on Blogger blogs

Search for paste below css code above it.
Css
/* Related Posts CSS */ .pre-head{font-size:20px; margin:25px 6px 10px; font-weight:500;} .related-pre{margin:0 0 25px; overflow:hidden;} .related-pre a{ margin:6px 6px; float:left; width:31.32%; height:150px; position:relative;} .related-pre img{ height: 100%; width: 100%;} .pre-title{ background: rgba(0, 0, 0, 0.5); color: #fff; font-size:13px;line-height:21px; overflow:hidden; height: 25px; bottom:0; padding: 9px 14px 20px; text-align: left; width: 80%; position:absolute;} Copy below code before
JavaScript
<b:if cond='data:blog.pageType == &quot;item&quot;'> <script type='text/javascript'> //<![CDATA[ // related post widget var relatedTitles = new Array(); var relatedTitlesNum = 0; var relatedUrls = new Array(); var thumburl = new Array(); function related_results_labels_thumbs(e) {for (var t = 0; t < e.feed.entry.length; t++) { var l = e.feed.entry[t]; relatedTitles[relatedTitlesNum] = l.title.$t; try { thumburl[relatedTitlesNum] = l.gform_foot.url } catch (r) { s = l.content.$t, a = s.indexOf("<img"), b = s.indexOf('src="', a), c = s.indexOf('"', b + 5), d = s.substr(b + 5, c - b - 5), thumburl[relatedTitlesNum] = -1 != a && -1 != b && -1 != c && "" != d ? d : "http://1.bp.blogspot.com/-Nit_LiUtMHE/VflsSxNxENI/AAAAAAAADiM/CuVVm4SVl8E/s320/No-image-bt9.jpg"} relatedTitles[relatedTitlesNum].length > 47 && (relatedTitles[relatedTitlesNum] = relatedTitles[relatedTitlesNum].substring(0, 47) + "..."); for (var i = 0; i < l.link.length; i++) "alternate" == l.link[i].rel && (relatedUrls[relatedTitlesNum] = l.link[i].href, relatedTitlesNum++) }} function removeRelatedDuplicates_thumbs() {for (var e = new Array(0), t = new Array(0), l = new Array(0), r = 0; r < relatedUrls.length; r++) contains_thumbs(e, relatedUrls[r]) || (e.length += 1, e[e.length - 1] = relatedUrls[r], t.length += 1, l.length += 1, t[t.length - 1] = relatedTitles[r], l[l.length - 1] = thumburl[r]); relatedTitles = t, relatedUrls = e, thumburl = l} function contains_thumbs(e, t) { for (var l = 0; l < e.length; l++) if (e[l] == t) return !0; return !1} function printRelatedLabels_thumbs() { for (var e = 0; e < relatedUrls.length; e++) relatedUrls[e] != currentposturl && relatedTitles[e] || (relatedUrls.splice(e, 1), relatedTitles.splice(e, 1), thumburl.splice(e, 1), e--); var t = Math.floor((relatedTitles.length - 1) * Math.random()) , e = 0; for (relatedTitles.length > 0 && document.write('<h4 class="pre-head">' + relatedpoststitle + "</h4>"), document.write('<div class="related-pre"/>'); e < relatedTitles.length && 20 > e && e < maxresults;) document.write('<a '), document.write(0 != e ? '"' : '"'), document.write(' href="' + relatedUrls[t] + '"><img src="' + thumburl[t] + '"/><div class="pre-title">' + relatedTitles[t] + "</div></a>"), t < relatedTitles.length - 1 ? t++ : t = 0, e++; document.write("</div>"), relatedUrls.splice(0, relatedUrls.length), thumburl.splice(0, thumburl.length), relatedTitles.splice(0, relatedTitles.length)} //]]> </script> </b:if> Copy and paste below code after this line : post-footer-line-3
Html
<b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='related-pre'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> <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=8&quot;' type='text/javascript'/> </b:loop> <script type='text/javascript'> var currentposturl=&quot;<data:post.url/>&quot;; var maxresults=6; var relatedpoststitle=&quot;Related Posts &quot;; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(); </script> </div> </b:if> Live Demo