How to force load Disqus Comments in a Blogger 3rd party Theme

Question

I have a blog in which I have a 3rd party theme installed. My blog is blogger blog I do not have plans on changing the theme since the idea and how it's built matches my site contents.
What I wanted to ask is, there are sometimes that Disqus Comments do not load at all. Even if I refresh the page it doesn't load.

I want a code to force it to reload after checking it's not loaded. This doesn't happen only to Disqus but also to AddThis share buttons. I added async='async' to both the scripts to let it load a bit late. Though it increased the probability that it loads, still didn't change fact that it sometime doesn't load. And when that sometimes of not loading occurs, whether it loads sometimes after refresh or it never loads even after refresh(Unless I copy the link and open a new tab or window in browser and open the page again).

The blogger theme has also been installed with bootstrapper. So I had to wrap the comment_picker with <div class='col-md-12 col-sm-12 col-xs-12' id='disqus_thread'>
By the way, the id='disqus_thread' is something I put randomly but it still did increase the probability that it loads.

Here is the code for the disqus and comment_picker in the widget Blog1

Comment picker

<b:includable id='comment_picker' var='post'>
 <div class='col-md-12 col-sm-12 col-xs-12' id='disqus_thread'>
  <b:if cond='data:post.commentSource == 1'>
   <b:include data='post' name='iframe_comments'/>
    <b:elseif cond='data:post.showThreadedComments'/>
      <b:include data='post' name='threaded_comments'/>
    <b:else/>
  <b:include data='post' name='comments'/>
 </b:if>
 </div>
</b:includable>

Disqus

<b:widget id='HTML1' locked='false' title='Disqus for site' type='HTML' version='1'>
  <b:widget-settings>
   <b:widget-setting name='content'><![CDATA[<!-- Disqus Widget -->]]>
   </b:widget-setting>
  </b:widget-settings>
<b:includable id='main'>
<script asyn='async' type='text/javascript'>
 var disqus_shortname = &#39;site&#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;//&#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>

Link to my full theme : https://pastebin.com/WDMMZFfh

You can take some time but please try to solve it.

Answer 1

Disqus widget must come after Blog1 widget to detect div with id='comments' and because your theme doesn't show Blog1 widget in Layout page you can cut Disqus widget and paste it directly after <b:widget id='Blog1'>...</b:widget>