Add Threaded

Blogger threaded comments are everywhere now, but one of the basic feature which we always missed being on Blogger Blog, is the nested threaded comment feature with more than 2 level deep. A good blog commenting system helps to build a strong readership and help readers to engage more into discussion. In wordpress the threaded comments system is nested by default. But in blogger the threaded comment feature is available, but it is nested only upto 2 level. Recently Blogger Introduced Blogger threaded comment feature. Many bloggers found it to be useful but it is only limited with two level commenting. By 2 level commenting means the reply to comment is only 2 level deep. You cannot reply to comments in threaded form which are added as a reply. Threaded comments on Blogger is still immature and need more refine like nested commenting in wordpress with multilevel. That’s one of the many reasons. we prefer third party commenting system like DISQUS or Intense debate. For bloggers who like to acknowledge every comment reply in threaded form, this new threaded comment tutorial will be very useful. 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. This threaded comments include an author tag means when a blog author who write the comments on his blog post an author tag is displayed on his comment. You can even customize the color of author comments using css.

change publish post date in blogger


Live Demo

How To Add Nested 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
  • Press Ctrl + F and search the code shown below
]]></b:skin>
  • Now Paste the Code Shown Below just above/before it
#comments .avatar-image-container {
float:left;
margin:0 10px 0 0;
width:42px;
height:42px;
max-width:42px;
max-height:42px;
padding:0;
margin-bottom:5px
}

.comment_name a {
font-weight:700;
padding:5px 0 0;
font-size:13px;
text-decoration:none
}

.comment_name {
background:#f1f1f1;
padding:10px;
font-size:13px;
font-weight:700;
position:relative;
color:#000
}

.comment_name a {
color:#000
}

.comment_body {
margin-left:66px;
margin-top:-84px;
border:5px solid #e3e3e3;
border-radius:8px
}

.comment_body p {
line-height:1.5em;
margin:0;
color:#000;
font-size:13px;
word-wrap:break-word;
background:#fff;
padding:10px
}

.comment_inner {
padding-bottom:5px;
margin:5px 0
}

.comment_child .comment_wrap {
padding-left:4%
}

.comment_reply {
display:inline-block;
margin-left:-5px;
margin-top:8px;
padding:1px 9px;
border:1px solid #C4C4C4;
border-top-color:#E4E4E4;
border-left-color:#E4E4E4;
color:#424242!important;
text-align:center;
text-shadow:0 1px 0 #fff;
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
}

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

.comment_youtube {
max-width:100%!important;
width:400px;
height:225px;
display:block;
margin:auto
}

.comment_img {
max-width:100%!important
}

.deleted-comment {
padding:10px;
display:block;
color:#000;
background:#fff
}

.comment_arrow {
display:block;
width:9px;
height:19px;
background:url(http://4.bp.blogspot.com/-QIDRovWyJgc/Vo5kXs3H7aI/AAAAAAAAAT8/GeUs4Erp-Oo/s1600/arr.png) no-repeat;
position:absolute;
margin-left:-13px
}

.comment_header {
width:50px
}

.comment_service {
float:right
}

.comment_avatar img {
width:42px;
height:42px;
border:6px solid #e3e3e3;
border-radius:50px
}

.comment-delete img {
float:right;
margin-left:15px;
margin-top:3px;
margin-right:10px
}

.comment_author_flag {
display:none
}

.comment_admin .comment_author_flag {
display:inline;
background:url(http://4.bp.blogspot.com/-0lhurc9nRb4/VqtcOHmouSI/AAAAAAAAAJI/2aQ2WASTrkg/s1600/author.png)no-repeat;
font-size:13px;
font-weight:400;
padding:2px 6px;
right:-18px;
margin-top:-18px;
color:#fff;
border-radius:4px;
text-transform:uppercase;
position:absolute;
width:36px;
height:36px
}

.comment_date {
color:#555;
float:right;
font-size:11px;
font-weight:400;
margin-top:2px
}
  • Now search the code shown below
<b:includable id='threaded_comments' var='post'>
lots of code lines
</b:includable>
  • Now paste the code shown below in place of lots of code lines
<div class='comments' id='comments'>
        <b:if cond='data:post.allowComments'>
  <b:if cond='data:post.numComments != 0'>
   <h4>
    <b:if cond='data:post.numComments == 1'>1 <data:commentLabel/>:
     <b:else/>
     <data:post.numComments/> <data:commentLabelPlural/>
    </b:if>
   </h4>
  </b:if>
           
  <b:if cond='data:post.commentPagingRequired'>
   <span class='paging-control-container'>
    <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
    &#160;
    <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
    &#160;
    <data:post.commentRangeText/>
    &#160;
    <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
    &#160;
    <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
   </span>
  </b:if>
                   
  <div class='clear'/>
  <div id='comment_block'>

   <b:loop values='data:post.comments' var='comment'>
                                                                       
   <div class='comment_wrap' expr:auclass='data:comment.adminClass' expr:id='data:comment.anchorName' level='0'>                                                                                  
     <a expr:name='data:comment.anchorName'/>

      <b:if cond='data:post.adminClass == data:comment.adminClass'>
       &lt;div class=&#39;comment_inner comment_admin&#39;&gt;
       <b:else/>
                            &lt;div class=&#39;comment_inner&#39;&gt;
      </b:if>
 
    <div class='comment_header'>
     <div class='comment_avatar_wrap'>
     <div class='comment_avatar'>
      <img alt='avatar' expr:src='data:comment.authorAvatarSrc' expr:title='data:comment.author'/>
              </div>
<a class='comment_reply' expr:href='&quot;#r_&quot;+data:comment.anchorName' expr:id='&quot;r&quot;+data:comment.anchorName' onclick='javascript:Display_Reply_Form(this)' title='REPLY'>REPLY</a>
     </div>
                     
     <div class='clear'/>
    </div>
  <div class='comment_body'>
                                      <span class='comment_arrow'/>
     <div class='comment_name'>
      <b:if cond='data:comment.authorUrl'>
       <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'><data:comment.author/></a>
       <b:else/>
       <data:comment.author/>
      </b:if>
<b:if cond='data:comment.author == data:post.author'>
         <span class='comment_author_flag'/>
       </b:if>    
                  <span class='comment_service'>

                      <b:include data='comment' name='commentDeleteIcon'/>
      <span class='comment_date'><abbr class='published' expr:title='data:post.timestampISO8601'>                   <data:comment.timestamp/></abbr></span>
  </span>
</div>
     <b:if cond='data:comment.isDeleted'>
      <span class='deleted-comment'><data:comment.body/></span>
      <b:else/>
      <p><data:comment.body/></p>
                        <div class='clear'/>
                   
     </b:if>
                                                   
    </div>                      
     <div class='clear'/>
     &lt;/div&gt;
     <div class='clear'/>
       
    <div class='comment_child'/>
    <a expr:name='&quot;r_&quot;+data:comment.anchorName'/>
    <div class='comment_reply_form' expr:id='&quot;r_f_&quot;+data:comment.anchorName'/>          
    </div>
   </b:loop>          
   </div>
    <div class='clear'/>
    <b:if cond='data:post.commentPagingRequired'>
     <span class='paging-control-container'>
       <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
       &#160;
       <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
       &#160;
       <data:post.commentRangeText/>
       &#160;
       <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
       &#160;
       <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
     </span>
    </b:if>
    <div class='clear'/>
  <div class='comment_form'>      
     
   <b:if cond='data:post.embedCommentForm'>
    <b:if cond='data:post.allowNewComments'>
 
                                                                                               
       <b:include data='post' name='threaded-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>
  </div>
 </b:if>
</div>            
 
  <script type='text/javascript'>
       //<![CDATA[
       if (typeof(jQuery) == 'undefined') {
 //output the script (load it from google api)
 document.write("<scr" + "ipt type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js\"></scr" + "ipt>");
}
       //]]>
       </script>
 
       <script async='async' expr:src='data:post.commentSrc' type='text/javascript'/>
       <script type='text/javascript'>
   
         <b:if cond='data:post.numComments != 0'>
         var Items = <data:post.commentJso/>;
         var Msgs = <data:post.commentMsgs/>;
         var Config = <data:post.commentConfig/>;
        <b:else/>
         var Items = {};
         var Msgs = {};
         var Config = {&#39;maxThreadDepth&#39;:&#39;0&#39;};
        </b:if>
       //<![CDATA[
       //Global setting
Config.maxThreadDepth = 2;
var Cur_Cform_Hdr='.comment_form';var Cur_Cform_Url=$('#comment-editor').attr('src');function trim(a){var b=' \n\r\t\f\x5b\x5d\x7c\x7d\x3c\x3e\x0b\xa0\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u200b\u2028\u2029\u3000';for(var i=0;i<a.length;i++){if(b.indexOf(a.charAt(i))!=-1){a=a.substring(0,i);break}}return a}$('.comment_wrap .comment_body p').html(function(i,h){temp=h.toLowerCase();index=temp.indexOf('@<a href="#c');if(index!=-1){index_tail=temp.indexOf('</a>',index);if(index_tail!=-1){h=h.substring(0,index)+h.substring(index_tail+4)}}return h});function Valid_Par_Id(a){r=a.indexOf('c');if(r!=-1)a=a.substring(r+1);return a}function Cform_Ins_ParID(a){a='&parentID='+a+'#%7B';n_cform_url=Cur_Cform_Url.replace(/#%7B/,a);return n_cform_url}function Reset_Comment_Form(){html=$(Cur_Cform_Hdr).html();$(Cur_Cform_Hdr).html('');Cur_Cform_Hdr='.comment_form';$(Cur_Cform_Hdr).html(html);$('#comment-editor').attr('src',Cur_Cform_Url)}function Display_Reply_Form(e){par_id=$(e).attr('id');par_id=Valid_Par_Id(par_id);html=$(Cur_Cform_Hdr).html();if(Cur_Cform_Hdr=='.comment_form'){reset_html='<a href="#origin_cform" onclick="Reset_Comment_Form()">'+Msgs.addComment+'</a><a name="origin_cform"/>';$(Cur_Cform_Hdr).html(reset_html)}else{$(Cur_Cform_Hdr).html('')}Cur_Cform_Hdr='#r_f_c'+par_id;$(Cur_Cform_Hdr).html(html);$('#comment-editor').attr('src',Cform_Ins_ParID(par_id))}cur_url=window.location.href;search_formid='#comment-form_';search_index=cur_url.indexOf(search_formid);if(search_index!=-1){ret_id=cur_url.substring(search_index+search_formid.length);Display_Reply_Form('#rc'+ret_id)}for(var i=0;i<Items.length;i++){if('parentId'in Items[i]){var par_id=Items[i].parentId;var par_level=parseInt($('#c'+par_id+':first').attr('data-level'));$('#c'+par_id+' .comment_child:first').html(function(a,b){var c=Items[i].id;if(par_level>=Config.maxThreadDepth){$('#c'+c+':first .comment_reply').remove()}var d=$('#c'+c+':first').html();d='<div class="comment_wrap" id="c'+c+'" data-level="'+(par_level+1)+'">'+d+'</div>';$('#c'+c).remove();return(b+d)})}}var avatar=$("#comments");avatar.find('.comment_avatar img').each(function(){var a=$(this).attr('src');$(this).show().attr('src',a.replace(/\/s[0-9]+(\-c)?\//,"/s55-c/"))});          
       //]]>
         </script>
  • Now save your template
How to enable Blogger Threaded comment

You need to have blog commenting feature enabled for this nested threaded comment feature to work. and it should be in embedded mode. To do this Go To Settings > Posts and comments. and then select Comment Location as embedded