Threaded comments for blogger without popup window




It's been a while from my last tutorial. In some previous tutorials I presented you with threading comment , a system to replace the default Blogger comment system.
Since then many of you wanted that popup comment window to disappear and the comment form to be displayed under the comment in need of a reply.
The next tutorial is  just about that implementing the threaded comment with the reply comment form under the comment in need of a reply... and a few other options like display the image links as actual image , showing youtube embed videos and showing emoticons in comments.



How to make threaded comments on blogger?

1. Log in to your dashboard--> Design- -> Edit HTML

2. Click on "Expand Widget Templates"

3. Search "Ctrl+F" and find ]]></b:skin>. Before it paste the code:

#comments h3 {margin-bottom:15px;font-size:18px;}
.comment_avatar_wrap{
width:42px;
height:42px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
background:#fcfcfc;
padding:4px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
text-align:center;
margin-bottom:20px;
}
#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:10px;
}
#comments .avatar-image-container img {
width: 42px;
height: 42px;
max-width: 42px;
max-height: 42px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj558f0dNxWd8gafT58BclVtbFAifFaL-JjQdHcxR9Dw8v_HjLCy60Ezv82S6A4lErGBPNeUBGF1p_T7pVt9sPHqGMVpP3433HWGskhZ-nKzh9jABdsaywA83XTrdYBXVGh15Y4iHhJoKc8/s1600/anon.jpg) no-repeat;
}
.comment_name a {
font-weight: bold;
padding: 5px 0 0 0;
font-size: 13px;
text-decoration: none;
}
.comment_admin .comment_name  {
font-weight: bold;
padding: 10px;
font-size: 13px;
text-decoration: none;
background:#ECF3F7;
}
.comment_admin .comment_date  {
font-weight: normal;
font-size:11px;
}
.comment_name {
background:#f0f0f0;
padding:10px;
font-size:13px;
font-weight:bold;
}
.comment_service{
margin-top:5px
}
.comment_date {
color: #a9a9a9;
float:right;
font-size:11px;
font-weight:normal;
margin-top:2px;
}
.comment_body{
margin-top:-72px;
margin-left:66px;
background:#fcfcfc;
border:1px solid #ddd;
padding:10px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
.comment_body p {
line-height: 1.5em;
margin: 5px 0 0 0;
color: #666;
border:1px solid #f1f1f1;
font-size: 13px;
word-wrap:break-word;
background:#fff;
padding:10px;
}
.comment_inner {
padding-bottom: 5px;
margin: 5px 0 5px 0;
}
.comment_child .comment_wrap {padding-left: 7%;}
.comment_reply {
display: inline-block;
margin-left:-5px;
padding: 1px 11px;
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;
}
.comment_reply: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%);
}
.unneeded-paging-control {display: none;}
.comment-form {max-width: 100%;!important;}
#comment-editor {width:101%!important}
.comment_form a {
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
font-family: Arial, Helvetica, Garuda, sans-serif;
font-size: 15px;
}
.comment_form a:hover {text-decoration: underline;}
.comment-form p {
background: white;
padding: 7px 10px 7px 10px;
margin: 5px 0 5px 0;
border: 1px solid #C3D7E2;
color: #888;
font-size: 13px;
line-height: 20px;
width:94%;
}
.comment_reply_form {
padding: 0 0 0 70px;
}
.comment_reply_form .comment-form {width: 99%;}
.comment_emo_list .item {
float: left;
text-align: center;
margin: 10px 10px 0 0;
height: 40px;
width:41px;
}
.comment_emo_list span {
display: block;
font-weight: bold;
font-size: 11px;
letter-spacing: 1px;
}
.comment_emo_list span {
display: block;
font-weight: bold;
font-size: 11px;
letter-spacing: 1px;
}
.comment_youtube {max-width:100%!important;width:400px;height:225px;display:block;margin:auto}
.comment_img {max-width:100%!important;}
.deleted-comment {
padding: 10px 10px 10px 10px;
display: block;
color: #CCC;
}
.comment_arrow {
display: block;
width: 9px;
height: 18px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3mn0AZQZKFUrJQ-HMWxjXfyH3qup4Fg_yIEBhyphenhyphenkIlR5IPdsqSQTagRF4CzwWENdR-WlXyFw8zN7QpWHvzt8L_br8ZyFaytdgZ45xM2VZP3QY19UQtAjNxe3prAmL2ug6StnIf0Y34Ydk/s1600/comment-arrow.gif) no-repeat;
position: absolute;
margin-left: -19px;
}
.comment_header{width:50px}
#respond {
overflow: hidden;
padding-left: 10px;
clear: both;
}
.comment-delete img{float:right;margin-left:10px;}

4. The final step is to search for the following code:

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

lots of code lines that you must replace

</b:includable>

... and replace the code lines between that includable with the next code:

<div class='comments' id='comments'>
    <a name='comments'/>
 <b:if cond='data:post.allowComments'> 
  <b:if cond='data:post.numComments != 0'>
   <h3>
    <b:if cond='data:post.numComments == 1'>1 <data:commentLabel/>:
     <b:else/>
     <data:post.numComments/> <data:commentLabelPlural/>
    </b:if>
   </h3>
  </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'>
      <data:comment.authorAvatarImage/>
                                 </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)'>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>        
                  <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'>
     <h3 id='comment-post-message'><data:postCommentMsg/></h3>
      <div class='comment_emo_list'/>                                                                                               
       <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 = 6;
        Display_Emo = true;
        Replace_Youtube_Link = true;
        Replace_Image_Link = true;
                                Replace_Force_Tag = true;
        Replace_Image_Ext = ['JPG', 'GIF', 'PNG', 'BMP']; Replace_Image_Link=true
       
        // Emoticon
        Emo_List = [
        ':)'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9L2-qE9C9WJx6NRswU3UhOAFgBnCQW_xmfyhTc6EuCZSlOfUA4LsQOcO52Yp7Uq1PSP92SQXIGYoJsp3a1YFPRMmCRvfqumtzgHV0M4hR4xiuyk9d9Fwc33b5GZSQjw5UMRjSwJAXslw/s1600/smile1.gif',
        ':('  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhefMJNXEjUXAav91k-KTlqMVyKyO5nA3hLrT8rODnCShU8z0ad6yItc3aN7PYHKRlsX2Z6QcXIdwYN5zvDWnPADUAgHF8Xm3dxjXdR-pL7wU4pAoaE8amsXmuhUon1oxF4EICkqqBAtZA/s1600/sad.gif',
        '=('  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEU-vMk8f4jJCGl6jJ-QHl1zMccZdyUjJ0tU00lefJELYTT0Euw6L8DYv36XFOeAIi9EUOFXC9a6Kq-QonO1VjSufb6a4e-p83AiN0KH0B2_jOwTkWGImc83vQP4Ujs5-KvHbdOFw98BY/s1600/sadanimated.gif',
        '^_^'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDJetNkc6pxOPuWjY8YXx2dpLD4hc5OhPh2xUNnlep90VniQk49Ecr0WmtAAt0bb7Qqz0BRFPAVNUTO3FRxBbFnOqpPFAMa6XjtG9sBtN14HVlHjt9DArrLwYC56MkQr_DuB_JPki1kR0/s1600/smile.gif',
        ':D'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfiDyNObCp2EgNGUwkbGZZ_FcGoyttiO1OeLYe15Tre1u4PZknop0XmpQmOIk715YBs0PYi86AVTzlVeg5UFdmBejDEudzi00HLn2Or-gPY4s1tPy0Q53gmSyb-66HUVD-RdIGJAGnnt8/s1600/icon_smile.gif',
        '=D'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXA9vxSRvVeJg2Q3YXs5QKiHnsK7OnZCfWU42D02KRnbmX9hBj6wpBInDnGQj6OkgDjO-Ps8ApbCvvCyg87z2a2TNbVY1iRlspneGodx5WbqpkF3SKTaxeONji7_18gIZr5E4I-rZ6tBE/s1600/hihi.gif',
        '|o|'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRzWf1gyORPgqduveYGCc1BCSbO8cQF3dU-yNILKNIp8N8mTTvchrAo8jJv1G2pZGjff22vEewhF8tw21d0fqGI-zJepCTZXUMOqUa7uHDC4cRWliOvYyjBHpilK_wXXNIL6VUNIEWowI/s1600/applause.gif',
        '@@,'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFOu_673fP39fOejUKDZIXlkUpAorbVy5sbNp00xlw0l5WacGnUzMCVm7WDqZvRsedJCapSSWz4YIg_Xb5bhuW1zIf2E7Zfnukyng20QD0paJZQFFbMgy9nRINMO2GP6Z1XZSv4OrELXc/s1600/rolleyes.gif',
        ';)'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFzMKtFDvvitzzLFGKqof4wnylXAJ1JM8JELDjC-ocWlacsiCSLw3xVXqIR9W5vLvVwbAffCz9V5CcU7HuUi4vt21oxvOsFr5T1aPDsZwl_tTnYFArHlPr2QKiM71fhehtDTA0xfTb64E/s1600/wink.gif',
        ':-bd'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeY06QRqLa4o6zPIP-39tGCerHVwUnBs_lYj855rRyozt2KdaJKg56wqxF2OaZ9kXGOZCHbq-YHwREkkwywRQqKAzlOCx5eWh2D0toMBhFcSzBQlKlbVeMzeVXLjl47Ynd54_IVVUhV2Q/s1600/thumb.gif',
        ':-d'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqsCe86tfw5ROT00U_oKQvieQfj4_yWayoUZKGgZ-WR3TnXt-I0FN_vIf8OoFiB6Pxcm_wMh9HQ2XJ-Q09XZMQuDLsnVEiBLrEp7oRSnTsQb8J6itGcb7P5KY0KoEVEH-RvYa46ldWkkE/s1600/thumbsup.gif', 
                                                                 ':p'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgndOHvxd87lQe8b4zMgDm7Dz0blFAmu9n6hDmJUTVQXwrx-gUaqv0OGtO0RXTKRqJOkeC-7CShy02FnZjuV9u13TWI5TtvduR6yWSERU_Lx-qE7RbeR5z3OcrFBgO9RR_9gw5KPJ16_gA/s1600/wee.gif',      
        ]; 
       
                              
                                //Config Force tag list, define all in lower case
                                Force_Tag = [
                                    '[pre]','<pre>',
                                    '[/pre]','</pre>',
                                    '<pre class="brush: plain; title: ; notranslate" title="">','&lt;code&gt;',
                                    '</pre>','</code>'
                                ];
     
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('3 o=\'.1c\';3 1b=$(\'#O-19\').G(\'A\');u 1l(F){3 1j=\' \\n\\r\\t\\f\\1D\\1G\\1F\\1E\\2l\\2k\\2i\\2f\\2c\\26\\25\\23\\1Y\\1S\\1N\\1L\\1H\\2v\\1M\\2p\\24\\22\\1R\';E(3 i=0;i<F.5;i++){9(1j.d(F.1Q(i))!=-1){F=F.b(0,i);11}}z F}$(\'#1P .1i p\').j(u(y,7){9(1J){3 l=\'1v://13.V.W/1y?v=\';3 8=7.d(l);D(8!=-1){1d=7.b(8);J=1l(1d);3 X=J.d(\'&\');3 N=\'\';9(X==-1){N=J.b(l.5)}Y{N=J.b(l.5,X)}3 1r=\'<1u B="1T" A="1v://13.V.W/1U/\'+N+\'?1V=1" 1W="0" 2w></1u>\';7=7.b(0,8)+1r+7.b(8+J.5);8=7.d(l);9(8==-1){l=\'1Z://13.V.W/1y?v=\';8=7.d(l)}}}9(21){3 Z=\'\';3 s=7;E(3 i=0;i<1w.5;i++){3 l=\'.\'+1w[i];3 m=s.C();3 8=m.d(l);D(8!=-1){k=s.b(0,8+l.5);m=k.C();3 q=\'2h://\';3 w=m.d(q);3 I=\'\';D(w!=-1){I=q.M();k=k.b(w+q.5);m=k.C();w=m.d(q)}q=\'2n://\';m=k.C();w=m.d(q);D(w!=-1){I=q.M();k=k.b(w+q.5);m=k.C();w=m.d(q)}9(I==\'\'||k.5<6){11}k=I+k;Z+=s.b(0,8+l.5-k.5)+\'<10 A="\'+k+\'" B="2r"/>\';s=s.b(8+l.5);m=s.C();8=m.d(l)}}7=Z+s}9(1A){3 5=x.5;9(5%2==1){5--}E(3 i=0;i<5;i+=2){3 S=\'<10 A="\'+x[i+1]+\'" B="1B"/>\';8=7.d(x[i]);D(8!=-1){7=7.b(0,8)+S+7.b(8+x[i].5);8=7.d(x[i])}}}9(1I){3 5=R.5;9(5%2==1){5--}E(3 i=0;i<5;i+=2){D(1){3 s=7.M();8=s.d(R[i]);9(8!=-1){7=7.b(0,8)+R[i+1]+7.b(8+R[i].5)}Y{11}}}}z 7});$(\'.1K\').j(u(y,7){9(1A){3 5=x.5;9(5%2==1){5--}3 12=\'\';E(3 i=0;i<5;i+=2){3 1e=\'<1f>\'+x[i]+\'</1f>\';3 S=\'<10 A="\'+x[i+1]+\'" B="1B"/>\';12+=\'<Q B="1O">\'+S+1e+\'</Q>\'}z 12}});$(\'.1g .1i p\').j(u(i,h){T=h.M();y=T.d(\'@<a U="#c\');9(y!=-1){14=T.d(\'</a>\',y);9(14!=-1){h=h.b(0,y)+h.b(14+4)}}z h});u 1k(g){r=g.d(\'c\');9(r!=-1)g=g.b(r+1);z g}u 1m(g){g=\'&1X=\'+g+\'#%1n\';1o=1b.20(/#%1n/,g);z 1o}u 1p(){j=$(o).j();$(o).j(\'\');o=\'.1c\';$(o).j(j);$(\'#O-19\').G(\'A\',1b)}u 1q(e){g=$(e).G(\'15\');g=1k(g);j=$(o).j();9(o==\'.1c\'){1s=\'<a U="#1t" 27="1p()">\'+28.29+\'</a><a 2a="1t"/>\';$(o).j(1s)}Y{$(o).j(\'\')}o=\'#2b\'+g;$(o).j(j);$(\'#O-19\').G(\'A\',1m(g))}16=2d.2e.U;17=\'#O-2g\';18=16.d(17);9(18!=-1){1x=16.b(18+17.5);1q(\'#2j\'+1x)}E(3 i=0;i<P.5;i++){9(\'1z\'2m P[i]){3 g=P[i].1z;3 1a=2o($(\'#c\'+g+\':L\').G(\'1C\'));$(\'#c\'+g+\' .2q:L\').j(u(y,7){3 H=P[i].15;9(1a>=2s.2t){$(\'#c\'+H+\':L .2u\').1h()}3 K=$(\'#c\'+H+\':L\').j();K=\'<Q B="1g" 15="c\'+H+\'" 1C="\'+(1a+1)+\'">\'+K+\'</Q>\';$(\'#c\'+H).1h();z(7+K)})}}',62,157,'|||var||length||oldhtml|check_index|if||substring||indexOf|||par_id|||html|img_src|search_key|upper_html||Cur_Cform_Hdr||http_search||temp_html||function||find_http|Emo_List|index|return|src|class|toUpperCase|while|for|str|attr|child_id|save_http|yt_link|child_html|first|toLowerCase|yt_code|comment|Items|div|Force_Tag|img_html|temp|href|youtube|com|yt_code_index|else|save_html|img|break|newhtml|www|index_tail|id|cur_url|search_formid|search_index|editor|par_level|Cur_Cform_Url|comment_form|ht|img_code|span|comment_wrap|remove|comment_body|whitespace|Valid_Par_Id|trim|Cform_Ins_ParID|7B|n_cform_url|Reset_Comment_Form|Display_Reply_Form|yt_video|reset_html|origin_cform|iframe|http|Replace_Image_Ext|ret_id|watch|parentId|Display_Emo|comment_emo|level|x5b|x7d|x7c|x5d|u2008|Replace_Force_Tag|Replace_Youtube_Link|comment_emo_list|u2007|u200a|u2006|item|comment_block|charAt|u3000|u2005|comment_youtube|embed|autohide|frameborder|parentID|u2004|https|replace|Replace_Image_Link|u2029|u2003|u2028|u2002|u2001|onclick|Msgs|addComment|name|r_f_c|u2000|window|location|xa0|form_|HTTP|x0b|rc|x3e|x3c|in|HTTPS|parseInt|u200b|comment_child|comment_img|Config|maxThreadDepth|comment_reply|u2009|allowfullscreen'.split('|'),0,{}))       
               
       //]]>
         </script>

Save the template and see the results.

5. IMPORTANT UPDATE: If after this 5 steps the comments doesn't appear like in the demo , it's because Blogger implemented they're own threaded comment system. To replace it and have the comments like in the tutorial you must find the next code ( you can find the code in multiple places, replace all the codes you can find):
<b:include data='post' name='threaded_comments'/>
...and replace the red code lines with the next line:

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

Save again and see the results.

Get Latest Updates For Free!

Subscribe via Email

22 comments

April 11, 2013 at 8:27 AM

thanks for info

May 14, 2013 at 7:32 AM

thank You so much

May 31, 2013 at 9:27 PM

I followed all the directions but It still doesn't work. In fact it makes the post disappear entirely.

June 2, 2013 at 10:19 AM

@JessicaSend me the template to see what the problem is.

June 2, 2013 at 10:20 AM

@SabrinaSend me the template to see what the problem is

June 4, 2013 at 11:08 PM

@ArtisTutor

This is just a test blog so there is not much there. If you click on the comments you can see that what it brings up is an empty page.

http://jlc-testblog.blogspot.com/

June 9, 2013 at 8:51 AM

can you help me in installing this code?
my blog: www.storyfauziah.blogspot.com

June 14, 2013 at 10:14 PM

@JessicaTry again now and it will work. I just made some little modification to the code.

June 14, 2013 at 10:16 PM

@Fauziah AzahraHelp you how? Follow the tutorial and you will be able to implement the comments on your blog.

July 3, 2013 at 10:30 AM

ok thenks for your tips tricks

September 5, 2013 at 1:13 PM

Hey admin, how to change fonts colour in comment

September 13, 2013 at 9:54 AM

I eliminate the above script code, and replaced with this http://dhf-project.googlecode.com/svn/brain/attitude/input-response.js, how soluisinya? because not working. thanks

September 13, 2013 at 11:36 PM

@IdTutorPlusFor the comment to work you cannot replace any of the code from the tutorial.

September 18, 2013 at 1:09 AM

Hi! Searched a long time for such a tutorial. Now I did everything from the tutorial. (Checked it twice.) But it didn't work. No my comments are a mess. :-/
Don't know why it didn't worked...
http://www.chamy.at/

September 20, 2013 at 11:46 AM

Hi! Just wanted to ask, if you got my comment a few days ago. :-)

September 21, 2013 at 3:24 PM

Ok, on my normal blog I made this tutorial undo, because it didn't worked.
But now I tried it on my test-blog: http://chamytest3.blogspot.co.at/2013/09/testi-testi-test-d.html#comment-form

And it didn't work. :-/ So pls. can you help me? Thx!!

September 22, 2013 at 7:50 PM

@ChamySend me your template and I will fix it.

September 22, 2013 at 10:53 PM

@ArtisTutor Thanks a lot, I sent you my template! :-)

September 27, 2013 at 12:08 PM

Thansk For The Info

October 3, 2013 at 10:42 AM

thanks to artistutorial, informatif....

November 13, 2013 at 1:45 AM

So I tried this after being absolutely content with the other code from your 2012 tutorial of threaded comments...I just thought this update would be nice to have.

It worked - just half way, I would say.
The formatting changed, there were the emoticons and such - but I lost the indented thread style and all old comments were in chronological order instead of logical order (as in replies underneath the original comment etc).

Any way I could possibly find out what is causing that issue?
I restored my backup for now since I can't have chronological order on old posts, too confusing.

Thanks a lot for any explanation or helping hand in advance!

November 13, 2013 at 6:15 PM

@GodfrinaThe main problem is that the script of the old popup threaded comments is not compatible with the new one , so if you upgrade from the pop-up comment form to the upgraded comment form all the previous comments will be displayed without threaded style.

Only the new ones made after the upgrade will be shown as threaded.

Click to Add a New Comment

Leave your comment

- If you're asking a question click the Subscribe By Email link, below 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.

Read latest articles in your favorite news reader
Sign up for newsletter

Find us on Facebook

Followers