Create Blogger mostComment Widget #1

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.

He is a software developer; He try to write articles about the ideas, opinions, fantasies, experiences and desires related to IT issues and useful life; and He hopes everything that he write can be useful for the good of us all.

Share this

Related Posts

Previous
Next Post »

1 comments:

Write comments
4/20/2015 delete

Fascinating! Thank you.

Reply
avatar