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.
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 == "item"'>
<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 == "item"'>
<div id='related-pre'>
<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_thumbs&max-results=8"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=6;
var relatedpoststitle="Related Posts ";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div>
</b:if>
