HOW TO ADD DISQUS COMMENT FORM TO BLOGGER

Customizing your comment form in blogger makes it looks more mature than the default Google plus comment form. Disqus is a type of comment form that allows visitors to easily comment in any of your post both in PC and Mobile. Adding disqus comment form to your is very easy and can be done by you.

Here are the few steps to take when adding disqus comment form.

Step 1. Go to disqus homepage by clicking here

Step 2. On the homepage click 'Add Disqus to Your Site' as seen below

Step 3. Fill the registration form for your login and after this fill your site profile form as seen on the image below.

Site name: Put your website name for example mine is 'Technology School' replace 'Technology School' with your site name.

Choose Your Unique Disqus URL: I chose 'techskulz' as mine you replace 'techskulz' to yours

Category: Select the category your site belongs and click on finish registration

Step 4. After that it will take you to the admin page setting where you can add the widget to your blog, click on install as seen on the image below.

Step 5. After clicking install you will see something like this on the image below, click on blogger.

Step 6. After clicking on blogger you will see something like this on the image click on the first one something like this 'add your blog name to my blogger site' click on it and a new browser tab will open.

Step 7. Click on add widget and the widget will be added to your blog.

After adding the widget to your blog go to your blogger dashboard and click on edit template, after the template editor is opened click on jump to widget and click that widget number for example my widget number is HTML6 yours might be HTML1,2,4 and so on. Click on the widget number and you will see a code like this <b:widget id='HTML6' locked='false' title='Disqus' type='HTML'> edit the code line and add mobile='yes' then you will now have something like this <b:widget id='HTML6' locked='false' mobile='yes' title='Disqus' type='HTML'>

before the closing </b:widget>  add this code to it

<b:includable id='main'>

            <script type='text/javascript'>

                var disqus_shortname = &#39;EXAMPLE&#39;;

                var disqus_blogger_current_url &quot;<data:blog.canonicalUrl/>&quot;;

                if (!disqus_blogger_current_url.length) {

                    disqus_blogger_current_url = &quot;<data:blog.url/>&quot;;

                }

                Var disqus_blogger_homepage_url = quot;<data:blog.homepageUrl/>&quot;;

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

            </script>

            <b:if cond='data:blog.pageType == &quot;item&quot;'>

                <style type='text/css'>

                    #comments {display:none;}

                </style>

                <script type='text/javascript'>

                    (function() {

                        var bloggerjs = document.createElement(&#39;script&#39;);

                        bloggerjs.type = &#39;text/javascript&#39;;

                        bloggerjs.async = true;

                        bloggerjs.src = &#39;//&#39;+disqus_shortname+&#39;.disqus.com/blogger_item.js&#39;;

                        (document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName

(&#39;body&#39;)[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(&#39;script&#39;);

                    bloggerjs.type = &#39;text/javascript&#39;;

                    bloggerjs.async = true;

                    bloggerjs.src = &#39;http://&#39;+disqus_shortname+&#39;.disqus.com/blogger_index.js&#39;;

                    (document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName

(&#39;body&#39;)[0]).appendChild(bloggerjs);

                })();

            </script>

</b:includable>

Remember to replace "EXAMPLE" with your forum shortname and be sure to leave '&#39;' in front of your shortname and '&#39;;' after it and click on save template and you are done adding the comment form to your blog.

If you have any problem kindly drop it at the comment box below.