Add Disqus Recent Comments Widget in Blogger

Today, we will discuss a simple but valuable tutorial how to Add Disqus Recent Comments widget in blogger. Gadgets like these let readers think about the discussions going ahead at your blog, and in case you're genuinely active, it adds a decent impression. This gadget being referred to is well-scripted and the JavaScript is facilitated at Disqus so as to reduce the load time in your blog.

Add Disqus Recent Comments Widget in Blogger

Step # 1: Login to your account and go to Layout > Add a Gadget > HTML/Javascript


Step # 2: Copy the following code and paste in tho the HTML/Javascript box

<div id="RecentComments" class="dsq-widget">
<script type="text/javascript" src="http://yourdomian.disqus.com/recent_comments_widget.js?num_items=5&hide_mods=0&hide_avatars=0&avatar_size=32&excerpt_length=50"></script>
</div>
Step # 3: Now you replace 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 utilized to customize the usefulness of the gadget. Here is a concise depiction for each of them.

  • num_items - Number of comments to show in the gadget
  • 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 need, you can customize the looks of this gadget too. Here are some example 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;}
Done. Now enjoy this widget.  

Share on Google Plus

About Unknown

My Name is Usman Ali and i am SEO Consultant, Online Mentor who has been working since 2012. Blogging is my pession. I can help you in Make Money Online, Blogging, Teachnology, Tips and Tricks, How to and Specially SEO Related issues.
    Blogger Comment
    Facebook Comment

0 comments:

Post a Comment