Add Disqus Recent Comments Widget On Blogger / Blogspot

In this tutorial we are going to implement a very useful widget for your readers, allowing them to read the latest reviews About the latest comments.

Add Disqus Recent Comments Widget On Blogger / Blogspot

Go to blogger as usual: http://www.blogger.com
Click Layout >> Add a Gadget
Choose HTML / JavaScript Add
Copy / paste the code below into the content area:

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

You must change the red text with your domain name.

Configuration :

After the exclamation mark (?) In the URL, you can see a set of parameters. the latter allows you to customize the functionality of your widget. Following is a brief description for each parameter:

• num_items - Number of comments to appear in the widget
• hide_mods - hide comments moderator. (1 to hide, 0 to disable)
• hide_avatars - Show hide images (1 to hide, 0 to display)
• avatar_size - the size of the Avatar in px (32 by default)
• excerpt_length - Number of characters to extract (1000 by default)

Style:

You can change the style of your widget, here are some CSS readjustment:

.dsq ul.dsq-widget-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-how p {display: inline;}

Hope You will find this tutorial Helpful And Please Don't forget To Share.