Enable Threaded Comments for Blogger | Mission 16

Previously, we saw how to bring post info, time-stamp and comment counter below the post title. Today, we will see how to make the Blogger comment form professional.

Important: This method is applicable for most of the BLOGGER TEMPLATES especially the default templates from Blogger. 
But, we will take the help of our “Simple Blogger Template” as a demo and helper to learn better.

Some time ago in Jan 2012, Blogger introduced the threaded comment feature for the default Blogger templates. Some templates got these features from Google automatically and some din’t get them as they were using their own custom template with lots of designs and customization.

PREVIOUS MISSION – Mission 15: Bringing the comment counter, author info and article time-stamp below the Blogger post title.
NEXT MISSION – Mission 17: Styling Blogger elements with beautiful colors.

We will learn how to enable the threaded comment form for Blogger in simple steps in this tutorial:

Simple Steps for Default Blogger Templates(Most Templates):

Important: Backup your Blogger template for going further.

Snapshot of how threaded comment would look like:

1) Go to Dashboard > Select Blog > Settings > Posts and Comments > Make the comment location “Embedded“.

Note: If you are not seeing the threaded comments in your Blogger blog, then your template is not a default template, but a custom template with template customization. Then, follow the next step:

2) Go to Dashboard > Select target blog > Template > Edit HTML > Click on “Revert widget templates to default” > Save template.

Note: If you still don’t see the threaded comments, then follow the next set of steps:

3) Go to Dashboard > Select blog > Template > Edit HTML > Expand Widget Templates > Search(Ctrl+F) for the following code:

<b:include data='post' name='comments'/>

4) Replace each occurrence of the above code you find with the below code:

<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>  <b:include data='post' name='comments'/>
</b:if>
5) Save the template.

Now, you should be seeing the threaded comments with “Reply” option or link for your comments.
If you still don’t see the threaded comments, let us know by comments we will try to help you.

Simple Steps for Simple Blogger Template Designed By Us:

Snapshot below:

Steps:

1) Download the previous template from lesson 15 > Create a example blog > Upload the template.

2) Go to Template > Edit HTML > Expand the template widget > Search (Ctrl+F) for the following code:

<b:include data='post' name='comments'/>

You will find TWO occurrences.

3) Replace in the SECOND occurrence with the below code: (The first occurrence already has the threaded comment code)

<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/> <
<b:else/>
<b:include data='post' name='comments'/>
</b:if>

Now, the threaded comment will be enabled for sure

Making the Comment Form Clean:

Steps:

1) To go Template > Edit HTML > Search for the below CSS code:

CSS:
.comment-form{background:red; border:4px solid green;}
#comments {
margin: 20px 20px 0px 20px;
padding: 20px 20px 20px 20px;
text-align: left;
background: #000;
color: #fcfcfc;
}

2) Replace the above code with the below CSS:

CSS:
.comment-form{background:#fff; }
#comments {
margin: 20px 20px 0px 20px;
padding: 20px 20px 20px 20px;
text-align: left;
background: #fff;
color: #fcfcfc;
}

3) Save the template!

You are done, now it should look clean and tidy.