Most Commented Posts

AFTER share about How to Display Colored Random Posts Widget, direct CB Continue with sharing about How to Display the Most Commented Posts (Most Commented Posts) like the one CB put in the sidebar. Just in case anyone is interested in installing it.

Its function is to install a widget that lists the most commented blog posts, the same as Random Posts, Related Posts, Popular Posts, and Recent Posts, namely as blog navigation and internal links to increase Pageviews, Traffic, and make it easier for visitors to find the info they are looking for.

The touch of a “multicolored” background color is only a “sweetener” to attract more attention.

CB get How to Show this Most Commented Post from Help Blogger. You can also head there for the guide.

How to Display Most Commented Blog Posts

1. Click “Template” > “Edit HTML”

2. Search (CTRL+F) code and Copy the following code below it. If there is no code in your template, then look for the code dan Copas kode berikut ini di bawahnya.

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

3. Cari kodeĀ ]]> and Copy the following code above it:

.comment-count {

padding: 3px 10px;

background: #fff;

colors: #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;

colors: #555;

margin-top: -10px;


.most-commented ul li a {

colors: #444;

font-weight: bold;

text-decoration: none;

font-size: 11px;


.most-commented ul li img {

float: left;

margins: 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%;


4. Click SAVE Templates !!!

At this point you have entered the Most Commented Post CSS code in your blog template. Then back to the Blog Dashboard again.

5. Click the menu “Layout” (Layout) > “Add a Gadget” > select “Javascript/HTML

6. Copy + Paste the following code in the box provided:

Most Commented Posts

7. Change with your blog address.

8. Save!

Congratulations, you have installed the Most Commented Posts list widget in the sidebar that can make visitors feel more at home on your blog!


To CHANGE the background COLOR:

1. Click “Template” > “Customize”

2. Click “Advanced” > “Most Commented”

3. Please choose your favorite color.

4. Save by clicking the “Apply to Blog” menu

Good Luck!