Most Commented Posts Widget For Blogger With Thumbnails andrey понедельник, 12 января 2015 г. No Comment

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.

 Also Read: How to Add Yahoo Smileys In Blogger Threaded Comment

                     How to Add Different Background Image In Specific Blogger Page

                     How to Add Read More Attribution Links to Copied Text in Blogger 

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

 or search for

• Copy this code and paste 'below' one of the tags above

 description="Most Commented" selector=".most-commented">
 name="most.commented.background1" description="background color1" type="color" default="#fa4242" value="#ee377a"/>
 name="most.commented.background2" description="background color2" type="color" default="#ee6107" value="#fcad37"/>
 name="most.commented.background3" description="background color3" type="color" default="#f0f" value="#f8e000"/>
 name="most.commented.background4" description="background color4" type="color" default="#ff0" value="#c7e93d"/>
 name="most.commented.background5" description="background color5" type="color" default="#0ff" value="#5ebded"/>
 

If you paste the code below here's an image to show you how to place it

If you place the code below  here's how it should look like

 Step Two

• Next, search for this tag ]]>
• Copy the code below and paste 'above'  ]]>

.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

                   Numbered Page Navigation Widget For Blogger Blogs

                   Popular Post Widget With Hover Effect 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.

 style="font-size: 80%; float:left;"> href="http://www.detutor.com/2015/01/most-commented-posts-widget-blogger-thumbnails.html">Get widget

 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.

 style="font-size: 80%; float:left;"> href="http://www.detutor.com/2015/01/most-commented-posts-widget-blogger-thumbnails.html">Get widget

 You can customise the widget by editing the following fields:

• Change the highlighted text 'YOURURL' with your website's address.

• To display the phrase 'comments' after the number of comments, replace

' + postComments + "

                               in the code with

 

' + postComments + " comments" + "

"

•  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'.

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.

 Also Read: How to Add Yahoo Smileys In Blogger Threaded Comment

                     How to Add Different Background Image In Specific Blogger Page

                     How to Add Read More Attribution Links to Copied Text in Blogger 

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

 or search for

• Copy this code and paste 'below' one of the tags above

 description="Most Commented" selector=".most-commented">
 name="most.commented.background1" description="background color1" type="color" default="#fa4242" value="#ee377a"/>
 name="most.commented.background2" description="background color2" type="color" default="#ee6107" value="#fcad37"/>
 name="most.commented.background3" description="background color3" type="color" default="#f0f" value="#f8e000"/>
 name="most.commented.background4" description="background color4" type="color" default="#ff0" value="#c7e93d"/>
 name="most.commented.background5" description="background color5" type="color" default="#0ff" value="#5ebded"/>
 

If you paste the code below here's an image to show you how to place it

If you place the code below  here's how it should look like

 Step Two

• Next, search for this tag ]]>
• Copy the code below and paste 'above'  ]]>

.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

                   Numbered Page Navigation Widget For Blogger Blogs

                   Popular Post Widget With Hover Effect 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.

 style="font-size: 80%; float:left;"> href="http://www.detutor.com/2015/01/most-commented-posts-widget-blogger-thumbnails.html">Get widget

 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.

 style="font-size: 80%; float:left;"> href="http://www.detutor.com/2015/01/most-commented-posts-widget-blogger-thumbnails.html">Get widget

 You can customise the widget by editing the following fields:

• Change the highlighted text 'YOURURL' with your website's address.

• To display the phrase 'comments' after the number of comments, replace

' + postComments + "

                               in the code with

 

' + postComments + " comments" + "

"

•  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'.

Tweet

by Jillur Rahman

Jillur Rahman is a Web designers. He enjoys to make blogger templates. He always try to make modern and 3D looking Templates. You can by his templates from Themeforest.

Follow him @ Twitter | Facebook | Google Plus

Tags: Без рубрики