• Translate

11/02/2016

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

Tutorial Blogspot |

Advertisement

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.

Tutorial How to Make Top Comments and Disqus Recent Comments on Your 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
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

Disqus
Blogger
Comment
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>, and please parse the code in the parser box below.
Show Parser Box

No comments Add Comment

Comments not appropriate topic will sign SPAM.