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 Commentswidget 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

Now add it anywhere you like on your blog

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

Khan
How does it relate with earning anything here??...
10 Natural Disasters in 2012 that shook the world! · 2 years ago
NIDA ZAIDI
Yes Gul, you are pretty right about it, I heard...
10 Successful Small Businesses That Don’t Use Social Media · 2 years ago
crescent
I started with promoting "Affiliate Marketing"...
PayPal Offers ‘Bill Me Later’ Service to its Customers! · 2 years ago
crescent
Thanks Nida for sharing this info. because now...
15 Brands that Disappeared in 2012! · 2 years ago
crescent
Thanks for sharing this information Nida.
The World’s Most Expensive Places to Live 2012 · 2 years ago

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;}