Most commented articles blogger widget
close
Most commented articles blogger widget

Most commented articles blogger widget

Most commented articles blogger widget

Hello guys if you want to get the list of articles which have got most of the comments then this article will help you to do that.

Here in this article I have provided the source code of this blogger widget which will help you to list of all the articles which have got most of the comments.

Well before going ahead I want to tell you that this blogger widget is integrated with blogger comment system which means that if you are using disqus comment system or any other comment system in your blogger blog then this widget will not work.

So if you want to add this widget into your blogger blog you have to to enable blogger comment system instead of using any other comment system.

If you want to see the preview of this most commented articles blogger widget click the button provided below and you will be redirected to the demo page.

View Demo

So it seems that I am wasting your time so let's create this add this most commented articles blogger widget into our blogger blog.

The best place to add this widget into your blogger blog is your blogs sidebar.

So now if you want to add this blogger widget into your blogger blog follow the steps provided below and do as it is said without skipping any step.

Steps to Follow:

  1. Go to Blogger Dashboard
  2. Go to Layout Section
  3. Click Add New Widget
  4. Select HTML/Javascript Widget from widgets list
  5. Choose the best place to add this widget my recommendation is sidebar.
  6. Now copy the code provided below and paste it as widget content.
  7. <style>
    .container {
        max-width: 300px;
        background: #fff;
        margin: 5% auto;
        padding: 10px;
        border: 1px solid #ccc;
        box-shadow: 0 10px 5px -5px rgba(0,0,0,0.1);
    }
    
    #most-comments ul,#most-comments li,#most-comments ul li {
        margin: 0;
        list-style: none;
        color: #444;
        font-family: inherit;
        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: bold;
        text-decoration: none;
        transition: all .3s;
    }
    
    #most-comments ul li a:hover {
        color: #fff;
    }
    
    #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>
    <div class="container">
    <div id="most-comments"></div>
    <script>
    //<![CDATA[
    var numPosts=10;
    var homePage="https://www.raufgraphics.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="'+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>
    </div>
  8. Now name your Widget as Recent Comments.
  9. Save Widget

In the widgets source code provided above you have to replace something which is as under.

ReplacementDescription
https://www.raufgraphics.comReplace this URL with your web site URL or leave it blank to auto detect your site URL.

So after replacing the site URL this widget will work fine for you you just have to preview it.

Conclusion:

So in this article i have share this most commented articles blogger widget with you i hope that it have helped you and solved up your issue grately.

If you want any other widget please leave your feedback below and if you have any recommendation for me you can also leave that below.
Disqus Codes

No comments

Notifications

Disqus Logo