Add Most

Want to add Most Commented Posts Widget in Blogger as you have seen in many popular blogs then this step by step procedure will show you how to add most commented post in blogger. One of the best widget for your blogger blog sidebar is popular post widget. This widget lets your blog visitors to see your blog trending posts and encourages them to read it by clicking on them. That popular post widget is just a basic widget. And now-a-days, when visitors visit the blog, they not only interested in a new or a popular post, but also in the most-commented issues. That are the latest and highly discussed issues of your blog. So to serve such visitors, the creation of the most commented post widget is imperative. For despite its importance, the most commented post widget is not present among other widgets of blogger. By creating the customized most commented posts widget. You will invite your blog users towards most commented posts to take their feedback too. And it will also boost the threaded comments system of your blog. Having a customized widget for your blogger blog is a lot easier then you might think.

Here's What You're Going To Get

There are certain aspects in the design of a multi colored most commented posts widget that you should expect. That's why you'll find these specific components with this custom widget

Ordered by popularity. The posts that have the most comments are the most likely to have visitors want to read the post and join in with the conversation. By ordering your posts based on the popularity of them, you'll give each visitor the chance to see what the hype really is about. This lets you have a charted graphic that gives a visitor easy recognition, but also allows you to keep it straight and aligned if you're looking for a cleaner look.

Image incorporation. Blog posts that have at least one image incorporated with them will receive more traffic compared to posts that have no images. For every image that you include with a blog post, the more likely you are to get a click. The same is true with your most commented posts widget, so be sure to incorporate image that stand out with your design. If your post has no image, a default image is incorporated in the widget showing no posts image in it.


How to add most commented posts widget to Blogger

Now I will tell you how to add most commented posts widget to Blogger. You just need to login to your Blogger account with your associated Gmail ID. It will display the list of blogs in the Blogger dashboard. Now select your required blog from the list to proceed further. Press Template option from the left-hand menu and click Edit HTML and then search for the code shown below by pressing Ctrl+F.

]]></b:skin>

Now Paste the Code Shown Below just above/before it

/*  <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"/>
<Variable name="most.commented.background6" description="background color6" type="color" default="#0ff" value="#f8e000"/>
<Variable name="most.commented.background7" description="background color7" type="color" default="#0ff" value="#c7e93d"/>
<Variable name="most.commented.background8" description="background color8" type="color" default="#0ff" value="#ee92b4"/>
<Variable name="most.commented.background9" description="background color9" type="color" default="#0ff" value="#ff8832"/>
<Variable name="most.commented.background10" description="background color10" type="color" default="#0ff" value="#5ebded"/>
</Group>   */
#top-commented ul li:nth-child(2){background:$(most.commented.background1);width:100%}
#top-commented ul li:nth-child(3){background:$(most.commented.background2);width:98%}
#top-commented ul li:nth-child(4){background:$(most.commented.background3);width:96%}
#top-commented ul li:nth-child(5){background:$(most.commented.background4);width:94%}
#top-commented ul li:nth-child(6){background:$(most.commented.background5);width:92%}
#top-commented ul li:nth-child(7){background:$(most.commented.background6);width:90%}
#top-commented ul li:nth-child(8){background:$(most.commented.background7);width:88%}
#top-commented ul li:nth-child(9){background:$(most.commented.background8);width:86%}
#top-commented ul li:nth-child(10){background:$(most.commented.background9);width:84%}
#top-commented ul li:nth-child(11){background:$(most.commented.background10);width:82%}
#top-commented ul li{height:87px!important}
.topcomment{width:70px;height:70px;margin:8px 0 8px 8px}
div#top-commented{max-width:280px;margin:0 auto}
#top-commented ul{padding:0}
#top-commented ul,#top-commented li,#top-commented ul li{list-style:none;text-align:center;font-family:'Open Sans',Helvetica,Arial,sans-serif;font-size:12px}
#top-commented ul li{position:relative;overflow:hidden}
#top-commented ul li a{text-decoration:none;color:#444}
#top-commented .post-snippet{margin:-75px 30px 0 81px}
.count-most{position:absolute;right:0;top:7px;width:32px;height:32px;border-radius:250px;text-align:center;background-color:#434343;color:#fff!important;vertical-align:middle;display:block;line-height:2.6}

Now save your template

Now, let's add the Most Commented Posts widget to the Layout of our Blogger blog. Head over to the "Layout" section of your Blogger dashboard and click on the "Add a gadget" link on the right side. From the pop-up window, scroll down the list and select the "HTML/JavaScript" gadget

multi-colored-most-commented-posts

Copy and paste this script inside the content box

<script>
    //<![CDATA[
    var numPosts = 10;
    var url = "howbloggers.com";
    var _0xe95a=["\x3C\x64\x69\x76\x20\x69\x64\x3D\x22\x74\x6F\x70\x2D\x63\x6F\x6D\x6D\x65\x6E\x74\x65\x64\x22\x3E\x3C\x75\x6C\x3E","\x77\x72\x69\x74\x65","\x6C\x65\x6E\x67\x74\x68","\x65\x6E\x74\x72\x79","\x66\x65\x65\x64","\x24\x74","\x74\x69\x74\x6C\x65","\x6C\x69\x6E\x6B","\x72\x65\x6C","\x61\x6C\x74\x65\x72\x6E\x61\x74\x65","\x68\x72\x65\x66","\x72\x65\x70\x6C\x69\x65\x73","\x74\x79\x70\x65","\x74\x65\x78\x74\x2F\x68\x74\x6D\x6C","\x20","\x73\x70\x6C\x69\x74","\x2F\x73\x37\x32\x2D\x63\x2F","\x2F\x77","\x2D\x68","\x2D\x63\x2F","\x72\x65\x70\x6C\x61\x63\x65","\x75\x72\x6C","\x6D\x65\x64\x69\x61\x24\x74\x68\x75\x6D\x62\x6E\x61\x69\x6C","\x63\x6F\x6E\x74\x65\x6E\x74","\x3C\x69\x6D\x67","\x69\x6E\x64\x65\x78\x4F\x66","\x73\x72\x63\x3D\x22","\x22","\x73\x75\x62\x73\x74\x72","","\x68\x74\x74\x70\x3A\x2F\x2F\x34\x2E\x62\x70\x2E\x62\x6C\x6F\x67\x73\x70\x6F\x74\x2E\x63\x6F\x6D\x2F\x2D\x54\x4F\x55\x31\x50\x31\x76\x6C\x4B\x35\x59\x2F\x56\x76\x4C\x52\x44\x63\x42\x57\x56\x47\x49\x2F\x41\x41\x41\x41\x41\x41\x41\x41\x41\x50\x34\x2F\x55\x58\x45\x53\x79\x39\x33\x50\x2D\x43\x34\x6F\x4D\x50\x52\x66\x47\x75\x62\x75\x75\x75\x79\x55\x33\x33\x4F\x54\x51\x4A\x58\x36\x41\x2F","\x77","\x6E\x6F\x2D\x69\x6D\x61\x67\x65\x2D\x68\x6F\x77\x62\x6C\x6F\x67\x67\x65\x72\x73\x2E\x6A\x70\x67","\x70\x75\x73\x68","\x3C\x6C\x69\x3E\x3C\x64\x69\x76\x20\x69\x64\x3D\x22\x74\x6F\x70\x63\x6F\x6D\x6D\x65\x6E\x74\x65\x64\x22\x3E\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x22\x74\x6F\x70\x63\x6F\x6D\x6D\x65\x6E\x74\x22\x3E\x3C\x61\x20\x68\x72\x65\x66\x3D\x22","\x22\x20\x74\x69\x74\x6C\x65\x3D\x22","\x22\x20\x74\x61\x72\x67\x65\x74\x3D\x22\x5F\x62\x6C\x61\x6E\x6B\x22\x3E\x3C\x69\x6D\x67\x20\x20\x77\x69\x64\x74\x68\x3D\x20\x22","\x22\x20\x68\x65\x69\x67\x68\x74\x3D\x20\x22","\x22\x20\x73\x72\x63\x3D\x22","\x22\x20\x61\x6C\x74\x3D\x22","\x22\x2F\x3E\x3C\x2F\x64\x69\x76\x3E\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x22\x70\x6F\x73\x74\x2D\x73\x6E\x69\x70\x70\x65\x74\x22\x3E","\x3C\x2F\x64\x69\x76\x3E\x3C\x73\x70\x61\x6E\x20\x63\x6C\x61\x73\x73\x3D\x22\x63\x6F\x75\x6E\x74\x2D\x6D\x6F\x73\x74\x22\x3E","\x3C\x2F\x73\x70\x61\x6E\x3E\x3C\x2F\x61\x3E\x3C\x2F\x64\x69\x76\x3E","\x3C\x73\x63\x72\x69\x70\x74\x20\x73\x72\x63\x3D\x22\x68\x74\x74\x70\x3A\x2F\x2F","\x2F\x66\x65\x65\x64\x73\x2F\x70\x6F\x73\x74\x73\x2F\x64\x65\x66\x61\x75\x6C\x74\x3F\x6D\x61\x78\x2D\x72\x65\x73\x75\x6C\x74\x73\x3D\x39\x39\x39\x39\x26\x6F\x72\x64\x65\x72\x62\x79\x3D\x70\x75\x62\x6C\x69\x73\x68\x65\x64\x26\x61\x6C\x74\x3D\x6A\x73\x6F\x6E\x2D\x69\x6E\x2D\x73\x63\x72\x69\x70\x74\x26\x63\x61\x6C\x6C\x62\x61\x63\x6B\x3D\x6D\x6F\x73\x74\x43\x6F\x6D\x6D\x65\x6E\x74\x22\x3E\x3C\x2F\x73\x63\x72\x69\x70\x74\x3E","\x3C\x2F\x6C\x69\x3E","\x3C\x2F\x75\x6C\x3E","\x3C\x73\x70\x61\x6E\x20\x73\x74\x79\x6C\x65\x3D\x22\x66\x6F\x6E\x74\x2D\x66\x61\x6D\x69\x6C\x79\x3A\x20\x41\x72\x69\x61\x6C\x2C\x54\x61\x68\x6F\x6D\x61\x3B\x20\x20\x20\x20\x66\x6F\x6E\x74\x2D\x73\x69\x7A\x65\x3A\x20\x39\x70\x78\x3B\x70\x61\x64\x64\x69\x6E\x67\x2D\x74\x6F\x70\x3A\x20\x37\x70\x78\x3B\x64\x69\x73\x70\x6C\x61\x79\x3A\x20\x62\x6C\x6F\x63\x6B\x22\x3E\x3C\x61\x20\x68\x72\x65\x66\x3D\x22\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x68\x6F\x77\x62\x6C\x6F\x67\x67\x65\x72\x73\x2E\x63\x6F\x6D\x2F\x32\x30\x31\x36\x2F\x30\x33\x2F\x61\x64\x64\x2D\x6D\x6F\x73\x74\x2D\x63\x6F\x6D\x6D\x65\x6E\x74\x65\x64\x2D\x70\x6F\x73\x74\x73\x2D\x69\x6E\x2D\x62\x6C\x6F\x67\x73\x70\x6F\x74\x2E\x68\x74\x6D\x6C\x22\x3E\x2B\x47\x72\x61\x62\x20\x54\x68\x69\x73\x3C\x2F\x61\x3E\x3C\x2F\x73\x70\x61\x6E\x3E\x3C\x2F\x64\x69\x76\x3E"];var width=70;var height=70;var postTitle= new Array();var postUrl= new Array();var postComment= new Array();var postThumb= new Array();var totalpost;document[_0xe95a[1]](_0xe95a[0]);function mostComment(_0x7331x9){var _0x7331xa=_0x7331x9[_0xe95a[4]][_0xe95a[3]][_0xe95a[2]];totalpost=_0x7331xa;for(var _0x7331xb=0;_0x7331xb<_0x7331xa;_0x7331xb++){var _0x7331xc=_0x7331x9[_0xe95a[4]][_0xe95a[3]][_0x7331xb];var _0x7331xd=_0x7331xc[_0xe95a[6]][_0xe95a[5]];var _0x7331xe;if(_0x7331xb==_0x7331x9[_0xe95a[4]][_0xe95a[3]][_0xe95a[2]]){break};for(var _0x7331xf=0;_0x7331xf<_0x7331xc[_0xe95a[7]][_0xe95a[2]];_0x7331xf++){if(_0x7331xc[_0xe95a[7]][_0x7331xf][_0xe95a[8]]==_0xe95a[9]){g=_0x7331xc[_0xe95a[7]][_0x7331xf][_0xe95a[10]];break}};for(var _0x7331xf=0;_0x7331xf<_0x7331xc[_0xe95a[7]][_0xe95a[2]];_0x7331xf++){if(_0x7331xc[_0xe95a[7]][_0x7331xf][_0xe95a[8]]==_0xe95a[11]&&_0x7331xc[_0xe95a[7]][_0x7331xf][_0xe95a[12]]==_0xe95a[13]){_0x7331xe=_0x7331xc[_0xe95a[7]][_0x7331xf][_0xe95a[6]][_0xe95a[15]](_0xe95a[14])[0]}};var _0x7331x10;try{_0x7331x10=_0x7331xc[_0xe95a[22]][_0xe95a[21]][_0xe95a[20]](_0xe95a[16],_0xe95a[17]+width+_0xe95a[18]+height+_0xe95a[19])}catch(error){ss=_0x7331xc[_0xe95a[23]][_0xe95a[5]];aa=ss[_0xe95a[25]](_0xe95a[24]);bb=ss[_0xe95a[25]](_0xe95a[26],_0x7331xa);cc=ss[_0xe95a[25]](_0xe95a[27],_0x7331xe+5);dd=ss[_0xe95a[28]](bb+5,cc-bb-5);if((aa!= -1)&&(bb!= -1)&&(cc!= -1)&&(dd!=_0xe95a[29])){_0x7331x10=dd}else {_0x7331x10=_0xe95a[30]+_0xe95a[31]+width+_0xe95a[18]+height+_0xe95a[19]+_0xe95a[32]}};postTitle[_0xe95a[33]](_0x7331xd);postThumb[_0xe95a[33]](_0x7331x10);postUrl[_0xe95a[33]](g);postComment[_0xe95a[33]](_0x7331xe)};sortPosts();for(var _0x7331xb=0;_0x7331xb<numPosts;_0x7331xb++){var _0x7331x11=_0xe95a[34]+postUrl[_0x7331xb]+_0xe95a[35]+postTitle[_0x7331xb]+_0xe95a[36]+width+_0xe95a[37]+height+_0xe95a[38]+postThumb[_0x7331xb]+_0xe95a[39]+postTitle[_0x7331xb]+_0xe95a[40]+postTitle[_0x7331xb]+_0xe95a[41]+postComment[_0x7331xb]+_0xe95a[42];document[_0xe95a[1]](_0x7331x11)}}function sortPosts(){function _0x7331xd(_0x7331xf,_0x7331xb){var _0x7331x11=postTitle[_0x7331xf];postTitle[_0x7331xf]=postTitle[_0x7331xb];postTitle[_0x7331xb]=_0x7331x11;var _0x7331x11=postUrl[_0x7331xf];postUrl[_0x7331xf]=postUrl[_0x7331xb];postUrl[_0x7331xb]=_0x7331x11;var _0x7331x11=postComment[_0x7331xf];postComment[_0x7331xf]=postComment[_0x7331xb];postComment[_0x7331xb]=_0x7331x11;var _0x7331x11=postThumb[_0x7331xf];postThumb[_0x7331xf]=postThumb[_0x7331xb];postThumb[_0x7331xb]=_0x7331x11}for(var _0x7331xe=0;_0x7331xe<postTitle[_0xe95a[2]]-1;_0x7331xe++){for(var _0x7331xa=_0x7331xe+1;_0x7331xa<postTitle[_0xe95a[2]];_0x7331xa++){if(parseInt(postComment[_0x7331xe])<parseInt(postComment[_0x7331xa])){_0x7331xd(_0x7331xe,_0x7331xa)}}}}document[_0xe95a[1]](_0xe95a[43]+url+_0xe95a[44]);document[_0xe95a[1]](_0xe95a[45]);document[_0xe95a[1]](_0xe95a[46]);document[_0xe95a[1]](_0xe95a[47])
    //]]>
</script>

Change howbloggers.com with your blog url and 10 is the number of posts you want to display. Now press the "Save" button to enable the gadget in the sidebar of your blog.

To change the background colors of the most commented posts, go to "Template" click on the "Customize" button and navigate to "Advanced" > "Most Commented" tab. Here you can pick 10 different colors by clicking on the color boxes.

most-commented-popular-post

Once you've selected your favorite color scheme, click the "Apply to blog" button to save the changes and you're done.