How to get Disqus recent comments and customize it using CSS in Blogger?

Disqus is leading a large number of discussions on a million of blogs. Further it also be way to earn a few penny for your blog using a feature named discovery in Disqus. In addition, Disqus provides a great comment moderation and comment form for bloggers. Disqus have a vast API to get recent comments, popular discussion and lot more. But in this post we are not going to use any API instead a simpler solution.Have a look.

• First go to Layout > Add Widget > HTML/Javascript
• Paste the following code in it

<script type="text/javascript" src="http://bloggerever.disqus.com/recent_comments_widget.js?num_items=5&amp;hide_avatars=0&amp;avatar_size=40&amp;excerpt_length=100"></script>

 5 is number of recent comments and 100 is characters of summary, change it according to your desire.

Read More : http://www.bloggerever.com/2013/08/why-disqus-is-5-star-rated-commenting.html

Customization

Now we will customize comments, now go to Template > Edit HTML

Find the following code

//]]></b:skin>

Now paste the following code just above it:

 .dsq-widget-list{
padding:0;
margin:0;
list-style:none;
}
.dsq-widget-item{
padding:10px 0;
border-bottom:1px solid #666;
font-family:'pt sans',sans-serif;
color:#222;
}
.dsq-widget-user{
color:#222;
font-family:'pt sans',sans-serif;
}
.dsq-widget-meta a{
color:#666;
font:400 12px 'pt sans',sans-serif;
}
.dsq-widget-comment{
display:block;
border-bottom:1px dotted #222;
width:100%;
clear:both;
padding:5px 0;
font:italic 400 12px 'pt sans',sans-serif;
color:#666;
}

Save template. Done!

I know designers are their who can make it more pretty. Comment if you have any query.