Create Blogger mostComment Widget #1

One of the facilities provided by the feed bloggers are taking the data with sorting index number of comments. Not difficult to apply in your blogger widget. Well in this article we will explain in detail How to Create mostComment Widget independently.

JSON script mostComment

Scripts provided by feed bloggers to take the index data is very simple, you can write the script with the following format:

http://[YOUR_HOMEPAGE]/feeds/posts/default?max-results=9999&orderby=published&alt=json-in-script&callback=mostComment

The index data can be retrieved using the javascript coding as the following example:

<script src="http://[YOUR_HOMEPAGE/feeds/posts/default?max-results=9999&orderby=published&alt=json-in-script&callback=mostComment"></script>

How to Apply mostComment in JavaScript

To apply mostComment Blogger Widget, I will use a technique by placing the HTML tag <ul> and <li>. Quite simply you can see the HTML and Javascript code like the example below:

<div id="most-comments"></div>

<script type='text/javascript'>
//<![CDATA[
var numPosts = 10;
var homePage = "senatechno.com";
var postTitlear = new Array();
var postUrlar = new Array();
var postCommentar = new Array();
var totalpost;
document.write('<div id="most-comments"><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;
        var g;
        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];
            }
        };
        postTitlear.push(c);
        postUrlar.push(g);
        postCommentar.push(b)
    }
    sortPosts();
    for (var f = 0; f < numPosts; f++) {
        var e = '<li><span class="count-most">' + postCommentar[f] + '</span><a href="' + postUrlar[f] + '" title="' + postTitlear[f] 

+ '" target="_blank">' + postTitlear[f] + '</a>';
        document.write(e)
    }
}

function sortPosts() {
    function c(d, f) {
        var e = postTitlear[d];
        postTitlear[d] = postTitlear[f];
        postTitlear[f] = e;
        var e = postUrlar[d];
        postUrlar[d] = postUrlar[f];
        postUrlar[f] = e;
        var e = postCommentar[d];
        postCommentar[d] = postCommentar[f];
        postCommentar[f] = e
    }
    for (var b = 0; b < postTitlear.length - 1; b++) {
        for (var a = b + 1; a < postTitlear.length; a++) {
            if (parseInt(postCommentar[b]) < parseInt(postCommentar[a])) {
                c(b, a)
            }
        }
    }
}
document.write('<script src="http://' + homePage + '/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>

In the example above, I use the class name "most-comments" which I put in the HTML tag <div>, so it is quite easy also you will use it in Blogger widget.

Perform the standard way; from the Blogger Dashboard go to the Layout menu, then select the Add a Gadget in accordance with the position you want. Then select the type of HTML/JavaScript gadget and copy-paste the above code into the Content, change senatechno.com with your url blog and then save and see the results. Easy enough right?

RESULT DEMO

Decoration Widget mostComment

To provide the decoration of mostComment Widget make it more beautiful, you can can add CSS Style code such as the following example below:

<div id="most-comments"></div>

<style scoped='' type='text/css'>
#most-comments li,#most-comments ul,#most-comments ul li {
  margin: 0;
  padding: 0;
  list-style: none;
  color: #444;
  font-family: 'Open Sans',Helvetica,Arial,sans-serif;
  font-size: 14px;
}

#most-comments ul li {
  position: relative;
  overflow: hidden;
  background: #fff;
  margin: 3.5px 0;
  padding: 7px 10px 7px 50px;
  white-space: nowrap;
  text-overflow: ellipsis;
  box-shadow: inset 0 0 #fc4f3f;
  border: 1px solid #e6e6e6;
  transition: all .6s;
}

#most-comments ul li:hover {
  box-shadow: inset 310px 0 #fc4f3f;
}

#most-comments ul li a {
  color: #444;
  font-weight: 700;
  text-decoration: none;
  transition: all .3s;
}

#most-comments ul li a:hover,#most-comments ul li:hover a {
  color: #fff;
}

.count-most {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 100%;
  margin: 0;
  padding: 7px 0;
  background-color: #383838;
  color: #fff!important;
  text-align: center;
  transition: all .3s;
}

#most-comments ul li:hover .count-most {
  background-color: #fc4f3f;
}
</style>

<script type='text/javascript'>
//<![CDATA[
var numPosts = 10;
var homePage = "senatechno.com";
var postTitlear = new Array();
var postUrlar = new Array();
var postCommentar = new Array();
var totalpost;
document.write('<div id="most-comments"><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;
        var g;
        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];
            }
        };
        postTitlear.push(c);
        postUrlar.push(g);
        postCommentar.push(b)
    }
    sortPosts();
    for (var f = 0; f < numPosts; f++) {
        var e = '<li><span class="count-most">' + postCommentar[f] + '</span><a href="' + postUrlar[f] + '" title="' + postTitlear[f] 

+ '" target="_blank">' + postTitlear[f] + '</a>';
        document.write(e)
    }
}

function sortPosts() {
    function c(d, f) {
        var e = postTitlear[d];
        postTitlear[d] = postTitlear[f];
        postTitlear[f] = e;
        var e = postUrlar[d];
        postUrlar[d] = postUrlar[f];
        postUrlar[f] = e;
        var e = postCommentar[d];
        postCommentar[d] = postCommentar[f];
        postCommentar[f] = e
    }
    for (var b = 0; b < postTitlear.length - 1; b++) {
        for (var a = b + 1; a < postTitlear.length; a++) {
            if (parseInt(postCommentar[b]) < parseInt(postCommentar[a])) {
                c(b, a)
            }
        }
    }
}
document.write('<script src="http://' + homePage + '/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>

You can see a demo like the following example:

RESULT DEMO

mostComment Widget is one of Blogging Tricks very helpful increasing your web traffic, as it will attract readers to look beyond the articles interesting with lots of comments.

Author : Nurdin Budi Mustofa

I am an ordinary person who works as a programmer and wants to be honest. Be strong, be fearless, be beautiful, be calm - -And believe that anything is possible when you have the right people there to support you.