Add Disqus Recent Comments Widget in Blogger

Today, we will discuss a simple but valuable tutorial how to Add Disqus Recent Comments widget in blogger. Gadgets like these let readers think about the discussions going ahead at your blog, and in case you're genuinely active, it adds a decent impression. This gadget being referred to is well-scripted and the JavaScript is facilitated at Disqus so as to reduce the load time in your blog.

Add Disqus Recent Comments Widget in Blogger

Step # 1: Login to your account and go to Layout > Add a Gadget > HTML/Javascript


Step # 2: Copy the following code and paste in tho the HTML/Javascript box

<div id="RecentComments" class="dsq-widget">
<script type="text/javascript" src="http://yourdomian.disqus.com/recent_comments_widget.js?num_items=5&hide_mods=0&hide_avatars=0&avatar_size=32&excerpt_length=50"></script>
</div>

Step # 3: Now you replace 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 utilized to customize the usefulness of the gadget. Here is a concise depiction for each of them.

• num_items - Number of comments to show in the gadget
• 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 need, you can customize the looks of this gadget too. Here are some example 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;}

Done. Now enjoy this widget.