How to Install Disqus comment System Manually on Blogger

        Disqus is a most popular comment system in all blogging and website platform. Disqus has offered four more ways that you can encourage even more comments by carefully placing certain widgets on your site. These widgets use human nature to get people inspired to comment. Disqus comment system is compatible with search engine optimization (SEO) so increase your blog & Website Traffic. Comment from disqus are easy crawled by Google bot and other popular search engine [Example: google,yahoo,Bing etc.]. Now more that 850,00 website are using disqus comment management system.

         I'm previously discuss about Disqus comment system widget for Blogger. I'm discuss before :

→ How to add widget into Blogger.

→ How to customize install disqus comment system into blogger. 

          Some blogger user facing problem to install disqus comment widget into Blogger. Some times add widget option not work properly some Blogger Account. That's time I discuss about How to manually install this widget So I'm discuss tutorial on "How to Install Disqus comment System Manually on Blogger". One make a mistake happened in manual installation is, disqus comment system is see on the index page also. So I tell you step by step how to install disqus comment correctly in blogger manually.

Step By Step manual Installation of Disqus Widget into Blogger→

1. Login to Blogger Dashboard.
2. Go to Layout > Add a Gadget.
3. Select HTML/JavaScript Gadget.
4. Now Login to Disqus.
5. Goto Setting > Install.
   
6. Select Blogger Platform.
   
7. Click on the Add to my Blogger Site.
   
8. Copy the content from "Edit Content".
   
9. And Paste into HTML/Java Script Gadget with title as Disqus and Save this Gadget.
   
10. Now go to Template > Edit HTML
11. Search for Disqus keyword(if you given different name for HTML/JavaScript Gadget, then search with this name). then you look like this code.
    
12. Delete the code in between tags

<b:widget id='HTML5' locked='false' title='Disqus' type='HTML'> 

and

</b:widget>

13.  Now copy the second code from Disqus which is below Edit content named as Edit Template. 

14.  And paste code in between tags mention at the step 12.
15.  Which is look like this

<b:widget id='HTML5' locked='false' title='Disqus' type='HTML'>

        <b:includable id='main'>

            <script type='text/javascript'>

                var disqus_shortname = 'digitalhubinc';

                var disqus_blogger_current_url = "<data:blog.canonicalUrl/>";

                if (!disqus_blogger_current_url.length) {

                    disqus_blogger_current_url = "<data:blog.url/>";

                }

                var disqus_blogger_homepage_url = "<data:blog.homepageUrl/>";

                var disqus_blogger_canonical_homepage_url = "<data:blog.canonicalHomepageUrl/>";

            </script>

            <b:if cond='data:blog.pageType == "item"'>

                <style type='text/css'>

                    #comments {display:none;}

                </style>

                <script type='text/javascript'>

                    (function() {

                        var bloggerjs = document.createElement('script');

                        bloggerjs.type = 'text/javascript';

                        bloggerjs.async = true;

                        bloggerjs.src = 'http://'+disqus_shortname+'.disqus.com/blogger_item.js';

                        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(bloggerjs);

                    })();

                </script>

            </b:if>

                <style type='text/css'>

                    .post-comment-link { visibility: hidden; }

                </style>

                <script type='text/javascript'>

                (function() {

                    var bloggerjs = document.createElement('script');

                    bloggerjs.type = 'text/javascript';

                    bloggerjs.async = true;

                    bloggerjs.src = 'http://'+disqus_shortname+'.disqus.com/blogger_index.js';

                    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(bloggerjs);

                })();

                </script>

        </b:includable>

</b:widget>

16.  And save template.

                  All done and see your website. If any problem face to manual installation of Disqus Comment Widget then comment below. If you like this post please Like and Share on social network.