Widget top comentadores Disqus com facethumbnails

facethumbnails disqus widget para blogger


Hoje vamos apresentar como adicionar top comentadores de disqus no seu blogger isso serve para prestigiar aqueles leitores assíduos que frequentemente visitam o blog lembrando que isso é para o sistema de comentário disqus criado por kompiajaib se você utiliza no seu blogger e gostaria de ver o widget em funcionamento isso é legal pois além de aparecer o rosto das pessoas aparece a quantidade de vezes que comentou seu blog para adicionar siga as dicas abaixo:


Adicionando Widget top comentadores Disqus com facethumbnails   

O ideal é criar uma nova pagina va no menu do blogger em pagina criar uma nova pagina então clique no menu ao lado de escrever em HTML e adicione o seguinte código:

<style>
#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:12px;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;
}
.post-body h3{font-size:22px}
</style>

<span id='topcommenter'></span>
<h3>Top Commentators:</h3>
<div id="topcommenters" class="dsq-widget">
<script type='text/javascript'>
//<![CDATA[
document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://seuidvaiaqui.disqus.com/top_commenters_widget.js?num_items=21&hide_mods=1&hide_avatars=0&avatar_size=32&excerpt_length=80\"></scr" + "ipt>");
//]]>
</script>
<div class="clear"></div>
</div>
<br/>
<br/>
<h3>Recent Comments:</h3>
<div id="RecentComments" class="dsq-widget">
<script type='text/javascript'>
//<![CDATA[
document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://seuidvaiaqui.disqus.com/recent_comments_widget.js?num_items=21&hide_mods=1&hide_avatars=0&avatar_size=32&excerpt_length=80\"></scr" + "ipt>");
//]]>
</script>
<div class="clear"></div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.js"></script>
<script type='text/javascript'>
//<![CDATA[
$("#topcommenters a,#RecentComments a").filter(function(){return this.hostname&&this.hostname!==location.hostname}).attr('rel', 'nofollow').attr('target', '_blank');
//]]>
</script>

Não esqueça de trocar o realçado em amarelo pelo seu id disqus salve e pronto.

Click to comment