How To Install Disqus Comments Box In Blogger

0
How To add Disqus Comments widget Box In Blogger template
Hello everyone,Today in this article we are going to explain How to Add Disqus Comments Widget Box in Blogger Template.In previous post we have already talked about Installing Disqus comment load on click and Blogger most commented posts/article gadget.we know that Disqus is the most popular Commenting system for any blog or website.Disqus Offers very professional features like,Moderation of comments(Approve or Delete), Spam filtering, Ban Users for over use of spamming etc.However spam filtering is the best feature from Disqus because you never need to think about that someone is posting irrelevant links in your comments.Whenever anyone drops the comments with the links it's automatically goes to spam after that it will publish only if the admin wants.So that's the reason everyone is loving disqus commenting platform for their websites.
We are going to tell you today how to create disqus comments box in blogspot theme ,lot's of blogs using this feature to display the comments on the trending articles of your blog.However accept it or not somehow it will also helps you to increase the page views ,if your reader view the comments on the specific topic s/he wants to read there is probability that s/he will also join in addition to share their view result you will surely increase the page ranking because disqus comments are SEO friendly all the search engine index disqus comments so if you getting more comments your link will be preferred to display on google search result page.In this disqus comments widget if someone will comment on your post will display and also if mod or admin replied to those comments that will also visible to your visitors.So to grab this disqus comments plugin tool for blogger template follow the steps mentioned below.

How To Add Disqus comments widget box in blogger template

Installation Steps:

Step 1. Log in to your Blogger account and Go to your Blogger Dashboard.

Step 2. Now Go to your Layout->Add a Gadget->Select->HTML/JAVASCRIPT box and copy the below code snippet and paste in the gadget.
<style scoped="scoped" type="text/css">
#Disqus-RecentComments-bsd{display:block;width:100%;margin:0 auto;padding:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;height:410px;}
#Disqus-RecentComments-bsd ul.dsq-widget-list{text-align:left;max-height:410px;overflow:auto;}
#Disqus-RecentComments-bsd img.dsq-widget-avatar{margin:3px 10px 7px 0;width:32px;height:32px;padding:0;float:left;border-radius:3px;clear:both;display:block}
#Disqus-RecentComments-bsd p.dsq-widget-meta{clear:both;font-size:80%;margin-top:5px;font-weight:400}
#Disqus-RecentComments-bsd p.dsq-widget-meta a{display:inline-block;width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#006B6B}
#Disqus-RecentComments-bsd p.dsq-widget-meta a:hover{color:#ff4400}
#Disqus-RecentComments-bsd 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:610}
#Disqus-RecentComments-bsd li.dsq-widget-item:last-child{border-bottom:none}
#Disqus-RecentComments-bsd a.dsq-widget-user {display:table;color:#666;font-weight:610;}
#Disqus-RecentComments-bsd a.dsq-widget-user:hover{color:#009999;}
#Disqus-RecentComments-bsd span.dsq-widget-comment{display:block;clear:both;margin-top:5px;}
#Disqus-RecentComments-bsd .dsq-widget-comment p{display:inline-block;font-size:89%;margin:0;font-weight:410;color:#666}
#Disqus-RecentComments-bsd .dsq-widget-item pre{position:relative;background-color:#FEF9BF;padding-top:0;box-shadow:0 1px 0 rgba(0,0,0,.1);border-radius:0;opacity:.9;transition:all .3s;}
#Disqus-RecentComments-bsd .dsq-widget-item pre:hover {opacity:1}
#Disqus-RecentComments-bsd .dsq-widget-item pre code {color:#444;font-size:82%;}
#Disqus-RecentComments-bsd .disqus-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.3em;height:1.3em;background-color:#FEF9BF}
#Disqus-RecentComments-bsd .disqus-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="Disqus-RecentComments-bsd" class="disqus-widget">
<script defer="defer" type='text/javascript'>
//<![CDATA[
// Disqus Recent Comments Widget By www.Bloggersstand.com
document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://bloggersstand.disqus.com/recent_comments_widget.js?num_items=18&hide_mods=0&hide_avatars=1&avatar_size=31&excerpt_length=100\"></scr" + "ipt>");
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
$("#Disqus-RecentComments-bsd a").filter(function(){return this.hostname&&this.hostname!==location.hostname}).attr('rel', 'nofollow').attr('target', '_blank');
//]]>
</script>
</div>
Customization:
  • Replace Bloggersstand with your Disqus profile user name.
Step 3. Now Save Your Gadget Box..Done !
Tutorial on How to add Learn trick to create installing adding disqus most comments commented widget gadget box in blogger template.to display disqus comments on wbesite or blog install add disqus comments widget.
Hello everyone,Today in this article we are going to explain How to Add Disqus Comments Widget B...
SUMMARY

Tutorial on How to add Learn trick to create installing adding disqus most comments commented widget gadget box in blogger template.to display disqus comments on wbesite or blog install add disqus comments widget.

You Might Also Like:

We hope this article helped you to learn How To Install Disqus Comments Box In Blogger. If you have any question or any complication please don't hesitate to ask us.You can drop your message below in the comment box or you can Contact Us!. If you liked this article please join us on : Facebook | Twitter | Google+

SUBSCRIBE ARTICLES BY EMAIL

Post a Comment Blogger Disqus

0 Comments on "How To Install Disqus Comments Box In Blogger" So Far
Out Of Topic Show Conversion CodeHide Conversion Code Featured Post

MARKUP FOR WRITING COMMENTS:
1. To Insert Code Length Use<i rel="pre">Code Here</i>
2. To Insert Short Codes Use<i rel="code">Code Here</i>
3. To Insert Quote Use<b rel="quote">Quote</b>
4. To Insert Image Use<i rel="image">Image URL</i>
5. To Insert Video Use<i rel="youtube">You Tube Url</i>

Note: You Can Also Convert Your Code Directly From The Conversion Box.
--------------------------------------------------------------------------------------------------------------------------------------------------------
Please drop your comment according with the topic and feedback with hyperlinks may be removed.Thank you.
Regards:
Team Bloggersstand