How to make the Most Commented widget on Blogger

By default, widgets with the type of post list provided in blogger are only popular posts widgets and archive widgets. In this post, I will add another widget with a list type of post, which is a widget that sorts the posts from the most commented by displaying the number of comments.

This widget was created by the owner Blog mybloggertricks.com using an existing script from Yahoo. With a style that is quite elegant and has bubbles that contain a number of comments, this widget is great for displaying on your blog.

This widget is very useful to trigger visitors to participate in discussions on the most posts posted on the commentary. As a result, your old posts will always be updated because there are new commentators. Keep in mind that pages that are updated on your blog are usually preferred by search engines, even if the posts are made a long time ago.

Well, to add the widgets list to the most posts in this comment, please follow the steps below:

1. Log in to Blogger dashboard> Select Blog> Layout

2. Click Add a Gadget

3. Select HTML / JavaScript

4. Enter the code below:

Code Description:

<style>
.commentbubble {
background: #292D30;
width: 49px;
float: left;
margin: 2px 20px 35px 0px;
font-weight: bold;
font-size: 1.3em;
text-align: right;
font-family: georgia,Helvetica;
padding: 0px 0px 5px 0px;
text-align: right;
color: #FFF;
text-shadow: 4px 1px #202022;
position: relative;
top: 5px;}
.commentbubble:after {
content: ‘ ‘;
position: absolute;
width: 0;
height: 0;
right: 0px;
top: 100%;
border-width: 5px 8px;
border-style: solid;
border-color: #292D30 #292D30 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
top: 34px;
right: 6px;
}
</style><script type=”text/javascript”>
function getYpipePP(feed) {
document.write(‘<ul style=”list-style:none; “>’);
var i;
for (i = 0; i < feed.count ; i++)
{
var href = “‘” + feed.value.items[i].link + “‘”;
var pTitle = feed.value.items[i].title;
var pComment = + feed.value.items[i].commentcount;
var pList = ‘<li style=”clear:both; padding:10px 0px 30px 0px!important; border-bottom: 1px dashed #dedede; line-height:2em; “> <div class=”commentbubble”>’ +pComment + “  </div>” + “<a href=”+ href + ‘” target=”_blank”>’ + pTitle ;
document.write(pList);
//to remove comment count delete this line
document.write(‘</a></li>’);
}
document.write(‘</ul>’);
}
</script>
<script src=”http://pipes.yahoo.com/pipes/pipe.run?
YourBlogUrl=https://eyed10tjones.blogspot.com/
&ShowHowMany=6
&_id=390e906036f48772b2ed4b5d837af4cd
&_callback=getYpipePP
&_render=json”
type=”text/javascript”></script>

– Before adding to the new widget, you should paste the code above into notepad first, in order to delete all font styles that have been carried over from this blog.

– Change "https://eyed10tjones.blogspot.com/" with the URL of your blog

– In section ShowHowMany = 6, replace number 6 according to the number of posts you want to display.

– The code that I highlighted in yellow, it is the colour code for the bubble that contains the number of comments per post. Please change according to your taste. Use Tools Color picker to get the colour code

– Change the code # dedede If you want to change the colour of the dotted lines under each post title

5. Click Save, and the widget has been added.

If you have questions, please ask in the comments.

That is all, Hope it is useful

Share this post