Blogger Ever

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

A simple Javascript to display Disqus recent comments in Blogger and customize it using CSS.
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.

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. 
Blogger

2013-2016 Copyright Blogger E\ver . Coded, managed and founded by Mohammad Hamza (@hamzadhamiya) . Hosted on Blogger and fonts used are Raleway and Open Sans.