How To Add Together Close Article Comments Widget Inwards Blogger

Hello Guys,today inwards this article nosotros are going to explicate yous How to add together Most article comments widget for blogger template.In this gadget yous tin display your close commented article or transportation service past times the users.You tin display equally much posts yous desire to demo for close comments.we convey fixed the value for five posts but yous tin modify it past times equally per your need.This is or then other agency to continue engaged visitors alongside your articles,installing close comments widget nosotros equally good increase the page views.The best side to display comments widget plugin inwards sidebar or footer.We convey used CSS for styling in addition to javascript for comments telephone telephone from your blogspot template.In this widget yous tin display blogger commented posts.However disqus trending articles or close commented volition non display inwards this widget.Later on nosotros volition set out tutorial on disqus comments gadget for blogger template..we are working on it..soon nosotros volition publish..so for that rest tune..and to catch this widget follow the steps mentioned below.It's real tardily to occupation yous tin embed inwards your sidebar.

Demo

See the Pen Most Article Commented Widget For Blogger Template past times (@bloggersstand) on CodePen.

How to install Most commented posts widget inwards blogger template

Installation steps:

Step 1. Log inwards to your Blogger trouble organisation human relationship in addition to Go to your Blogger Dashboard.

Step 2. Now Go to your Layout->Add a gadget->HTML/JAVASCRIPT

Step 3. Now re-create the below code snippet in addition to glue inwards your HTML/JAVASCRIPT box in addition to click relieve button.

<div id="bsdmost-comments"></div>
<style>
#bsdmost-comments ul,#bsdmost-comments li,#bsdmost-comments ul li {
    margin: 0;
    list-style: none;
    color: #444;
    font-family: 'Open Sans',Helvetica,Arial,sans-serif;
    font-size: 14px;
}
#bsdmost-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 #fff;
    border: 1px corporation #e6e6e6;
    transition: all .6s;
}
#bsdmost-comments ul li:hover {
    box-shadow: inset 310px 0 #095556;
}
#bsdmost-comments ul li a {
    color: #444;
    font-weight: bold;
    text-decoration: none;
    transition: all .3s;
}
#bsdmost-comments ul li a:hover {
    color: #fff;
}
#bsdmost-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: #095556;
    color: #fff!important;
    text-align: center;
    transition: all .3s;
}
#bsdmost-comments ul li:hover .count-most {
    background-color: #fc4f3f;
}
</style>
<script type='text/javascript'>
//<![CDATA[
// Most Commented Article Widget By Www.Bloggersstand.Com
var numPosts=5;
var homePage="www.bloggersstand.com";
var postTitlear=new Array();
var postUrlar=new Array();
var postCommentar=new Array();
var totalpost;document.write('<div id="bsdmost-comments"><ul>');
constituent 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="How To Add Most Article Comments Widget In Blogger" target="_blank">'+postTitlear[f]+'</a>';
document.write(e)}}
constituent 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>

Step 4. Now Save your HTML/JAVASCRIPT gadget box..Done !