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

Enjoy this high-quality and fast-loading widget from Disqus :)

Share on Google Plus

About Salman Ahmed Rajput

Hi I am Salman Ahmed, nicknamed as "Sam". I am a technology lover and also a Web Developer. My favorite programming language is PHP which means I usually develop web apps in PHP. Wanna Follow ? Yes? You can follow me at https://facebook.com/Sam.programer
https://twitter.com/SalmanRajz.