How to Add Disqus Recent Comments Widget to Blogger

Today, all of us will discover a straightforward and valuable course about how to provide a nice-looking and fast-loading Disqus Recent Remarks widget using a Blogger blog. Widgets including these types of make it possible for followers know about the actual interactions happening pictures blog, and if you're rather active, this results in an excellent feeling. This widget showcased is usually well-scripted plus the JavaScript is usually organised in Disqus to be able to slow up the weight moment with your blog. And so why don't we discover ways to create this to widget.
See live demo:  How to Add Disqus Recent Comments Widget to Blogger

Adding Disqus Recent Comments Widget to Blogger

You can add this widget code inside any text/html block inside your blog.
Step 1. Go to Blogger >> Layout
Step 2. Click on Add a Gadget
Step 3. Choose the HTML/JavaScript widget

Step 4. Now add it anywhere you like on your blog
Step 5. Now copy and paste the following code inside the HTML/JS widget.

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

Step 6.  Click Save

Customization:

The code above contains a URL. You need to change the text in bold with your own domain name (yourdomain.disqus.com).
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)

Adding CSS

.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 your day buddies!!!