Add Disqus Recent Comments Widget to Blogger

Disqus Recent Comments Widget
Today, we will learn a simple and useful tutorial on how to add an attractive and fast-loading Disqus Recent Comments widget on a Blogger blog. Widgets like these let readers know about the conversations going on at your blog, and if you're fairly active, it adds up to a good impression. This widget in question is well-scripted and the JavaScript is hosted at Disqus so as to reduce the load time on your blog. So lets learn how to add it to blogger.

Adding Disqus Recent Comments Widget to Blogger

You can add this widget code inside any text/html block inside your blog.
  • Go to Blogger >> Layout
  • Click on Add a Gadget
  • Choose the HTML/JavaScript widget
HTML/JavaScript Widget
  • Now add it anywhere you like on your blog
Now copy and paste the following code inside the HTML/JS widget.
<div id="RecentComments" class="dsq-widget">
<script type="text/javascript" src="http://smartearningmethods.disqus.com/recent_comments_widget.js?num_items=5&hide_mods=0&hide_avatars=0&avatar_size=32&excerpt_length=50"></script>
</div>
The code above contains a URL. You need to change the text in bold with your own domain name (yourdomain.disqus.com).

Configuration

After the ? in the URL, you can see a bunch of parameters. These are used to customize the functionality of the widget. Here is a brief description for each of them.
  • num_items - Number of comments to show in the widget
  • hide_mods - Hide moderators' comments (1 for hidden, 0 for disabled)
  • hide_avatars - Hide display images (1 for hidden, 0 for shown)
  • avatar_size - Avatar size in pixels (32 by default)
  • excerpt_length - Character-length of the excerpt (1000 by default)

Styles

If you want, you can customize the looks of this widget as well. Here are some sample CSS rules;
.dsq-widget ul.dsq-widget-list {
padding: 0;
margin: 0;
text-align: left;
}
img.dsq-widget-avatar {
width: 32px;
height: 32px;
border: 0px;
margin: 0px;
padding: 0px 3px 3px 0px;
float: left;
}
p.dsq-widget-meta {
clear: both;
font-size: 80%;
padding: 0;
margin: 0;
}
li.dsq-widget-item {
margin: 15px 0;
list-style-type: none;
clear: both;
}
span.dsq-widget-clout {
padding: 0 2px;
background-color: #ff7300;
color: #fff;
}
a.dsq-widget-user {font-weight: bold;}
a.dsq-widget-thread {font-weight: bold;}
table.dsq-widget-horiz td {padding-right: 15px;}
.dsq-widget-comment p {display: inline;}
Enjoy this high-quality and fast-loading widget from Disqus :)

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

8 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. I already started using this commenting tool on my new blog, www.comicments.com
    The thing with it is after implementing, my default blogger commenting box disappeared.

    ReplyDelete
  2. Sir I add disqus comment box in my website www.downloadism.com but it is not showing fully, will you please tell me how i can cure this problem.

    ReplyDelete
  3. This is a next great help from MBT. Amazing widget.

    I'm a blogger at Blogging Easier. I'm also having this type of widget on my blog in the sidebar. But the widget on my blog is inbuilt in the template. That's why I'm unable to edit it to make it look more attractive. I request the admin and other bloggers either connected to or following MBT to help me in editing my Discussions widget. You can see it live on my blog. (Blog link has been embedded above).

    Thank you in advance.

    Happy Blogging!

    ReplyDelete
  4. brother thank you posting . This is interesting when applied on my blog .

    ReplyDelete
  5. Thank you very much for this tip. It works very well in my blog.

    ReplyDelete
  6. That's exactly what I was looking for.
    Thank you

    ReplyDelete