Most Commented Posts With Numbers Display For Blogger

0
Most Commented Posts With Numbers Display For Blogger
In previous post we have talked about the how to add most commentators widget in blogger.Today in this tutorial we are going to explain how to add most commented posts in blogger blog or website.The posts have the most comments are the most likely to have visitors wants to read that post and join the conversation.To grab this most commented posts gadget for blogger just follow the steps mentioned below.

how to add most commented posts widget in blogger

installation steps

1. Go To Blogger > Template > Backup your template.
2. Click Edit HTML
3. Search for the following tag,
</Group>
Paste the following code just below it.
 <Group description="Most Commented" selector=".most-commented">
<Variable name="most.commented.background1" description="background color1" type="color" default="#fa4242" value="#ee377a"/>
<Variable name="most.commented.background2" description="background color2" type="color" default="#ee6107" value="#fcad37"/>
<Variable name="most.commented.background3" description="background color3" type="color" default="#f0f" value="#f8e000"/>
<Variable name="most.commented.background4" description="background color4" type="color" default="#ff0" value="#c7e93d"/>
<Variable name="most.commented.background5" description="background color5" type="color" default="#0ff" value="#5ebded"/>
</Group>
Look below for example:
how to add most commented posts widget in blogger
If you can't find </Group> tag,find the following tag and add the variables just below it.
<b:skin><![CDATA[
4. Now Search for the following tag,
 ]]></b:skin>
5. Now Add the following CSS code just above it.
/*****************************************
Css Code for most Commented Posts
By:Bloggersstand.com
******************************************/
 .comment-count {
    padding: 3px 10px;
    background: #fff;
    color: #000;
    font-size: 10px;
    float: right;
}
.most-commented ul {
    padding: 0px !important;
    font-family: Century Gothic, sans-serif;
}
.most-commented ul li {
    list-style-type: none;
    padding: 10px;
    color: #555;
    margin-top: -10px;
}
.most-commented ul li a {
    color: #444;
    font-weight: bold;
    text-decoration: none;
    font-size: 11px;
}
.most-commented ul li img {
    float: left;
    margin: 0px 5px 0px 0px;
    width: 60px;
    height: 60px;
}
.most-commented:nth-child(3n+0) {
    background: $(most.commented.background1);
    width: 100%;
}
.most-commented:nth-child(4n+0) {
    background: $(most.commented.background2);
    width: 95%;
}
.most-commented:nth-child(5n+0) {
    background: $(most.commented.background3);
    width: 90%;
}
.most-commented:nth-child(6n+0) {
    background: $(most.commented.background4);
    width: 85%;
}
.most-commented:nth-child(7n+0) {
    background: $(most.commented.background5);
    width: 80%;
}
 Now Save the Template..!
6. Now Go to blogger layout and Select "ADD A GADGET"
7. Now Add the "HTML/JAVASCRIPT GADGET"
8. Finally add the following code in html/javascript gadget.
 <script type="text/javascript">
function stripTags(s,n) {
    return s.replace(/<.*?>/ig,"").split(/\s+/).slice(0,n-1).join(" ")
}
function mostcommented(feed) {
    var i;
    for (i = 0; i < feed.count ; i++) {
var postURL = "'" + feed.value.items[i].link + "'";
var postTitle = feed.value.items[i].title;
var postthumbnail = "<img src="+feed.value.items[i].postthumbnail+" />";
var postDescription = feed.value.items[i].postdescription;
var postComments = feed.value.items[i].commentcount;
var postList = '<div class="most-commented"><ul><li><div class="comment-count">' + postComments + "</div>" + postthumbnail + "<a href="+ postURL + '">' + postTitle + "</a>"  + '<p>' +stripTags(postDescription,10)+'...</p>' + '</li></ul></div>';
 document.write(postList);
     }
 }
 </script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
AddUrlHere=http://bloggersstand.com
&NumberofPosts=5
&_id=2cb5eb603ed55a6264ee1484e5fdd45c
&_callback=mostcommented
&_render=json"
type="text/javascript"></script><span style="font-size: 80%; float:left;"><a href="http://www.bloggersstand.com/2015/08/blogspot-most-commented-posts-widget-trick.html">Add this widget</a></span>

customization

  • To add your website url,replace http://bloggersstand.com.
  • To change the characters value in discription of post change,10
if you want to add the most commented widget without thumbnails and post snippets,paste below code inhtml/javascript
.
 <script type="text/javascript">
function stripTags(s,n)
    {
    return s.replace(/<.*?>/ig,"").split(/\s+/).slice(0,n-1).join(" ")
}
function mostcommented(feed) {
 var i;
 for (i = 0; i < feed.count ; i++)
 {
var postURL = "'" + feed.value.items[i].link + "'";
var postTitle = feed.value.items[i].title;
var postComments = feed.value.items[i].commentcount;
var postList = '<div class="most-commented"><ul><li style="margin-bottom: 10px"><div class="comment-count">' + postComments + "</div>" + "<a href="+ postURL + '">' + postTitle + "</a>"  + '</li></ul></div>';
 document.write(postList);
 }
 }
 </script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
 AddUrlHere=http://bloggersstand.com
&NumberofPosts=5
&_id=2cb5eb603ed55a6264ee1484e5fdd45c
&_callback=mostcommented
&_render=json"
type="text/javascript"></script>
<span style="font-size: 80%; float:left;"><a href="http://www.bloggersstand.com/2015/08/blogspot-most-commented-posts-widget-trick.html">Add this widget</a></span>

 customization

  • To add your website url,replace http://bloggersstand.com.
  • To add the comments text after the comments number replace<div class="comment-count">' + postComments + "</div>" with ,
<div class="comment-count">' + postComments + " comments" + "</div>"

  • To change the background colors of the most commented posts widget ,we have made it very simple and easy to use.just go to your template click on customize button and go to advanced section and select most commented tab,look below for example.


  • how to add most commented posts widget in blogger


    • After changing the background color of widget,click on apply to blog button to save the changes.
    • Done..!!
    if you have any query regarding how to add most commented posts gadget for blogger,feel free to ask just drop your comment or contact us.Thank you..keep visiting friends.
    Most Commented Posts With Numbers Display For Blogger,how to add most comments number display in blog websites for blogspot,adding number top comments posts title for blogger
    In previous post we have talked about the how to add most commentators widget in blogger .Today ...
    SUMMARY

    Most Commented Posts With Numbers Display For Blogger,how to add most comments number display in blog websites for blogspot,adding number top comments posts title for blogger

    You Might Also Like:

    We hope this article helped you to learn Most Commented Posts With Numbers Display For 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 "Most Commented Posts With Numbers Display For 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