How to Display Most Commented Posts in Blogger Users who came from search engine result, after reading your current post wouldn't otherwise know where to go, they might check out and ...
2018-07-31T07:44:56Z

How to Display Most Commented Posts in Blogger

Users who came from search engine result, after reading your current post wouldn't otherwise know where to go, they might check out and hopefully participate in your blog's most commented posts which are commonly the most page views and are the most interesting. As we know Yahoo pipes code/plugin is no longer supported to display your most commented posts. Here is another ready made script to show Most Commented Posts with Thumbnail.

Display Most Commented Posts in Blogger

In this article, we will go through a script to display most commented posts in blogger in a widget. Although there are lots of tutorial for this purpose but as we know Yahoo pipes code/plugin is no longer supported to display your most commented posts. In this tutorial, we will display the top 5 commented posts but you change it as per your requirement.
<script>
    //<![CDATA[
    var numPosts = 5;
    var width = 225;
    var height = 120;
    var url = "yourblog.blogspot.com";

    var postTitle = new Array();
    var postUrl = new Array();
    var postComment = new Array();
    var postThumb = new Array();
    var totalpost;
    document.write('<div id="top-commented"><ul>');

    function mostComment(j) {
        var a = j.feed.entry.length;
        totalpost = a;
        for (var f = 0; f < a; f++) {
            var h = j.feed.entry[f];
            var c = h.title.$t;
            var b;

            if (f == j.feed.entry.length) {
                break
            }
            for (var d = 0; d < h.link.length; d++) {
                if (h.link[d].rel == "alternate") {
                    g = h.link[d].href;
                    break
                }
            }
            for (var d = 0; d < h.link.length; d++) {
                if (h.link[d].rel == "replies" && h.link[d].type == "text/html") {
                    b = h.link[d].title.split(" ")[0];
                }
            };

            var gt;
            try {
                gt = h.media$thumbnail.url.replace("/s72-c/", "/w" + width + "-h" + height + "-c/");
            } catch (error) {
                ss = h.content.$t;
                aa = ss.indexOf("<img");
                bb = ss.indexOf("src=\"", a);
                cc = ss.indexOf("\"", b + 5);
                dd = ss.substr(bb + 5, cc - bb - 5);
                if ((aa != -1) && (bb != -1) && (cc != -1) && (dd != "")) {
                    gt = dd;
                } else gt = 'http://1.bp.blogspot.com/-0ZVmySTNp8w/VatptLQV04I/AAAAAAAAA4A/Kyr5yVdA30c/' + "w" + width + "-h" + height + "-c/" + 'No-image-available-technohalf.png';
            }
            postTitle.push(c);
            postThumb.push(gt);
            postUrl.push(g);
            postComment.push(b)
        }
        sortPosts();
        for (var f = 0; f < numPosts; f++) {
            var e = '<li><div class="last-posts-img"><a href="' + postUrl[f] + '" title="' + postTitle[f] + '" target="_blank"><img  width= "' + width + '" height= "' + height + '" src="' + postThumb[f] + '" alt="' + postTitle[f] + '"/><div class="post-snippet">' + postTitle[f] + '</div><span class="count-most">' + postComment[f] + '</span></a></div>';
            document.write(e)
        }
    }

    function sortPosts() {
        function c(d, f) {
            var e = postTitle[d];
            postTitle[d] = postTitle[f];
            postTitle[f] = e;
            var e = postUrl[d];
            postUrl[d] = postUrl[f];
            postUrl[f] = e;
            var e = postComment[d];
            postComment[d] = postComment[f];
            postComment[f] = e;
            var e = postThumb[d];
            postThumb[d] = postThumb[f];
            postThumb[f] = e;
        }
        for (var b = 0; b < postTitle.length - 1; b++) {
            for (var a = b + 1; a < postTitle.length; a++) {
                if (parseInt(postComment[b]) < parseInt(postComment[a])) {
                    c(b, a)
                }
            }
        }
    }
    document.write('<script src="http://' + url + '/feeds/posts/default?max-results=9999&orderby=published&alt=json-in-script&callback=mostComment"><\/script>');
    document.write('</li>')
    document.write('</ul>')
    document.write('</div>');
    //]]>
</script>

Option
  • Change your  blog url here var url = "yourblog.blogspot.com";
  • By default, this widget is set to display a maximum of 5 most commented posts. To change this number, replace the number 5 in var numPosts = 5; with the number of posts that you want to appear
  • You can also change height and width here var width = 225; and var height = 120; it is by default 225px width and 120px height

Elegant Most Commented Widget

  • Add this widget to blogger
  • Go to Blogger Dashboard >> Layout
  • Then select Add a Widget >> Select HTML/JavaScript
  • Fill Up widget title and in content add below CSS and above JavaScript i.e.
<style>

//Your javascript here

<style>


<script>
//<![CDATA[

//Your javascript here

//]]>
</script>
Note: Javascript and CSS code already added <script> and <style> tag
<style>
    div#top-commented {
        max-width: 300px;
        background: #fff;
        margin: 0 auto;
        border: 1px solid #ccc;
    }
    
    #top-commented ul,
    #top-commented li,
    #top-commented ul li {
        margin: 0 auto;
        list-style: none;
        color: #444;
        font-family: 'Open Sans', Helvetica, Arial, sans-serif;
        font-size: 14px;
        padding: 0;
        text-align: center;
    }
    
    #top-commented ul li {
        position: relative;
        overflow: hidden;
        background: #fff;
        text-overflow: ellipsis;
        box-shadow: inset 0 0 #fc4f3f;
        border-bottom: 1px solid #e6e6e6;
        transition: all .6s;
        padding: 19px 0;
    }
    
    #top-commented ul li a {
        color: #444;
        font-weight: bold;
        text-decoration: none;
        transition: all .3s;
    }
    
    #top-commented .post-snippet {
        padding: 8px 33px;
    }
    
    .count-most {
        position: absolute;
        left: 9px;
        top: 7px;
        width: 40px;
        height: 40px;
        border-radius: 250px;
        text-align: center;
        background-color: #fc4f3f;
        color: #fff!important;
        text-align: center;
        transition: all .3s;
        vertical-align: middle;
        display: block;
        line-height: 2.8;
    }
</style>

We hope this tutorial helped you display most commented posts in your blog. If you are looking for more tips on blogger then subscribe us.
Share it:

Blogger

Blogging

How To

Tutorial

Post A Comment:

0 comments: