Pages

Wednesday, November 11, 2015

Related Posts Widget With Thumbnail For Blogger

Other than the popular post widget , the Related Posts Widget For Blogger/ Blogspot is also one of the best blogger widgets.  This is because it interlinks one post with several post having the same label as the post. The widget appears below each blogger post with thumbnails, which is easier to get the attention of your audience. Still wondering how to increase your blog's pageviews 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

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.informationtutorial15.blogspot.com/2015/11/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 template.
  • Click on 'edit html'.
  • Using ctrl + f keys search for this tag </body>
  • Copy the code below and paste 'above' </body>

    <!-- informationtutorial15.blogspot.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>
    <!-- informationtutorial15.blogspot.com -->

    Note: You can customize the code above by setting the minimum and 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.