Related Posts Widget With Thumbnail For Blogger

Other than the Popular post blogger widget, the Related Posts Widget For Blogger/ Blogspot is also one of the best blogger widgets.

What does it do?

It interlinks posts on your blog with the same Label together.

On this widget, any post being viewed on your blog if it has bee categorized with a label, other posts in the same Label will be displayed on this widget.

The widget appears below each blogger post with thumbnails, which is easier to get the attention of your audience.

Why You Should Use a Related Post Widget with Thumbnail


A Related post widget allows visitors to your site to gain access to more posts related to that particular post.

Since the post is related to the one currently being viewed, chances that they'll click on it are high.

That being so, you get more blog pageviews as well as reduce your blog's bounce rate.

A reduction in bounce rate can be attributed to the fact that most visitors are viewing more pages on your blog after coming from a page referred to them by search engines or social media pages.

In the same vein,

This particular widget comes with a thumbnail that displays an image alongside the title of the post.

The images serve to captivate the user's attention easily compared to when images are absent.

So,

Are you still wondering how to increase your blog's page views and reduce the bounce rate?

Then try out this related post blogger widget with thumbnails on your blogger blog.

Two different codes are given below for the widget, copy only one into your template.

How to add related post widget to blogger/blogspot with jquery

Also Read:   Sliding Recent Posts Widget For Blogger
                    Scrolling Popular Post Widget For Blogger
                    Square Popular Posts Blogger Widget With Rotating Effect 



How to Add Related Posts Widget In Blogger


Given below, are steps on how to add related posts widget with thumbnail in your blogger blog. 

Follow them to also implement this widget on your blog.

CODE 1:

  • Goto your blogger dashboard.
  • Navigate to 'template', backup your template first.
  • Next, Click on 'edit html'.
  • Using Ctrl+f  keys, search for </head>.  
  • Copy the code below and paste 'above' the tag </head>


<!--Related Posts with thumbnails Scripts and Styles Start-->

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

<style type='text/css'>

#related-posts{float:left;width:auto;}

#related-posts a{border-right: 1px dotted #eaeaea;}

#related-posts a:hover{background: #EEEEEE;}

#related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}

#related-posts .related_img {margin:5px;border:2px solid #f2f2f2;width:110px;height:100px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;-webkit-border-radius: 5px;  -moz-border-radius: 5px; border-radius: 5px; }

#related-title {color:#666;text-align:center;padding: 0px 5px 10px;font-size:12px;width:110px; height: 40px;}

#related-posts .related_img:hover{border:2px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>

<script type='text/javascript' src='http://helplogger.googlecode.com/svn/trunk/relatedposts.js' />

</b:if>

<!--Related Posts with thumbnails Scripts and Styles End-->


  • Next, search for this tag <div class='post-footer'>
  • Copy the code below and paste 'above' the second <div class='post-footer'> in your template.


<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<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=5&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/><div style="font-size: 9px;float: right; margin: 5px;"><a  style="font-size: 9px; text-decoration: none;" href="http://www.techlass.org/2014/10/Related-post-widget-for-blogger-with-jquery.html" rel="dofollow" >Related Posts Widget</a></div>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

  • Save your template.
View your blog to note the changes. Unsatisfied with the result? try out the second code for the related post blogger widget.

Also Read: Facebook Popup Like Box With Timer For Blogger
                   Numbered Popular Post Widget For Blogger
                   How to Customize Labels Cloud Gadget In Blogger


Related Posts Widget For Blogger With Thumbnails 

CODE 2:

  • Got your blogger dashboard
  • Navigate to the template.
  • Click on 'edit HTML'.
  • Using ctrl + f keys search for this tag </body>
  • Copy the code below and paste 'above' </body>

    <!-- detutor.com -->
    <b:if cond='data:blog.pageType == "item"'>
     
    <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>
    <script>
     
    //<![CDATA[
    $(document).ready(function() {
     
     
     
    //CODE OPTIONS
    var maxSearched = 500;
    var minimum = 3;
    var maximum = 3;
    var imageSize = 150;
    var roundImages = false;
    var relatedTitle = true;
    var labelInTitle = true;
    var relatedTitleText = "more posts about";
    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 THIS LINE
     
    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"});$(".related-posts ul li img").css({"max-width":imageSize,height:imageSize});if(roundImages===true){$(".related-posts ul li img").css("border-radius","50%")}}})}
    });
    //]]>
    </script>
     
    </b:if>
    <!-- techlass.com --> 
    

    Note: You can customize the code above by setting the minimum and the maximum number of related post to be displayed.

    By default, these have been set to 3 and 3 respectively.

    You can also make changes if you want the thumbnails to be round. Simply edit the code by changing var roundImages = false to var roundImages = true. Ensure you include the semicolons after making the changes.
    • Save your template.

    Conclusion:


    The Related posts widget with a thumbnail for Blogger is a very valuable widget every blog should have.

    It can make your blog user-friendly both on mobile and desktop since there is ease of navigation with the help of this widget.

    Implement it to make the most out of your blog.

    Do you like this post? Please link back to this article by copying one of the codes below.

    URL Of Post:


    HTML Link Code:

    BB (forum) link code:

    Comments

    Post a Comment

    Please share your views on this topic with Grace Joseph by leaving a comment.