Skip to content Skip to sidebar Skip to footer

How to Display Most Commented Posts in Blogger

One of the best widgets for your Blogger blog is the popular Sidebar Posts Widget. This allows visitors to see which of your posts are currently trending and encourages them to click on them to read them. However, this basic widget is too simple for modern website visitors. Not only do they want to see your popular posts, but they also want to join the discussion happening on your blog. For this you will need Blogger's Top Comments widget.

Having a custom widget on your website is easier than you think. However, in order to have an effective widget, you need a few special things to help you.

most commented posts widget

Demo:

This is what you get

There are certain aspects of post widget design that generate the most comments you should expect. That's why you will find these special components with this particular widget.
  • Ranked by popularity. Posts with the most comments are more likely to read the post and join the conversation. By ranking your posts by popularity, you'll give every visitor a chance to see what it's all about. This allows you to have a map graphic that visitors can easily recognize, but also allows you to keep it straight and consistent if you want a cleaner look.
  • Graphic input. Blog posts that contain at least one image will get 100% more traffic than posts with no image at all. For every image you include in your blog post, you are more likely to get clicks. The same goes for your most commented post widget, so be sure to include graphics that stand out in your design.
  • Combined images. The internet today revolves around the value you can offer each user. People don't just click on things because they look attractive. They click on them because they promise a level of value that another site like yours can't deliver. By having images that match each other, you will increase the perceived value of your website. This leads to more clicks.
Changes. Added colorful trending posts to Blogger

Add the most commented posts widget to Blogger

Step 1: Login to your Blogger account and go to Template, click on Edit HTML button.

Step 2: Click anywhere in the code area and press CTRL + F to open the Blogger search window. Enter the following label and press Enter to find:
Step 3: A little below , add this code.







add code to blogger html
Note: If you do not have instead, try to find the following tag and add the variables directly below it:
<![CDATA[

Step 4: Now find the following label (CTRL + F).
]]>:
Step 5: And add this CSS code above:
.comment-count {
paragraph: 3px by 10px;
background: #fff;
color: #000;
font-size: 10px;
driver: right;
}

.most comments ul {
padding: 0px !important;
font family: Century Gothic, sans serif;
}

.most comments ul li {
list style type: no;
paragraph: 10px;
color: #555;
top margin: -10px;
}

.most comments ul li a {
color: #444;
font-weight: bold;
text format: no;
font size: 11px;
}

.most comments ul li img {
left to drive
margins: 0px 5px 0px 0px;
width: 60px;
height: 60px;
}

.most comments: nth child (3n + 0) {
background: $ (most comments: background1);
width: 100%;
}

.most comments: nth child (4n + 0) {
background : $ ( most commented . background2 );
width: 95%;
}

Most Commented: nth child (5n + 0) {
background: $(most commented.background3);
width: 90%;
}

.most comments: nth child (6n + 0) {
background: $(most commented.background4);
width: 85%;
}

.most comments: nth child (7n + 0) {
background: $(most commented.background5);
width: 80%;
}
Step 6: Save the template.

Now let's add the most commented posts widget to our Blogger blog layout. Go to the Layout section of the Blogger Toolbar and click the Add Widget link on the right. In the pop-up window, scroll down and select the HTML/JavaScript device:

blogger html javascript gadget

Copy and paste this script into the content area:

Add this widget
Here , replace http://helplogger.blogspot.com with your blog URL . If you want to add more characters to the description, change the " 10 " value to red " postDescription, 10 ".

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


Add this widget
.... and change http: //helplogger.blogspot.com to .
To add the text "comment" after the comment number, replace the line with red:
"+Write a comment+"
"
with
' + comment + "comments" + "
"
When you're done adding your customizations, click Save to activate the widget on your blog's sidebar. This is so.

configure html javascript gadget

To change the background color of the most commented posts, go to Theme > Customize and go to the Advanced > Most Commented tab. Here you can choose 5 different colors by clicking on the color boxes;

blogger template designer

Once you've chosen your preferred color scheme, click Apply Blog to save your changes... and that's it!

Why should you use the most commented posts widget?

The basic psychology of every person is that they want to feel a sense of belonging to a community. That's exactly what this custom widget will bring to your site. No matter what kind of content attracts visitors to your content, this widget will invite them to join live parts of your web. It helps build relationships with you and other visitors, and that relationship-building interaction is what you need to get real value.

Take the time to install this highly commented widget on your site and you'll see why it's one of the most useful widgets out there. Enjoy ;)

Post a Comment for "How to Display Most Commented Posts in Blogger"