Most Commented Posts Widget For Blogger With Thumbnails

Popular posts widget blogger and stylish popular post widget for blogger: Most commented posts widget for blogger blogs can be likened to the popular post widget. This is because it displays the most popular posts on your blog and the ones with the highest number of comments. Your Readers might be attracted to view them on seeing the number of engagements these posts have.

Unlike the popular post widget that only displays the most viewed post, this blogger widget uses the criteria of displaying a list of most commented posts in a blog. Other than increasing your blog's pageviews, the most commented post widget in blogger blogs can reduce the blog's bounce rate. Follow the steps below to add one of the best blogger widgets 2017 in your blog.

how to add most commented post widget in blogge blogs

How to Add Most Commented Posts Widget In Blogger Blogs

Step One
  • Navigate to your blogger template
  • Click on 'edit HTML'
  • Using Ctrl + F keys, search for one of these tags

</Group>

 or search for

<b:skin><![CDATA[

  • Copy this code and paste 'below' one of the tags above


<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> 

If you paste the code below </Group> here's an image to show you how to place it



If you place the code below  <b:skin><![CDATA[ here's how it should look like



 Step Two

  • Next, search for this tag ]]></b:skin>
  • Copy the code below and paste 'above'  ]]></b:skin>


.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%;
}

  • Save your template.

                   Numbered Page Navigation Widget For Blogger Blogs
                   Popular Post Widget With Hover Effect For Blogger


Step Three

Next, you'll include the most commented post widget in your blog's layout. To do this, follow these steps:
  • From your blogger dashboard,
  • Navigate to 'layout'.
  • Click on 'add a gadget'
  • Select 'HTML/Javascript' from the options
  • Two codes are provided below. One displays the most commented post with thumbnails, while the other displays it without thumbnails. Copy any of your choice and paste in the text field.

Most Commented Posts Widget For Blogger With Thumbnail 

This displays the most commented posts on your blog with a snippet of the post and the thumbnails.

<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=YOURURL
&NumberofPosts=5
&_id=2cb5eb603ed55a6264ee1484e5fdd45c
&_callback=mostcommented
&_render=json"
type="text/javascript"></script><span style="font-size: 80%; float:left;"><a href="http://www.techlass.com/2015/01/most-commented-posts-widget-blogger-thumbnails.html">Get widget</a></span>

 The number of characters to be displayed as the post snippet has been set to 10, you can change it to your desired number of characters. You can change the number of post to be displayed, which has been set to 5. Also, change the highlighted text in yellow 'YOURURL' with your website's address. 

Most Commented Posts Widget For Blogger Without Thumbnails

The code below displays the most commented posts widget without the thumbnails or post snippet.

<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=YOURURL
&NumberofPosts=5
&_id=2cb5eb603ed55a6264ee1484e5fdd45c
&_callback=mostcommented
&_render=json"
type="text/javascript"></script>
<span style="font-size: 80%; float:left;"><a href="http://www.techlass.com/2015/01/most-commented-posts-widget-blogger-thumbnails.html">Get widget</a></span>


 You can customise the widget by editing the following fields:
  • Change the highlighted text 'YOURURL' with your website's address.
  • To display the phrase 'comments' after the number of comments, replace

<div class="comment-count">' + postComments + "</div>
                              
                                       in the code with

 <div class="comment-count">' + postComments + " comments" + "</div>"
  •  Change the number of comments to be displayed by changing 5 in &NumberofPosts=5 to your desired number of post.
  • Save the widget.
To change the default background colours in this widget, 
  • Goto your 'template'.
  • Click On 'Customise'.
  • Select 'Advanced'.
  • Click on 'most commented'.
  • Select your desired colour for each background.
  • Click on 'Apply to blog'.


Following the steps above, you should be able to add the most commented posts widget in your blog

Do you like this post? Please link back to this article by copying one of the codes below.

URL Of Post:


HTML Link Code:

BB (forum) link code:

Comments