Add Disqus Recent Comments Widget For Blogger

Add Disqus Recent Comments Widget For Blogger

Actually I am more lazy to Blogger Widget modification, but it feels bored otherwise tamper coding. Finally I tried to modify a widget for recent comments Disqus comments that it seems now already widely used Blogger.

I took a recent script Disqus comment to this Blogger and modify it a little zoom and adding rel = "nofollow" and target = "_ blank" in its external link automatically with jquery in order to become more seo friendly.

In order not to have to go to the Edit HTML template so that no error will actually make headaches hehehe .... At the moment you can directly add widgets recent Disqus comment directly on the gadget HTML / JavaScript in the Layout. But if Blogger is no error, for its style css advised to be stored in the edit HTML. And I made this widget is also responsive.

And make sure you have saved jquery library (any version) in order to edit your blog's HTML script to add rel = "nofollow" and target = "_ blank" in its external link could walk.

Please add the script below the gadget HTML / JavaScript sidebar in Layout.

<style scoped="scoped" type="text/css">

#RecentComments{display:block;width:100%;margin:0 auto;padding:0 10px;border:1px solid #ddd;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;height:500px;overflow:auto}

.dsq-widget ul.dsq-widget-list{padding:0;margin:0;text-align:left}

img.dsq-widget-avatar{margin:3px 10px 7px 0!important;width:58px!important;height:58px!important;padding:0!important;float:left;border-radius:3px!important}

p.dsq-widget-meta{clear:both;font-size:80%;margin-top:5px!important}

p.dsq-widget-meta a{display:inline-block;width:48%;overflow:hidden;text-overflow:ellipsis;-webkit-text-overflow:ellipsis;white-space:nowrap}

li.dsq-widget-item{margin:0!important;padding:6px 0 4px!important;list-style-type:none;clear:both;border-bottom:1px solid #ddd}

li.dsq-widget-item:last-child{border-bottom:none}

a.dsq-widget-user{font-weight:700;display:block!important;margin-bottom:5px}

</style>

<div id="RecentComments" class="dsq-widget">

<script type='text/javascript'>

//<![CDATA[

document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://USERDISQUS.disqus.com/recent_comments_widget.js?num_items=20&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');

//]]>

</script>

</div>

Customization :

1. To set the widget height height: 500px on css #RecentComments

2. Replace the code USERDISQUS by Disqus username of your blog

3. The number of comments NUM_ITEMS = 20

With this will allow you to see and reply to comments coming Disqus. May be useful....

Share this post