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">Step # 3: Now you replace the text in bold with your own domain name (yourdomain.disqus.com).
<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>
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 {Done. Now enjoy this widget.
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;}
0 comments:
Post a Comment