Hello Guys,today in this article we are going to explain you How to add Most article comments widget for blogger template.In this gadget you can display your most commented article or post by the users.You can display as much posts you want to show for most comments.we have fixed the value for 5 posts but you can change it by as per your need.This is another way to keep engaged visitors with your articles,installing most comments widget we also increase the page views.The best side to display comments widget plugin in sidebar or footer.We have used CSS for styling and javascript for comments call from your blogspot template.In this widget you can display blogger commented posts.However disqus trending articles or most commented will not display in this widget.Later on we will publish tutorial on disqus comments gadget for blogger template..we are working on it..soon we will publish..so for that stay tune..and to grab this widget follow the steps mentioned below.It's very easy to use you can embed in your sidebar.
Demo
See the Pen Most Article Commented Widget For Blogger Template by BloggersStand (@bloggersstand) on CodePen.
How to install Most commented posts widget in blogger template
Installation steps:
Step 1. Log in to your Blogger account and Go to your Blogger Dashboard.
Step 2. Now Go to your Layout->Add a gadget->HTML/JAVASCRIPT
Step 3. Now copy the below code snippet and paste in your HTML/JAVASCRIPT box and click save button.
<div id="bsdmost-comments"></div>Step 4. Now Save your HTML/JAVASCRIPT gadget box..Done !
<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 solid #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>');
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>