--> Most Commented Posts Widget for Blogger with Comment bubbles! | Experience Lab - Online business creation and development guide for bloggers and startups

Most Commented Posts Widget for Blogger with Comment bubbles!

Most of you requested how we created the Most commented widget that shows the list of Top10 most popular posts sorted by comment bubbles. Yo...

most commented widget for bloggerMost of you requested how we created the Most commented widget that shows the list of Top10 most popular posts sorted by comment bubbles. You can see this widget on our sidebar under the heading "Most Discussed". What we did here was using existing script from Yahoo! Pipes that uses json to parse and display each post with highest number of comments posted on it. Using CSS3 pseudo properties, we then styled the comment count with comment bubbles. This widget is simply a copy-paste tool that can be installed within seconds. Lets add this dynamic and fast loading widget to your blogger blogs!

Looking for how we created that ribbon style background for this widget? Then try this:

Check Also:

Add Most Commented Widget to Blogger

  1. Go to Blogger > Layout
  2. Click "Add a Gadget"
  3. Choose HTML/JavaScript widget
  4. Paste the Following code inside it:

<style>

/* ######### Most Commented Widget by MBT ##########*/
.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 +  "&#160;&#160;</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=http://www.mybloggertricks.com
&ShowHowMany=6
&_id=390e906036f48772b2ed4b5d837af4cd
&_callback=getYpipePP
&_render=json"
type="text/javascript"></script>

 

Make these small changes:

  • Replace with your Blog URL  http://www.mybloggertricks.com  
  • Replace this 6 with how many post titles you wish to display in the list.
  • To change the background color of the comment bubbles, Simply replace the yellow highlighted hexadecimal color codes ( #292D30 ) with your custom color.
  • To change the Text color of the Comment count Replace #FFF.
  • Replace #dedede if you wish to change the border color that appears below each post title. If you don't want to show a border below each list item then simply delete this line:  border-bottom: 1px dashed #dedede; 

  5. Save and you are all done!

Visit your blog and see a beautiful list of Populat Posts with Fancy comment bubbles! :)

Need help?

I hope your readers find this widget useful and this may further help in engaging your readers more on your blog and in building rich pageviews. Do let me know if you needed any help.

In our next post we will learn how to create that canopy style Header for widgets in blogger without using a single image. Stay tuned! Peace and blessings buddies. :)

COMMENTS

Name

Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,70,Blogging tips,198,Bugs and Errors,34,Business,4,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,Internet,1,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,307,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Technology,3,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
ltr
item
Experience Lab - Online business creation and development guide for bloggers and startups: Most Commented Posts Widget for Blogger with Comment bubbles!
Most Commented Posts Widget for Blogger with Comment bubbles!
http://lh4.ggpht.com/-sTQAhbjyHbw/U3zcRTCet-I/AAAAAAAANcA/bac13j4Vys8/image%25255B18%25255D.png?imgmax=800
http://lh4.ggpht.com/-sTQAhbjyHbw/U3zcRTCet-I/AAAAAAAANcA/bac13j4Vys8/s72-c/image%25255B18%25255D.png?imgmax=800
Experience Lab - Online business creation and development guide for bloggers and startups
https://www.experiencelab.info/2014/05/most-commented-posts-widget-for-blogger.html
https://www.experiencelab.info/
https://www.experiencelab.info/
https://www.experiencelab.info/2014/05/most-commented-posts-widget-for-blogger.html
true
2959477579779989044
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy