Add Multi Color Most Commented Posts Widget in Blogger

This is a most attractive gadget for your blogger blog is a Multi-Color Most Commented posts widget for your blog sidebar. Visitors see your trending posts and want to join the discussion that is happening on your blog. To do that, you will need a most commented posts widget in Blogger.

Having a customized widget on your site is a lot easier than you might think. In order to have an effective widget, however, you are going to need a few specific things to help you out.

Add the Most Commented Posts Widget to Blogger

Step 1. 

Go to Template -- > Edit Template
Press CTRL + F key to open the blogger ‘search box’ and type the following tag and hit enter to find it:

<b:skin><![CDATA[

Step 2.

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

Step 3. 

Now search the following tag (CTRL + F)

]]></b:skin>

Step 4.

Add this code just above it:

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

Step 5. 

Save the Template

Now, let’s add the Most Commented Posts widget to the Layout of your blogger blog. Head over to the “Layout” section of your blogger dashboard and click on the “Add a gadget” link on the right side. From the pop-up window, Scroll down the list and select the “HTML/JavaScript” gadget.

Copy and paste this script inside the content box.

<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://www.itroshni.blogspot.com
&NumberofPosts=5
&_id=2cb5eb603ed55a6264ee1484e5fdd45c
&_callback=mostcommented
&_render=json"
type="text/javascript"></script><span style="font-size: 80%; float:left;"><a href="http://helplogger.blogspot.com/2014/08/most-commented-posts-blogger-widget.html">Add this widget</a></span>

Change http://www.itroshni.blogspot.com with your blog URL.
If you want to add more characters to the description modify the “10” value in red from “postDescription,10”

If you want a more simple look (without the thumbnails and post snippets), add this script instead:

<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://www.itroshni.blogspot.com
&NumberofPosts=5
&_id=2cb5eb603ed55a6264ee1484e5fdd45c
&_callback=mostcommented
&_render=json"
type="text/javascript"></script>
<span style="font-size: 80%; float:left;"><a href="http://helplogger.blogspot.com/2014/08/most-commented-posts-blogger-widget.html">Add this widget</a></span>

And replace http://www.itroshni.blogspot.com with your URL

To add the "comment" text after the comments number, Replace the line in red.

<div class="comment-count">' + postComments + "</div>"

With this code:

<div class="comment-count">' + postComments + " comments" + "</div>"

Once you have finished adding your own settings, press the “Save” button to the gadget in the sidebar of your blog. That’s it.!

To change the background colors of the most commented posts, go to “Template” > hit the “Customize” button and navigate to “Advanced” > “Most Commented” tab. Here you can pick 5 different colors by clicking on the color boxes.

Once you’ve selected your favorite color scheme, click the “Apply to blog” button to save the changes and you’re done.