How To Display Close Commented Posts Inwards Blogger

One of the best gadgets for your Blogger spider web log is a pop posts widget for your sidebar. This lets visitors encounter what your trending posts are correct forthwith together with encourages them to click on them to read them. This basic widget is merely a trivial equally good basic, however, for the modern solar daytime website visitor. Not alone produce they desire to encounter your trending posts, but they also desire to bring together the discussions that are happening on your blog. To produce that, you'll require a most commented posts widget for Blogger.

Having a customized widget on your site is a lot easier than you lot powerfulness think. In guild to pick out an effective widget, however, you're going to require a few specific things to assistance you lot out.

Demo

Here's What You're Going To Get

There are for certain aspects inwards the pattern of a most commented posts widget that you lot should expect. That's why you'll honor these specific components alongside this custom widget:

• Ordered past times popularity. The posts that pick out the most comments are the most probable to pick out visitors desire to read the post service together with bring together inwards alongside the conversation. By ordering your posts based on the popularity of them, you'll laissez passer each visitor the peril to encounter what the hype actually is about! This lets you lot pick out a charted graphic that gives a visitor slowly recognition, but also allows you lot to proceed it direct together with aligned if you're looking for a cleaner look.
• Graphic incorporation. Blog posts that pick out at to the lowest degree i graphic incorporated alongside them volition have 100% to a greater extent than traffic than posts that pick out no images at all. For every graphic that you lot include alongside a spider web log post, the to a greater extent than probable you lot are to larn a click! The same is truthful alongside your most commented posts widget, together with thence endure for certain to comprise graphics that stand upward out alongside your design.
• Descriptions that blend in. The network today revolves around the value that you lot tin supply each private user. People don't merely click on things because they human face visually tempting. They click on them because they hope a marker of value that some other website similar yours isn't able to provide. By having descriptions that blend in, you'll endure able to heighten the perceived value that your site tin provide. This leads to to a greater extent than clicks!

Related: Add Multi-Colored Popular Posts to Blogger

Add the Most Commented Posts Widget to Blogger

Step 1. Log inwards to your Blogger account together with larn to Template, press the "Edit HTML" button.

Step 2. Click anywhere within the code surface area together with press the CTRL + F keys to opened upward the Blogger' search box. Type the next tag within it together with striking Enter to honor it:

</Group>

Step 3. Just below </Group>, add together this code:

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

Note: if you lot can't honor the </Group> tag, endeavor to honor the next tag instead together with add together the variables merely below it:

<b:skin><![CDATA[

Step 4. Now search for the next tag (CTRL + F):

]]></b:skin>

Step 5. And merely higher upward it, add together this CSS code:

.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 6. Save the template.

Now, let's add together the Most Commented Posts widget to the Layout of our Blogger blog. Head over to the "Layout" department of your Blogger dashboard together with click on the "Add a gadget" link on the correct side. From the pop-up window, scroll downward the listing together with select the "HTML/JavaScript" gadget:

Copy together with glue this script within the content box:

<script type="text/javascript">
business office stripTags(s,n) {
    homecoming s.replace(/<.*?>/ig,"").split(/\s+/).slice(0,n-1).join(" ")
}
business office 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://helplogger.blogspot.com
&NumberofPosts=5
&_id=2cb5eb603ed55a6264ee1484e5fdd45c
&_callback=mostcommented
&_render=json"
type="text/javascript"></script><span style="font-size: 80%; float:left;"><a href=" ">Add this widget</a></span>

Here, modify http://helplogger.blogspot.com alongside your spider web log URL. If you lot desire to add together to a greater extent than characters to the description, modify the "10" value inwards ruddy from "postDescription,10".

If you lot desire a to a greater extent than elementary human face (without the thumbnails together with post service snippets), add together this script instead:

<script type="text/javascript">
business office stripTags(s,n)
    {
    homecoming s.replace(/<.*?>/ig,"").split(/\s+/).slice(0,n-1).join(" ")
}
business office 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://helplogger.blogspot.com
&NumberofPosts=5
&_id=2cb5eb603ed55a6264ee1484e5fdd45c
&_callback=mostcommented
&_render=json"
type="text/javascript"></script>
<span style="font-size: 80%; float:left;"><a href=" ">Add this widget</a></span>

.... together with supervene upon http://helplogger.blogspot.com alongside your address.
To add together the "comments" text afterward the comments number, supervene upon the trouble inwards red:

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

with:

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

Once you lot pick out finished adding your ain settings, press the "Save" push to enable the gadget inwards the sidebar of your blog. That's it!

To modify the background colors of the most commented posts, larn to "Template" > striking the "Customize" push together with navigate to "Advanced" > "Most Commented" tab. Here you lot tin option v unlike colors past times clicking on the color boxes:

Once you've selected your favorite color scheme, click the "Apply to blog" push to salvage the changes... together with you're done.

Why Use the Most Commented Posts widget?

The basic psychology inwards every human is that they desire to experience similar they belong to a community. That's precisely what this customized widget volition pick out to your site. No affair what content drew a visitor to encounter your content, this widget volition invite them to bring together the lively parts of your spell of the internet. This helps to construct relationships, alongside you lot together with alongside other visitors, together with this relationship-building appointment is what you lot require to commencement having existent value.

Take the fourth dimension to install this most commented posts widget on your site together with you'll encounter for yourself why this is i of the most useful widgets that is available correct now. Enjoy ;)

Share this post