Tutorial How to Make Top Comments and Disqus Recent Comments on Your Blog

Tutorial How to Make Top Comments and Disqus Recent Comments on Your Blog | How can today's tutorial is how to make the top comments and recent comments from Disqus to your blog. This idea I can after my visit to the blogs that have quite a lot of traffic. so, I have noticed that users often comment on the blog. but the blog owner does not know that the user is a fan blog.

the presence of this tutorial may be the blog owner can see that the user is indeed a fan blog. who knows the owner of the blog would like to give something to the fans of his blog as a gift to see the number of the comments on his blog.

This tutorial I focus on comments from Disqus, here's how to make Top Comments and Disqus Recent Comment on static pages blog :

• The main requirement, of course, your template must exist jQuery framework like this

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

• Login into your blog dashboard → choose page → click the new page

• write the following code in the new page that you click before, do not forget to be in HTML Mode

<style scoped="scoped" type="text/css">
#topcommenters,#RecentComments{display:block;width:100%;margin:0 auto;padding:10px 0 0;border-top:1px solid #ddd;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;height:auto}
.dsq-widget ul.dsq-widget-list{padding:0!important;margin-right:-30px!important;text-align:left}
img.dsq-widget-avatar{margin:0 10px 7px 0!important;width:58px!important;height:58px!important;padding:0!important;float:left;border-radius:3px!important}
.dsq-widget-comment p{font-size:14px;line-height:1.2em!important}
.dsq-widget-comment{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
p.dsq-widget-meta{clear:both;font-size:80%;margin-top:5px!important}
p.dsq-widget-meta a{display:inline-block!important;width:48%;overflow:hidden;text-overflow:ellipsis;-webkit-text-overflow:ellipsis;white-space:nowrap}
li.dsq-widget-item{margin:0 3% 12px 0!important;padding:0 0 4px!important;list-style-type:none;clear:none!important;border-bottom:1px solid #ddd;display:inline;float:left;width:30.333333%}
a.dsq-widget-user{font-weight:700;display:block!important;margin-bottom:5px}
.clear{clear:both}
.post-body {font-size:14px;line-height:1.2em!important}
pre,code{margin:0;font-family: Roboto,Arial,sans-serif;}
@media screen and (max-width:800px){li.dsq-widget-item{width:47%}
.dsq-widget ul.dsq-widget-list{margin-right:0!important;}
}
@media screen and (max-width:414px){li.dsq-widget-item{width:97%}
}
#topcommenter:target {
  display: block;
  margin-top: -20px;
  height: 20px;
  visibility: hidden;
}
</style>
<h3>
Top Commentators:</h3>
<div class="dsq-widget" id="topcommenters">
<script type="text/javascript">
//<![CDATA[
document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://all-tutorials.disqus.com/top_commenters_widget.js?num_items=22&hide_mods=1&hide_avatars=0&avatar_size=32&excerpt_length=80\"></scr" + "ipt>");
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
$("#topcommenters a").filter(function(){return this.hostname&&this.hostname!==location.hostname}).attr('rel', 'nofollow').attr('target', '_blank');
//]]>
</script>
</div>

<h3>
Recent Comments:</h3>
<div class="dsq-widget" id="RecentComments">
<script defer="defer" type="text/javascript">
//<![CDATA[
document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://all-tutorials.disqus.com/recent_comments_widget.js?num_items=22&hide_mods=1&hide_avatars=0&avatar_size=32&excerpt_length=80\"></scr" + "ipt>");
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
$("#RecentComments a").filter(function(){return this.hostname&&this.hostname!==location.hostname}).attr('rel', 'nofollow').attr('target', '_blank');
$("#RecentComments p.dsq-widget-meta a").filter(function(){return this.hostname&&this.hostname!==location.hostname}).attr('rel', 'nofollow').attr('target', '_blank');
//]]>
</script>
<div class="clear">
</div>
</div>

• Change your Disqus username on the color code above 
• Save your work and Done.
• The results of the above tutorial can be viewed here

Found an article helpful? Donate via Paypal

Disclaimer: Images, Content of articles or videos that exist on the web sometimes come from various sources of other media. Copyright is fully owned by the source. If there is a problem with this matter, you can contact us here.