How to Enable Threaded Comments in Customized Blogger-Blogspot Templates

Blogger-Blogspot has recently introduced much-awaited feature of threaded commenting. Now, users can reply to a comment and the comment owner will get an email notification. Naturally, I was also excited about it so, I enabled this feature on my heavily customized template. But it didn't work. I was lucky enough to have an old backup file of Simple Blogger-Blogspot template. After doing some coding, I found it quite easy to integrate the threaded comments in the Simple Blogger-Blogspot template. Please note that this is not a properly tested tutorial. Your template might have different codes. So, follow the steps carefully.

Steps to Enable Threaded Comments in Blogger-Blogspot

1. First of all make sure that your blog feed is set to Full. You can confirm that by going to Settings > Other and then selecting Full from the Allow Blog Feed dropdown.

2. You must also have embedded comment form enabled. Check that by going to Settings > Posts and Comments and check the Comment Location dropdown.

3. After that, open the Template section.

4. Warning: Backup your current template before moving on.
5. Click the Edit HTML button.
6. A new window will open. You'd have to click the Proceed button to start editing.
7. Check Expand Widget Templates option.
8. Find the following line of code:
   

   <b:includable id='postQuickEdit' var='post'>

Once you've found the above line, you'll see this piece of code:

</div>
    </div>
  </div>
</b:includable>
<b:includable id='postQuickEdit' var='post'>


Now, we need to add some code just BEFORE the above code. The code to add is:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>
        </b:if>

After adding the new code, overall code should look like this:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>
        </b:if>
      </div>
    </div>
  </div>
</b:includable>
<b:includable id='postQuickEdit' var='post'>


9. Now, we need to find the following piece of code:
   

   <div class='post-outer'>
           <b:include data='post' name='post'/>
           <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
             <b:include data='post' name='comments'/>
           </b:if>
           <b:if cond='data:blog.pageType == &quot;item&quot;'>
             <b:include data='post' name='comments'/>
           </b:if>
           </div>

   
   and REPLACE the above code with the following one:
   

   <div class='post-outer'>
           <b:include data='post' name='post'/>
           <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
             <b:if cond='data:post.showThreadedComments'>
               <b:include data='post' name='threaded_comments'/>
             <b:else/>
               <b:include data='post' name='comments'/>
             </b:if>
           </b:if>
           <b:if cond='data:blog.pageType == &quot;item&quot;'>
             <b:if cond='data:post.showThreadedComments'>
               <b:include data='post' name='threaded_comments'/>
             <b:else/>
               <b:include data='post' name='comments'/>
             </b:if>
           </b:if>
           </div>

   
   
10. Click Save template and then Close button.
11. Check your blog. If you can see the option of Reply under each comment then threaded commenting is enabled. Otherwise, upload your backup template.