How To Add Threaded Comments With Different Author Color Comments In Blogger

The threaded comments for blogger is one of the option that all blogger users want for their blog but it is unavailable by default. But now with a little effort and a few tweeks of the template code you will be able to add this option on your comments form. The idea behind this came from the simple observation that most of us use @AuthorName to reply to comments posted by other users in 'single' threaded comments. So the javascript just parses the comment bodies for this author name and then searches for appropriate comments to find parents of the reply comments.

How To Add Threaded Comments With Different Author Color Comments In Blogger

Go to Blogger Dashboard
Click on DropDown Menu and select Template
Backup your Template before making any changes to your blog
Now Click on Edit HTML --> Proceed --> Expand Widget Templates
Press Ctrl + F and search the code shown below

]]></b:skin>

Now Paste the Code Shown Below just above/before it

#comments h4 {
font-size: 18px;
font-weight: normal;
margin: 20px 0;
}

.cm_wrap {
clear: both;
margin-bottom: 10px;
float: right;
width: 100%;
}

.cm_head {
margin: 0;
width:60px;
float: left;
}

.cm_avatar {
margin: 0;
vertical-align: middle;
outline: 1px solid #fff;
border: 1px solid #ddd;
padding: 3px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg27AmMUn5f5n4GuYylVDc9Td-hRBhs0kry13G3oik0qtpY0Z8k4c3SmsBtPiUUKk4oMFus_QkkN98BgQFJk9tNKeSEaYKfQalK8VRPIJ6wta16HjNSIq1UDy4e96W5HI_CHO0lDZKS_ss/s1600/none.png);
background-position:center;
background-repeat:no-repeat;
width: 35px;
height: 35px;
}
.cm_avatar_a {
margin: 0;
vertical-align: middle;
border: 1px solid #ddd;
padding: 3px;
background:#c6e5f7;
background-position:center;
background-repeat:no-repeat;
width: 35px;
height: 35px;
}

.cm_reply {
padding-top: 5px;
}

.cm_reply a {
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #EDEDED;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 11px/18px sans-serif;
}

.cm_reply a:hover {
text-decoration: none !important;;
background: #ccc;;
background: -webkit-gradient(linear,left top,left bottom,color-stop(.2, #eeeeee),color-stop(1, #cccccc));;
background: -moz-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);;
}

.cm_entry {
padding: 16px 16px 0 16px;
background: #F7F7F7;
outline: 1px solid #fff;
border: 1px solid #ddd;
overflow: hidden;
}
.cm_entry_a {
padding: 16px 16px 0 16px;
background: #F7F7F7;
outline: 1px solid #fff;
border: 1px solid #ddd;
overflow: hidden;
}

.cm_arrow {
display: block;
width: 9px;
height: 18px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNXNGMnORvQonYCoie_8XCrl5VkydYajPbThj2Nbydx7qtR5PS4LQRTear4EJByDBTk-vke6FdEqgMBkeuF7Bo2iOaRblk5L8cYfqBxWqJvM-3W3hOajQefxsp0LzINJNgu-L-AS3yQV8/s1600/comment-arrow.gif) no-repeat;
position: absolute;
margin-left: -25px;
}

.cm_info {
margin-bottom: 5px;
border: thin solid #E6E6E6;
background-color: #F4F4F4;
padding: 5px;
}
.cm_info_a {
margin-bottom: 5px;
border: thin solid #E6E6E6;
background-color: #dff0fa;
padding: 5px;
}

.cm_name {
font-size: 14px;
color: #666666 !important;
text-decoration:none;
font-weight: bold;
float: left;

}
.cm_name_a {
font-family:"Francois One";
font-size: 14px;
color: #666666 !important;
text-decoration:none;
font-weight: 250;
float: left;

}

.cm_date {
font-size: 10px;
color: #999;
text-decoration:none;
float: right;

}
.cm_date_a {
font-family:"Francois One";
font-size: 10px;
color: #2D5E7B;
text-decoration:none;
float: right;
padding-top:5px;

}
.cm_entry p {
padding: 5px;
clear: both;
border: thin solid #E6E6E6;
background-color: #F4F4F4;
font-size: 13px;
color: #333;
word-wrap:break-word;
}
.cm_entry_a p {
padding: 5px;
clear: both;
border: thin solid #E6E6E6;
background-color: #dff0fa;
font-size: 13px;
color: #333;
word-wrap:break-word;
}

.cm_pagenavi {
font-size: 10px;
text-transform: uppercase;
color: #666;
text-shadow: 1px 1px white;
font-weight: bold;
}

.cm_pagenavi a {
color: #666;
text-decoration: none;
padding:10px;
}

.cm_pagenavi a:hover {
text-decoration: underline
}

.cm_pagenavi span {
color: #888;
background: white;
padding: 4px;
border: 1px solid #E0E0E0;
}

Now find </body> and Paste the Code Shown Below just above/before it

Now search the code shown below

<b:includable id='comments' var='post'>
lots of code lines that you must replace
</b:includable>

Now paste the code shown below in it

<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
        <h4>
             <b:if cond='data:post.numComments > 0'>
          <b:if cond='data:post.numComments == 1'>
            <span id='cm_total'>1</span> comment
          <b:else/>
            <span id='cm_total'><data:post.numComments/></span> comments
          </b:if>
        </b:if>
        </h4>

        <div id='cm_reply_css'/>

        <div class='cm_pagenavi' id='cm_page'/>

        <div id='cm_block'>
            <b:loop values='data:post.comments' var='comment'>
                <b:if cond='data:comment.isDeleted'>
                <b:else/>

                    <div expr:id='data:comment.anchorName'>
                        <div class='cm_wrap'>
                            <a expr:name='data:comment.anchorName'/>

<b:if cond='data:comment.author == data:post.author'>
                               <div class='cm_head'>
                                <div class='cm_avatar_a'>
                                    <b:if cond='data:blog.enabledCommentProfileImages'>
                                        <data:comment.authorAvatarImage/>
                                    </b:if>
                                </div>
                                <div class='cm_reply'>
                                    <a expr:href='"https://www.blogger.com/comment.g?blogID=__BlogID__&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500"); return false;'>Reply</a>
                                </div>
                            </div>
<b:else/>

                            <div class='cm_head'>
                                <div class='cm_avatar'>
                                    <b:if cond='data:blog.enabledCommentProfileImages'>
                                        <data:comment.authorAvatarImage/>
                                    </b:if>
                                </div>
                                <div class='cm_reply'>
                                    <a expr:href='"https://www.blogger.com/comment.g?blogID=__BlogID__&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500"); return false;'>Reply</a>
                                </div>
                            </div>
</b:if>

<b:if cond='data:comment.author == data:post.author'>
                                <div class='cm_entry_a'>
                                <span class='cm_arrow'/>
                                <div class='cm_info_a'>
                                    <div class='cm_name_a'>

                                      <b:if cond='data:comment.author == data:post.author'>
                                                                                       <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
                                                <data:comment.author/>
                                            </a>
                                                           <b:else/>

                                        <b:if cond='data:comment.authorUrl'>
                                            <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
                                                <data:comment.author/>
                                            </a>
                                        <b:else/>
                                            <b><data:comment.author/></b>
                                       </b:if>
                                        </b:if>
                                    </div>

                                            <b:if cond='data:comment.author == data:post.author'>
                                     <div class='cm_date_a'>
                                        <data:comment.timestamp/>
                                        <b:include data='comment' name='commentDeleteIcon'/>
                                    </div>
                                    <div class='clear'/>

                                            <b:else/>

                                    <div class='cm_date'>
                                        <data:comment.timestamp/>
                                        <b:include data='comment' name='commentDeleteIcon'/>
                                    </div>
                                    <div class='clear'/>
                                            </b:if>
                                </div>
                                  <b:if cond='data:comment.author == data:post.author'>
                                     <div class='comment-body-author'>
                                <p><data:comment.body/></p>
                                     </div>
                                            <b:else/>
                                <p><data:comment.body/></p>
                                 </b:if>
                            </div>


<b:else/>

                            <div class='cm_entry'>
                                <span class='cm_arrow'/>
                                <div class='cm_info'>
                                    <div class='cm_name'>

                                      <b:if cond='data:comment.author == data:post.author'>
                                                                                      <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
                                                <data:comment.author/>
                                            </a>
                                                           <b:else/>

                                        <b:if cond='data:comment.authorUrl'>
                                            <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
                                                <data:comment.author/>
                                            </a>
                                        <b:else/>
                                            <b><data:comment.author/></b>
                                       </b:if>
                                        </b:if>
                                    </div>

                                            <b:if cond='data:comment.author == data:post.author'>
                                     <div class='cm_date_a'>
                                        <data:comment.timestamp/>
                                        <b:include data='comment' name='commentDeleteIcon'/>
                                    </div>
                                    <div class='clear'/>

                                            <b:else/>

                                    <div class='cm_date'>
                                        <data:comment.timestamp/>
                                        <b:include data='comment' name='commentDeleteIcon'/>
                                    </div>
                                    <div class='clear'/>
                                            </b:if>
                                </div>
                                  <b:if cond='data:comment.author == data:post.author'>
                                     <div class='comment-body-author'>
                                <p><data:comment.body/></p>
                                     </div>
                                            <b:else/>
                                <p><data:comment.body/></p>
                                 </b:if>
                            </div>
</b:if>
                        </div>
                    </div>
                </b:if>
     </b:loop>
        </div>

        <div class='cm_pagenavi' id='cm_page_copy'/>

    <b:if cond='data:post.embedCommentForm'>
            <b:if cond='data:post.allowNewComments'>
                <b:include data='post' name='comment-form'/>
            <b:else/>
                <data:post.noNewCommentsText/>
            </b:if>
            <b:else/>
            <b:if cond='data:post.allowComments'>
                <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
            </b:if>
    </b:if>

</b:if>
</div>

Replace __BlogID__ with your own BLOG ID number
See the picture shown below to find BLOG ID number

Now save your template

NOTE:- If the comments does not appear in threaded form, it's because Blogger implemented there own threaded comment system. To replace it and have the comments like in the tutorial you have to find the code shown below

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

Now replace it 4 times with the code shown below

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

Like it? Share it.

35 comments

Unknown

18 June 2012 at 12:42 Author

Thank you Brother. You made my request.

JayRyan'sBlog was inviting you to be a Guest Post Author..

Thank you so much.

-jayryan09-

Anonymous

18 June 2012 at 23:42

Sorry for an Off topic question but can you tell me the use of this tag which is being used in your Coding..
http://code.google.com/p/gj37765/source/browse/trunk/Meta+Tag+Generator+Tool.html?r=177
Seen in your template....

19 June 2012 at 00:21 Author

@Anonymous I have not used this tag in my template. You have seen this tag in other template

19 June 2012 at 05:24

hi dear sonu bhai, I observed your post. i like it so much. i have one doubt. Your profile picture named "Threaded Comments With Different Author Color Comments" is small in blog home page, but it become big in blog post page. What is the name of this tips. please tell me. Hope you will help me

19 June 2012 at 07:04 Author

Hi Sonu,
Once again awesome work by you. Thank you :)

19 June 2012 at 08:04 Author

@Dayana It's auto read more hack

21 June 2012 at 06:03

Thanks sonu, Great work
Tech Blog

Qwerty

26 June 2012 at 09:03

It shows something like this when I preview it.
"
Message error XML: The entity name must immediately follow the '&' in the entity reference.
Error 500"

Please help

Antusia

30 June 2012 at 03:41

Awesome.. :D
btw can you make a post about how to make 'next, previouse & home' like yours? pleaseeeee :D

20 July 2012 at 20:45 Author

brother tried 10 times not working i Sent My Templates To You .it showing this >>>Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The entity name must immediately follow the '&' in the entity reference.

help please>>>

music

20 July 2012 at 23:54

Please help me
message error
Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly.
XML error message: The entity name must immediately follow the '&' in the entity reference.

21 July 2012 at 00:54 Author

@ADMIN There is an error in the widget. Now the error is removed , reinstall this widget it will work fine

@Gurmeet singh There is an error in the widget. Now the error is removed , reinstall this widget it will work fine

21 July 2012 at 02:47 Author

and how can i get comment's like you.

21 July 2012 at 03:33

@sonu
Tanxs :)

21 July 2012 at 03:35

ADMIN

21 July 2012 at 06:49

brother not working..properly...

make a comment and check here.. tricksandteachlab.blogspot.com

21 July 2012 at 08:14 Author

@ADMIN Thats your template problem

Aksatriya Diwangkara Nusantara

18 August 2012 at 00:07

yeah this is cool man ...
www.3nura.blogspot.com

18 August 2012 at 00:25

@sonu Test 123

18 August 2012 at 00:32

hey please answer .. how to make threaded comment like yours ??? with simply edited ??

20 August 2012 at 09:00 Author

its very complicated mainly the last step for me . hello , can you add a simple '' add to blogger '' button by which i can simply add that script on blogger .
Please reply.thank you

20 August 2012 at 09:48 Author

@Tblogger SM You have to add the codes in the body of your template. There is no any add to blogger button for this widget

26 August 2012 at 20:17

everything implemented but avatar pictures are not showing help!!

website,
H4ck3r Cracks

27 August 2012 at 00:12 Author

@Zulqurnain jutt I have checked your blog, you have not installed this comments on your blog

mal

29 September 2012 at 11:47

please help me

http://malwarepanda.blogspot.de/

Baber Siddiqui

1 October 2012 at 20:29

lots of code lines that you must replace
i cant understand after this step what i have to do after this step???

1 October 2012 at 22:49 Author

@baber Siddiqui Send me your template to sonu@mybloggertools.org I will add it

3 October 2012 at 08:01

@sonu
Received ?????

Hemant Verma

15 October 2012 at 05:28

not able to do?

will u do it for me ?

15 October 2012 at 09:09 Author

@Hemant Verma Try out with more attension

7 November 2012 at 05:00 Author

@new era Try out with more attension

8 November 2012 at 00:26 Author

@new era Send me your template in .xml format to sonu@mybloggertools.org

17 November 2012 at 05:29 Author

@new era Remove these codes from your template
.comments .avatar-image-container {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #DDDDDD;
float: left;
margin: 0 10px 10px 0;
max-height: 35px;
overflow: hidden;
padding: 2px;
width: 35px;
}
.comments .avatar-image-container img {width:35px;height:35px;}

17 November 2012 at 07:36 Author

@new era Send me your template

Click to Add a New Comment

If you're asking a question click on Subscribe By Email link, on the comment form, to be notified of replies.
Do NOT add links to the body of your comment as they will not be published.
Only the comments posted in ENGLISH will be approved.
If you have a problem check first the comments , maybe you will find the solution there.