As we know, Disqus is one of the most popular commenting system platform
today. In addition to the professional appearance, Disqus also offers features
that are of special interest is the moderation system and edit comments in
which comments can be edited if there is one visitor commented by inserting
links or mentions one of the words that have been filtered in setting Disqus.
How to Install Widget Recent
Comments on Disqus
There are still many other
advantages offered Disqus, but here I will share how the "figs Add Comment
Latest from Disqus Widget"
Most recent comments widget
function of Disqus is to showcase the latest comments from both visitors and
administrators who commented on the article in his blog. For those who are
interested, please observe the following steps:
Make sure you are using the
blog commenting system Disqus
1. Login to your Blogger
>> layout >> Create a new widget HTML / Javascript. >> Then
add script Disqus comments below in the widget:
HTML - Go Widget
<style scoped="scoped"
type="text/css">
#RecentComments{display:block;width:100%;margin:0
auto;padding:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;height:400px;}
#RecentComments
ul.dsq-widget-list{text-align:left;max-height:400px;overflow:auto;}
#RecentComments img.dsq-widget-avatar{margin:3px 10px 7px
0;width:32px;height:32px;padding:0;float:left;border-radius:3px;clear:both;display:block}
#RecentComments
p.dsq-widget-meta{clear:both;font-size:80%;margin-top:5px;font-weight:400}
#RecentComments p.dsq-widget-meta
a{display:inline-block;width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#444}
#RecentComments p.dsq-widget-meta a:hover{color:#ff675c}
#RecentComments li.dsq-widget-item{margin:0;padding:6px 0
4px;list-style-type:none;clear:both;border-bottom:1px solid
#eee;color:#736fb8;font-weight:600}
#RecentComments
li.dsq-widget-item:last-child{border-bottom:none}
#RecentComments a.dsq-widget-user
{display:table;color:#736fb8;font-weight:600;}
#RecentComments a.dsq-widget-user:hover{color:#999;}
#RecentComments
span.dsq-widget-comment{display:block;clear:both;margin-top:5px;}
#RecentComments .dsq-widget-comment
p{display:inline-block;font-size:88%;margin:0;font-weight:400;color:#444}
#RecentComments .dsq-widget-item
pre{position:relative;background-color:#f3ffca;padding-top:0;box-shadow:0 1px 0
rgba(0,0,0,.1);border-radius:0;opacity:.9;transition:all .3s;}
#RecentComments .dsq-widget-item pre:hover {opacity:1}
#RecentComments .dsq-widget-item pre code
{color:#444;font-size:82%;}
#RecentComments
.dsq-widget-item
pre:before{content:'';position:absolute;padding:initial;font-size:initial;text-indent:initial;left:initial;color:initial;top:0;right:0;width:1.2em;height:1.2em;background-color:#d8e3b0}
#RecentComments
.dsq-widget-item
pre:after{content:'';font-size:initial;padding:0;position:absolute;width:0;height:0;border-style:solid;border-width:0
1.2em
1.2em 0;border-color:transparent #fff transparent transparent}
</style>
<div id="RecentComments"
class="dsq-widget">
<script defer="defer" type='text/javascript'>
//<![CDATA[
document.write("<scr" + "ipt
type=\"text/javascript\" src=\"https://gowidget.disqus.com/recent_comments_widget.js?num_items=18&hide_mods=0&hide_avatars=1&avatar_size=32&excerpt_length=120\"></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');
//]]>
</script>
</div>
Replace the code that is
marked with the name of your Disqus blog user.
2. Save the widgets and see
the results.
Thus tutorial "How to
Install Widget Latest from Disqus Comments" may be useful.