Hi guys as noted on one of my tutorial [How to Add Related Post Widget for Below Each Post in Blogger Version 2.0] I have notice that sadly it was not working anymore. Freaking out to make sure it will work again I searched almost every corner of google but could not find the resolution as to what could be the reason behind for it not to be working. What I have in mind is that possibly looking into the details of the codes the JavaScript is actually imported rather than embedded - assuming that it is indeed the key factor for it not to be working I had to extract the full JavaScript code then implement it to my HTML blog. Crossing my finger that by re-coding the widget it will work already but unfortunately it didn't. I have no JavaScript background that's why maybe Haha. But by continuously re-coding it I unexpectedly made it work again. I'm so amaze of myself. Haha.
So finally after all the hours I spent I'm so happy to share to you guys a new code for the Related Post Widget for Each Post. Take note guys that this is not a substitute but rather an alternative option just in case the Version 2.0 didn't work for you. The visual output of this version and version 2.0 are just the same.
Same thing this widget will only display recommended articles below each post with the same labels/tag. And this does not appear on your homepage. If you want to have a separate widget similar to this then you might want to read this : How To Add Related Post Widget(Gadget) In Blogger.
Update as of July 17, 2016 - JavaScript Changed.
Update as of June 15, 2016 - CSS Codes tweaked.
Update as of October 6, 2014 - Fixed / Changed the JavaScript source.
<!-- How to Add Relate Post Widget After Each Post in Blogger --><b:if cond='data:blog.pageType == "item"'><script type='text/javascript'>var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL4Uvue3o-l9QHHsWT61nYM9Y0Fm-4UbWhqA9J4XOT0yRZsm7LUrzvuRo8c7TsLGmki5dl3J1a99pHR1RCn_EO8Hnt7_QsxWVbQqAbYSFjicUNDmNMQuSI9Yhu7hpGg8-DHmi3pvtSKnu3/s1600/no_image.jpg";var maxresults=3;var splittercolor="#fff";var relatedpoststitle="Related Articles:";</script><script type='text/javascript'>//<![CDATA[var relatedTitles = new Array();var relatedTitlesNum = 0;var relatedUrls = new Array();var thumburl = new Array();function related_results_labels_thumbs(json) {for (var i = 0; i < json.feed.entry.length; i++) {var entry = json.feed.entry[i];relatedTitles[relatedTitlesNum] = entry.title.$t;try{thumburl[relatedTitlesNum]=entry.media$thumbnail.url;}catch (error){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!="")){thumburl[relatedTitlesNum]=d;} else {if(typeof(defaultnoimage) !== 'undefined') thumburl[relatedTitlesNum]=defaultnoimage; else thumburl[relatedTitlesNum]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL4Uvue3o-l9QHHsWT61nYM9Y0Fm-4UbWhqA9J4XOT0yRZsm7LUrzvuRo8c7TsLGmki5dl3J1a99pHR1RCn_EO8Hnt7_QsxWVbQqAbYSFjicUNDmNMQuSI9Yhu7hpGg8-DHmi3pvtSKnu3/s1600/no_image.jpg";}}if(relatedTitles[relatedTitlesNum].length>35) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 35)+"...";for (var k = 0; k < entry.link.length; k++) {if (entry.link[k].rel == 'alternate') {relatedUrls[relatedTitlesNum] = entry.link[k].href;relatedTitlesNum++;}}}}function removeRelatedDuplicates_thumbs() {var tmp = new Array(0);var tmp2 = new Array(0);var tmp3 = new Array(0);for(var i = 0; i < relatedUrls.length; i++) {if(!contains_thumbs(tmp, relatedUrls[i])){tmp.length += 1;tmp[tmp.length - 1] = relatedUrls[i];tmp2.length += 1;tmp3.length += 1;tmp2[tmp2.length - 1] = relatedTitles[i];tmp3[tmp3.length - 1] = thumburl[i];}}relatedTitles = tmp2;relatedUrls = tmp;thumburl=tmp3;}function contains_thumbs(a, e) {for(var j = 0; j < a.length; j++) if (a[j]==e) return true;return false;}function printRelatedLabels_thumbs() { for(var i=0;i<relatedUrls.length;i++){ if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<h2>'+relatedpoststitle+'</h2>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;margin:0 4px 10px 0;float:left;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="related_img" src="'+thumburl[r]+'"/><br/><div id="related-title">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}//]]></script></b:if><!-- How to Add Relate Post Widget After Each Post in Blogger -->
- Usually you will find line of code this twice, refer to the second one.
<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=5"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="<b>Related Posts:</b>";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
</b:if></b:if><!-- Related Posts with Thumbnails Code End-->
Thank you so much for the visit, please don't forget to like the blog on Facebook - a single like gives me motivation :P . For any concerns please relay it to me via comment with the detailed concern. Happy blogging!