HackingUniversity - Hacks . Tricks . How-To's

08 August 2013

Awesome Styled Recent Comments Widget for Blogger

recent-comments-bloggerRecently I posted Random Posts Widget and Recent Posts Widget for blogger blogs, now today I am posting Recent Comments Widget for blogger that will show all your recently comments you received on your blog, well make sure you are suing Blogger’s official commenting system as it will only work, if you are using Intense Debate or Disqus then you need to grab their official widget from their website, so now the widget I have designed looks somewhat like on the right, so yes the color is chosen from earlier widget’s but it looks sober and clean.

Now as you can see the name of the commenter with the post link will displayed with the message content, whatever he has posted will be displayed with awesome italic font, so it looks just awesome. So now if you think this widget look fabulous well just follow below steps to add it to your Blogger Blog.

  1. Open Blogger > Layout > Gadget > HTML/JavaScript Widget.
  2. Just add below code into it.

    <div id='rcw'><script style=text/javascript src="http://goo.gl/gI85n3"></script><script style=text/javascript >var a_rc=7;var m_rc=false;var n_rc=true;var o_rc=100;</script><script src=http://hackinguniversity.in/feeds/comments/default?alt=json-in-script&callback=showrecentcomments ></script></div><style type=text/css>#rcw{width:300px;border:1px solid #ddd;border-radius:3px;background:#f5f5f5;background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#f1f1f1));background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#f1f1f1));-moz-box-shadow: 0 5px 5px -5px #999;-webkit-box-shadow: 0 5px 5px -5px #999;box-shadow: 0 5px 5px -5px #999;padding:5px}.rcw-comments{border-bottom:1px dashed #aaa;padding-bottom:6px!important;padding-top:6px!important}.rcw-comments a{font-size:12pt;line-height:1.5em}.rcw-comments p{font-family:Georgia}</style>

  3. Now change the webpage URL in Blue to your Blog’s URL and change the comments number displayed in Red color to any number you want.
  4. That’s it now save your widget and refresh your blog to see this awesome widget working perfectly, so now enjoy this awesome widget and do share this post with your friends.