Add Disqus Recent Comments Widget to Blogger

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.

1. Go to Blogger >> Layout 
2. Click on Add a Gadget 
3. Choose the HTML/JavaScript widget

Now add it anywhere you like on your blog.

Now copy and paste the following code inside the HTML/JS widget.

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

Note: The code above contains a URL - http://bloggeraddict.disqus.com. 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 :)