Related Posts for Blogger With Thumbnail and Label Title

Related posts widget for blogger is a must have widget. This widget shows some related topic posts automatically under every individual post. This is very important to increase pageviews by every visitor. This related post widget also makes thinner the chance to get bounce.



About Related Posts:


As I told above a related posts widget automatically shows some related topic posts under every post and get the attention of readers/visitors on it. Finally increase the pageviews.
Now days almost every third party’s premium/free blogger templates have this widget by default. But if you are a using a template from your template option that is provided by Google (blogger) you will miss the advantage of this feature.
And there is also some third party templates too that don't have related posts widget built in for various purpose like, blog loading speed measure.


related posts widget for blogger with thumbnail and auto label name

Features of This Widget:

Below are the main features of this awesome related posts widget for blogger with thumbnail and automatically detected label name. The unique feature is, the widget will show the detected label name automatically top of thumbnail & post title. This is something new.
  • So easy to install.
  • Only shows the most related posts.
  • Shows thumbnail in 2 different style (round style & squire style).
  • Very fast loading.
  • The main feature is, it will show the detected label name automatically.
  • Customizable.
  • Don't show ads to your visitors.
  • Don't show on homepage.
How To Install:
Below is the one time installation process in details. Follow it

Step 1: Login to your blogger account, select your blog (if you have multiple), then click on Template from blogger main menu. 

Step 2: Now click on Edit HTML.
Note: Don't forget to backup your template b4 proceed to any kind of editing, it takes only seconds.

Step 3: Search for </body> in template editor by pressing Ctrl+F.

Step 4: Now copy and paste the below code just above it (</body>)


Code:
<b:if cond='data:blog.pageType == &quot;item&quot;'>

<style>
.related-posts {
width: 100%;
margin: 2em 0;
float: left;
}

.related-posts ul li {
list-style: none;
margin: 0 5px;
float: left;
text-align: center;
border: none;
}
</style>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>
<script>
//<![CDATA[
$(document).ready(function() {

//CODE OPTIONS

var maxSearched = 500;
var minimum = 3;
var maximum = 4;
var imageSize = 100;
var roundImages = true;
var relatedTitle = true;
var labelInTitle = true;
var relatedTitleText = "Also Read";
var defaultImage = "";
var campaignTracking = false;
var campaignSource = "";
var campaignMedium = "";
var campaignName = "";
var postLabels = $('.post-labels a');
var insertBefore = $('.post-footer');


//END CODE OPTIONS - DO NOT EDIT BELOW CODE

var labels=[];var label;var alternateLabel;var minposts=minimum-1;if(postLabels.length===1){label=postLabels.text().trim()}else if(postLabels.length>1){$(postLabels).each(function(){labels.push($(this).text().trim())});label=labels[Math.floor(labels.length*Math.random())];var labelLocation=labels.indexOf(label);if(labelLocation===labels.length-1){alternateLabel=labels[labelLocation-1]}else{alternateLabel=labels[labelLocation+1]}}if(label!==undefined){var title=$(".entry-title").text().trim();var labelCount=0;var alternateLabelCount=0;var matches=[];var url=$('link[rel="alternate"][title*="Atom"]').eq(0).attr("href");$.ajax({url:url,data:{"max-results":maxSearched,alt:"json-in-script"},dataType:"jsonp",success:function(e){$.each(e.feed.entry,function(t,n){if(e.feed.entry[t].category!==undefined){var r=[];for(var i=0;i<e.feed.entry[t].category.length;i++){r.push(e.feed.entry[t].category[i].term)}if($.inArray(label,r)!==-1){labelCount++}if($.inArray(alternateLabel,r)!==-1){alternateLabelCount++}}});if(labelCount<=minposts&&alternateLabelCount>=minposts){label=alternateLabel}$.each(e.feed.entry,function(t,n){if(e.feed.entry[t].category!==undefined){var r=[];for(var i=0;i<e.feed.entry[t].category.length;i++){r.push(e.feed.entry[t].category[i].term)}if($.inArray(label,r)!==-1){var s=e.feed.entry[t].title.$t.trim();if(s!==title){var o;for(var u=0;u<e.feed.entry[t].link.length;u++){if(e.feed.entry[t].link[u].rel==="alternate"){o=e.feed.entry[t].link[u].href}}var a;if(e.feed.entry[t].media$thumbnail!==undefined){a=e.feed.entry[t].media$thumbnail.url.split(/s72-c/).join("s"+imageSize+"-c")}else{a=defaultImage}if(matches.length<maxSearched&&campaignTracking===false){matches.push('<li><a href="'+o+'"><img src="'+a+'" alt="'+s+'" nopin="nopin">'+s+"</a></li>")}else if(matches.length<maxSearched&&campaignTracking===true){matches.push('<li><a href="'+o+"?utm_source="+campaignSource+"&utm_medium="+campaignMedium+"&utm_campaign="+campaignName+'"><img src="'+a+'" alt="'+s+'" nopin="nopin">'+s+"</a></li>")}}}}});if(matches.length>=minimum){if(relatedTitle===true&&labelInTitle===true){insertBefore.before('<div class="related-posts"><h5>'+relatedTitleText+' <span class="related-term">'+label+"</span></h5><ul></ul></div>")}else if(relatedTitle===true&&labelInTitle===false){insertBefore.before('<div class="related-posts"><h5>'+relatedTitleText+"</h5><ul></ul></div>")}else{insertBefore.before('<div class="related-posts"><ul></ul></div>')}matches.sort(function(){return.5-Math.random()});for(var t=0;t<maximum;t++){$(".related-posts ul").append(matches[t])}}insertBefore.css("clear","both");$(".related-posts ul li").css({"max-width":imageSize,"border":"none","padding":"0"});if(roundImages===true){$(".related-posts ul li img").css({"width":imageSize,"height":imageSize,"border-radius":"50%"})}else{$(".related-posts ul li img").css({"max-width":imageSize,"height":"auto"});}}})}
});
//]]>
</script>

</b:if>

<div style='display: none ! important;'><a href='http://bloggingtrick1.blogspot.in/' rel='dofollow'>BloggingTricks</a></div>

Step 5: Finally hit the Save Template button. You are done.


Customization:

This related posts widget have many options to customize & that makes it much user friendly. Lets customize for your own blog.
Widget customizing options available under //CODE OPTIONS in main code.

Thumbnail Style:
var roundImages = false;
This is the default code. And by default the thumbnail will show in squire style change the value false to true to show it in round.


Related Posts Number:
var minimum = 3;
var maximum = 5;

Change the minimum and maximum value 3&5 to set how many related posts to show on your blog.


Thumbnail Size:
var imageSize = 150;
Change the value 150 to change the thumbnail size of this related posts widget.


Widget Title:
var relatedTitleText = "more posts about";
Change the text more posts about with your own title.
var relatedTitle = true;
Change the value true to false to remove widget title.


Label Title:
var labelInTitle = true;
This widget shows posts label name automatically. This is amazing & unique feature but if you want to disable it, change the value true to false.