Thursday, November 12, 2015
Most Commented Posts Widget For Blogger With Thumbnails
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 2015 in your blog.
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><
If you place the code below <b:skin><
- 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.
Also Read: Customised Author Bio Box Widget 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.informationtutorial15.blogspot.com/2015/11/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.informationtutorial15.blogspot.com/2015/11/most-commented-posts-widget-blogger-thumbnails.html">Get widget</a></span>
- 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'.
