Create Blogger mostComment Widget

Digital Hints 4:22:00 PM
Create Blogger mostComment Widget

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?

 Blogger mostComment Example


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:
 Blogger mostComment Example



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.

Share this

We are a blog that contains some hints about digital technology and we hope DigitalHints's blog useful for you all, and we hope to help to resolve your problems.

Related Posts

First