How To Add Most Article Comments Widget In Blogger

0
How To install create most posts Commented Widget for blogger template
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

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>
<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>
Step 4. Now Save your HTML/JAVASCRIPT gadget box..Done !
learn trick to create most posts commented widget gadget for blogger template,install most commnets display on posts tool plugin for blogspot theme,tutorial on adding most comments on the post pages for blogger.
Hello Guys,today in this article we are going to explain you How to add Most article comments wi...
SUMMARY

learn trick to create most posts commented widget gadget for blogger template,install most commnets display on posts tool plugin for blogspot theme,tutorial on adding most comments on the post pages for blogger.

You Might Also Like:

We hope this article helped you to learn How To Add Most Article Comments Widget In Blogger. If you have any question or any complication please don't hesitate to ask us.You can drop your message below in the comment box or you can Contact Us!. If you liked this article please join us on : Facebook | Twitter | Google+

SUBSCRIBE ARTICLES BY EMAIL

Post a Comment Blogger Disqus

0 Comments on "How To Add Most Article Comments Widget In Blogger" So Far
Out Of Topic Show Conversion CodeHide Conversion Code Featured Post

MARKUP FOR WRITING COMMENTS:
1. To Insert Code Length Use<i rel="pre">Code Here</i>
2. To Insert Short Codes Use<i rel="code">Code Here</i>
3. To Insert Quote Use<b rel="quote">Quote</b>
4. To Insert Image Use<i rel="image">Image URL</i>
5. To Insert Video Use<i rel="youtube">You Tube Url</i>

Note: You Can Also Convert Your Code Directly From The Conversion Box.
--------------------------------------------------------------------------------------------------------------------------------------------------------
Please drop your comment according with the topic and feedback with hyperlinks may be removed.Thank you.
Regards:
Team Bloggersstand