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">Look below for example:
<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 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.
/*****************************************Now Save the Template..!
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%;
}
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>"
- 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.