So it can bring you more readers to comment and interact with your blog. First of all, I don't think there is anyone that want to change something in blog design without a live view, check out this demonstration:
Blogger Threaded Comment Modification Features
If you install this threaded comment modification to your blogger blog then you will benefit from much features which are:- Elegant and modern design with better functionality.
- Ability for commenters to include emoticons in their comments.
- Commenters are able to convert code to be embed with a conversion box.
- You can allow users to post photos or YouTube videos into comments.
- Improved blogger threaded commenting system.
- You will be labeled as Admin if you comment.
- Smart layout that encourage users to comment on your posts
How to Install Threaded Comment Modification
It's simple, please navigate to your blogger account and go to you target blog's Dashboard > Template > Edit HTML then click (Ctrl + F) on your keyboard to look for the code below in the search box and click enter.
<b:include data='post' name='threaded_comments'/>
If you find the code replace it with this one:
<b:include data='post' name='comments'/>
After you replace it with the code above, please search again for this:
<b:includable id='comments' var='post'> ... </b:includable>
Again, replace all the code starting from (<b:includable id='comments' var='post'>) to (</b:includable>) with this one (Main Code):
<b:includable id='comments' var='post'>
<style type='text/css'>
/* CSS Comments */
#comments{background:#fff;clear:both;margin:10px auto 0;line-height:1em;padding:20px;border: 1px solid #e9e9e9;}
#comments h3{background:#fff;display:inline;line-height:20px;margin-bottom:15px;margin-top:0;font-family:'Oswald',sans-serif;font-size:16px;position:absolute;color:#666;font-weight:400;padding:10px 20px 10px 55px;border:1px solid #e9e9e9;}
#comments h3:before {font-family:fontawesome;content:"f086";margin-right:10px;font-size:20px;
color:#444;padding:10px 15px;position:absolute;left:0;top:0;}
#comments .click-comment{float:right;text-decoration:none;display:inline;line-height:20px;
margin-bottom:15px;margin-top:0;font-family:'Oswald',sans-serif;font-size:16px;
color:#888;font-weight:400;background:#dddddd;padding:10px 20px;
border:1px solid #e9e9e9;}
#comments .click-comment:hover{color:#444}
.comment_avatar_wrap{width:0;height:42px;border:none;background:none;text-align:center;padding:0;}
#comments .comment_avatar {width:42px;height:42px;max-width:42px;max-height:42px;background:#f9f9f9;padding:3px;text-align:center;position:absolute;top:19px;right:8px;border-radius:50%;}
#comments .comment_admin .comment_avatar{width:42px;height:42px;max-width:42px;max-height:42px;padding:3px;text-align:center;position:absolute;top:19px;right:8px;
border-radius:50%;}
#comments .comment_avatar img {width:42px;height:42px;max-width:42px;max-height: 42px;background:url(http://1.bp.blogspot.com/-SL82Yj_MkdE/VCNlr5Q1nWI/AAAAAAAAGf8/xzhe3TPouok/s1600/anonim.png) no-repeat;border-radius:50%;}
.comment_avatar img{width:42px;height:42px;background:url(http://1.bp.blogspot.com/-SL82Yj_MkdE/VCNlr5Q1nWI/AAAAAAAAGf8/xzhe3TPouok/s1600/anonim.png) no-repeat;border-radius:50%;}
.comment_name a{font-family:'Oswald',sans-serif;font-weight:400;font-size:16px;padding:5px 0;color:#fff;text-decoration:none}
.comment_name a:hover{color:#fff}
.comment_admin .comment_name{font-weight:400;font-size:16px;font-family:'Roboto Slab',sans-serif;text-decoration:none;background:none;padding:5px 0;}
.comment_admin .comment_date{left:10px;font-weight:400;font-size:11px;}
.comment_name{font-size:16px;font-family:'Roboto Slab', sans-serif;font-weight:400;padding:10px;position:absolute;left:5px;top:5px;display:inline;transition:all .3s ease-in-out;}
.comment_name:hover{color:#fff;}
.comment_admin .comment_name{padding:10px;left:5px;top:5px;display:inline;}
.comment_service{position:absolute;bottom:8px;left:8px;}
.comment_date a{left:0;font-size:11px;font-weight:400;text-transform:none;color:#aaacab;text-decoration:none}
.comment_body{margin:20px 0;background:#fafafa;padding:0;position:relative;border-bottom:2px solid #e9e9e9;}
.comment_body p{line-height:1.6em;color:#444;font-size:14px;font-family:'Open Sans',Helvetica,Arial,sans-serif;word-wrap:break-word;background:#fafafa;padding:20px}
.comment_child .comment_body p{color:#444;}
.comment_body p img{vertical-align:middle}
.comment_inner{padding-bottom:5px;margin:5px 0}
.comment_child .comment_wrap{padding-left:7%}
.comment_child .comment_body{margin-top:-15px;background:#fafafa;}
.comment_reply{float:right;display:inline;bottom:0;right:0;color:#888!important;text-align:center;text-decoration:none;background:#e9e9e9;font:11px/18px sans-serif;padding:3px 11px;}
.comment_reply:hover{text-decoration:none!important;background:#565f6a;color:#fff!important;text-shadow:none;}
.comment-form{width:100%;max-width:100%;margin-bottom:10px;padding:0;}
.comment_form a{text-decoration:none;font-weight:700;font-family:Arial,Helvetica,Garuda,sans-serif;font-size:15px;color:#444}
#comment-editor{width:103%!important;background:url('http://4.bp.blogspot.com/-jSUS8v5kwpQ/U8Z_6Ufr-PI/AAAAAAAAEYY/o4cQPKvt8vQ/s1600/loading.gif') no-repeat 50% 25%;position:relative;margin-left:-8px;margin-top:-15px}
.comment-form p{background:#fff;color:#666;border:1px solid #e9e9e9;font-size:14px;font-family:'Open Sans',Helvetica,Arial,sans-serif;line-height:1.2em;margin-bottom:15px;padding:5px 10px 10px 10px;border-radius:2px;}
.comment_reply_form{padding:0 0 0 7%}
.comment_reply_form .comment-form{width:100%}
.comment_emo_list .item{float:left;text-align:center;height:40px;width:41px;margin:0 0 10px;}
.comment_emo_list span{display:block;font-weight:400;font-size:11px;letter-spacing:1px;color:#444}
.comment_youtube{max-width:100%!important;width:400px;height:225px;display:block;margin:auto}
.comment_img{max-width:100%!important}
#respond{overflow:hidden;padding-left:10px;clear:both}
.comment-delete{position:absolute;display:none;top:0;right:-25px;color:red!important;text-align:center;text-decoration:none;font-family:'Open Sans';font-size:16px;font-weight:700;padding:0;opacity:0.7;transition:all .3s ease-in-out}
.comment_body:hover .comment-delete{display:inline-block!important;}
.comment-delete:hover{color:#444!important}
.unneeded-paging-control,.comment_author_flag{display:none}
.comment_admin .comment_author_flag {display:inline;background:rgba(255,255,255,0.3);font-family:'Open Sans',sans-serif;font-size:13px;font-weight:bold;width:42px;height:15px;right:6px;bottom:0;color:#fff;text-align:center;border-radius:3px;padding:3px 10px;margin-left:10px;text-transform:uppercase;}
.comment_child .comment_admin .comment_author_flag {background:rgba(255,255,255,0.3);color:#fff;}
.spammer-detected{font-size:14px!important;color:#fff!important;background:#5cb0d8!important;margin:25px;
border-radius:4px;display:inline-block;padding:10px 15px!important;}
.deleted-comment{display:block;color:#fff;word-wrap:break-word;background:#f35d5c;margin-top:10px;margin-bottom:20px;padding:10px;font-size:13px;font-family: 'Open Sans',Helvetica,Arial,sans-serif}
iframe{border:none;overflow:hidden}
.paging-control-container{text-align:center;margin:0 0 0 25%;}
.paging-control-container a{text-align:center;margin:0 auto;background:#ccc;border:1px solid #bbb;padding:3px 10px}
.comment_header {background:#8493a0;padding:2px 0;}
.comment_child .comment_header {background:#7a8694;}
#conversion-box, #hide-conversion,#emo-box,#hide-emo {display:none}
#conversion-box {width:100%;color:#eee;background:none;line-height:1.6em;margin-bottom:20px;padding:0;text-align:left;}
.checkbox{font:11px Tahoma,Verdana,Arial,Sans-Serif;line-height:1.6em;color:#eee;}
#codes{border:1px solid #e9e9e9;width:100%;height:200px;display:block;background-color:#fff;color:#999;font:normal 12px 'Courier New',Monospace;margin:7px 0 10px;padding:5px;transition:all 0.5s linear;}
#codes:focus{background-color:#fff;color:#666;border:1px solid #ddd;outline:none;transition:all 0.3s linear;}
.button-group{float:right;text-align:left;margin:0 auto}
button,button[disabled]:active{border:none;font-size:12px;font-family:'Open Sans';font-weight:normal;padding:4px 10px;text-decoration:none;background:#fff;color:#444;display:inline-block;transition:all 0.5s linear;cursor:pointer}
button:hover{background:#8493a0;color:#fff;transition:all 0.2s linear;}
button:active{background:#8493a0;color:#fff;}
button[disabled],button[disabled]:active{color:#c34535;cursor:default}
#opt1,#opt2,#opt3,#opt4,#opt5{display:inline-block;vertical-align:middle;border:none;outline:none;margin:0 10px 0 0}
.small-button a,.small-button1 a {font-size:13px;font-family:'Open Sans';cursor:pointer;font-weight:400;margin:15px 5px 5px 0;text-decoration:none;text-transform:none;text-shadow:none;display:inline-block;background-color:#8493a0;color:#fff;padding:4px 10px;cursor:pointer;border-radius:3px;}
.small-button:hover a,.small-button1:hover a{text-shadow:none;display:inline-block;background-color:#d9c98c;color:#fff;}
</style>
<script type='text/javascript'>
//<![CDATA[
function cdClear() {
var wtarea = document.getElementById('codes');
wtarea.value = '';
wtarea.focus();
document.getElementById('cvrt').disabled = false;
}
function cdConvert() {
var ctarea = document.getElementById('codes'),
cv = ctarea.value,
opt1 = document.getElementById('opt1'),
opt2 = document.getElementById('opt2'),
opt3 = document.getElementById('opt3'),
opt4 = document.getElementById('opt4'),
opt5 = document.getElementById('opt5');
cv = cv.replace(/t/g, " ");
if (opt1.checked) cv = cv.replace(/&/g, "&");
if (opt2.checked) cv = cv.replace(/'/g, "'");
if (opt3.checked) cv = cv.replace(/"/g, """);
if (opt4.checked) cv = cv.replace(/</g, "<");
if (opt5.checked) cv = cv.replace(/>/g, ">");
if (cv.lastIndexOf('n') != -1 || cv.length > 40) {
cv = cv.replace(/^/, "<i rel="pre">");
} else {
cv = cv.replace(/^/, "<i rel="code">");
}
cv = cv.replace(/$/, "</i>");
ctarea.value = cv;
ctarea.focus();
ctarea.select();
};
//]]>
</script>
<div class='comments' id='comments'>
<b:if cond='data:post.allowComments'>
<b:if cond='data:post.numComments != 0'>
<h3>
<b:if cond='data:post.numComments == 1'>1 Comment
<b:else/>
<data:post.numComments/> Comments
</b:if>
</h3>
<a class='click-comment' expr:title='data:commentLabelPlural' href='#comment-form'>Speak your mind</a>
</b:if>
<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl' expr:title='data:post.oldestLinkText'><data:post.oldestLinkText/></a>
 
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl' expr:title='data:post.olderLinkText'><data:post.olderLinkText/></a>
 
<data:post.commentRangeText/>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl' expr:title='data:post.newerLinkText'><data:post.newerLinkText/></a>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl' expr:title='data:post.newestLinkText'><data:post.newestLinkText/></a>
</span>
</b:if>
<div class='clear'/>
<div id='comment_block'>
<b:loop values='data:post.comments' var='comment'>
<div data-level='0' expr:class='data:comment.adminClass' expr:id='data:comment.anchorName'>
<b:if cond='data:post.adminClass == data:comment.adminClass'>
<div class='comment_inner comment_admin'>
<b:else/>
<div class='comment_inner'>
</b:if>
<div class='comment_body'>
<div class='comment_header'>
<div class='comment_avatar_wrap'>
</div>
<div class='clear'/>
</div>
<div class='comment_name'>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' expr:title='data:comment.author' rel='nofollow' target='_blank'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<div class='comment_author_flag'>admin</div>
</div>
<span class='comment_service'>
<span class='comment_date'><a expr:href='data:comment.url' rel='nofollow' title='comment permalink'>
<data:comment.timestamp/>
</a></span>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
<a class='comment_reply' expr:href='"#r_"+data:comment.anchorName' expr:id='"r"+data:comment.anchorName' onclick='javascript:Display_Reply_Form(this)' title='Reply'>Reply</a>
<div class='clear'/>
</b:if>
<div class='comment_avatar'>
<img alt='avatar' expr:src='data:comment.authorAvatarSrc' expr:title='data:comment.author'/>
</div>
</div>
<div class='clear'/>
</div>
<div class='clear'/>
<div class='comment_child'/>
<div class='comment_reply_form' expr:id='"r_f_"+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' expr:title='data:post.oldestLinkText'><data:post.oldestLinkText/></a>
 
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl' expr:title='data:post.olderLinkText'><data:post.olderLinkText/></a>
 
<data:post.commentRangeText/>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl' expr:title='data:post.newerLinkText'><data:post.newerLinkText/></a>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl' expr:title='data:post.newestLinkText'><data:post.newestLinkText/></a>
</span>
</b:if>
<div class='clear'/>
<div class='comment_form' id='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' expr:title='data:postCommentMsg'><data:postCommentMsg/></a>
</b:if>
</b:if>
<div class='thanks' style='float:right;margin-top:-54px;margin-right:2px;padding:7px 10px;border-bottom:1px solid #e9eaed;border-radius:2px;position:relative;background:#fff'>You are welcome to comment!</div>
</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' src='//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js' 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 = {'maxThreadDepth':'0'};
</b:if>
//<![CDATA[
//Global setting
Config.maxThreadDepth = 3;//Threaded comments depth level.
Display_Emo = true;//Show emoticons? type "false" to hide.
Replace_Youtube_Link = false;//Embed YouTube videos, type "false" to disable.
Replace_Image_Link = false;//Auto replace the image link, type "false" to disable.
Replace_Force_Tag = false;//Auto replace the virtual tag example: [pre] to <pre>, and [/ pre] to </ pre>.
Replace_Image_Ext = ['JPG', 'GIF', 'PNG', 'BMP'];// Support Images, only works when Replace_Image_Link = true.
//Pengaturan Emoticon
Emo_List = [
':)' ,'http://4.bp.blogspot.com/-J7s7flyAolE/U6tMYuCWJjI/AAAAAAAAD-g/ktLPs0sF0zM/s1600/smile.png',
':(' ,'http://1.bp.blogspot.com/-1BqZVIOmokE/U6tP_zEGUXI/AAAAAAAAD-4/Ykfh8PqPa74/s1600/Frown.png',
' =(' ,'http://2.bp.blogspot.com/-SL2PzXhI6-I/U6tMUbl4uBI/AAAAAAAAD9c/HmgkQTi81jc/s1600/berduka.gif',
'^_^' ,'http://2.bp.blogspot.com/-6JEoWkFJtMU/U6tMYfYjHJI/AAAAAAAAD-U/ggiVnSMQWEc/s1600/sm_smile.gif',
' :D' ,'http://3.bp.blogspot.com/-alzlBnNEQmI/U6tMWxMCe_I/AAAAAAAAD-E/upslDYz1T3o/s1600/laugh.png',
'=D' ,'http://1.bp.blogspot.com/-iVpfzVgecII/U6tQBGbBVNI/AAAAAAAAD_Q/yM9i3ANzAh4/s1600/Laughing.png',
'=)D' ,'http://1.bp.blogspot.com/-pdpnmWqSHyE/U6tQCnfbjeI/AAAAAAAAD_o/NfPqVrNVV-E/s1600/Yuck.png',
'|o|' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9GLEijyZv5HT6BjG30WF47KwTMVVx27S_2d82UZq4937c7mKhVc6LSSUrMWbvc3UYNRiRISBdknjNMKFFNno6ZlFIvNRZhl22gXrayxq0VyIDa6xSKyZsdT2dtXYjQ6pYUz0RLtcM8slJ/s1600/applause-yahoo-emoticon.gif',
'@@,' ,'http://1.bp.blogspot.com/-nb5zqf7iKBE/U6tMUWl6XcI/AAAAAAAAD9Y/V9qG-QRDslU/s1600/bingung.gif',
' ;)' ,'http://2.bp.blogspot.com/-EvSfZMZuwKo/U6tMVvRUL1I/AAAAAAAAD9w/1zzRy8EUC5A/s1600/cool.png',
':-bd' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWP0pCwEXJBuWRdOC4WK4fSCHqaFzSH6m-DPAoV1xJ-qssejBvwUTm8jULme6DfGh69gS0yRbjjr8mhHM80UPs7ud4MyDxzw-UJfgYLLX3ssL40anQSyqzvjKpDccwMUc0EbyfrlWyC4vI/s1600/thumbs-up-yahoo-emoticon.gif',
':-d' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrK2w_FdMWBp6_hnjDU4gZBlQ8eKeWSfqsEEAtLLggciwAfYMWUvcf-cA2d0O0-r_j4o1_x20qee1ROy7d696Tpmmci9vTDtmipgBkIGxJEBYY_NUIloFtRzlVGthZHgvdhESZmyo2qFg/s1600/thumbsup.gif',
' :p' ,'http://2.bp.blogspot.com/-Ex1KikUVM2Q/U6tMVfiivCI/AAAAAAAAD9s/dKyvB1R6F8I/s1600/capede.gif',
':ng' ,'http://4.bp.blogspot.com/-SLdFsLn7w00/U6tMXp7KTGI/AAAAAAAAD-I/MFuTw6CkbfI/s1600/ngakak.gif',
':lv' ,'http://3.bp.blogspot.com/-KMdDgs2xyr4/U6tMV-juTSI/AAAAAAAAD90/jadn4_Ji8js/s1600/heart.png',
];
//Config Force tag list, define all in lower case
Force_Tag = [
'[pre]','<pre>',
'[/pre]','</pre>',
'<pre class="brush: plain; title: ; notranslate" title="">','<code>',
'</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,{}))
var avatar=$("#comments");
avatar.find('.comment_avatar img').each(function() {
var ava = $(this).attr('src');
$(this).show().attr('src', ava.replace(//s[0-9]+(-c)?//,"/s45-c/"));
});
//]]>
</script>
</b:includable>
Okay, you still need to search for:
<b:includable id='threaded-comment-form' var='post'> ... </b:includable>
Replace all the code again starting from (<b:includable id='threaded-comment-form' var='post'>) to (</b:includable>) with this one:
<b:includable id='threaded-comment-form' var='post'>
<div class='comment-form'>
<div id='form-wrapper'>
<b:if cond='data:mobile'>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<b:if cond='data:blog.pageType == "static_page"'>
<a expr:href='"http://www.blogger.com/comment-iframe.g?blogID=" + data:blog.blogId + "&amp;pageID=" + data:post.id' id='comment-editor-src' title='comment editor'/>
<iframe class='blogger-iframe-colorize blogger-comment-from-post' height='410' id='comment-editor' name='comment-editor'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<a expr:href='"http://www.blogger.com/comment-iframe.g?blogID=" + data:blog.blogId + "&amp;postID=" + data:post.id' id='comment-editor-src' title='comment editor'/>
<iframe class='blogger-iframe-colorize blogger-comment-from-post' height='410' id='comment-editor' name='comment-editor'/>
</b:if>
<b:else/>
<div id='threaded-comment-form'>
<p><data:blogCommentMessage/>
<span class='small-button'>
<span id='show-conversion'><a class='conversion-button' href='javascript:void(0)' onclick='document.getElementById('conversion-box').style.display='inline-block';document.getElementById('hide-conversion').style.display='inline-block';document.getElementById('show-conversion').style.display='none'' title='Show Conversion Box'>Conversion</a></span><span id='hide-conversion'><a class='conversion-button' href='javascript:void(0)' onclick='document.getElementById('conversion-box').style.display='none';document.getElementById('hide-conversion').style.display='none';document.getElementById('show-conversion').style.display='inline-block'' title='Hide Conversion Box'>Conversion</a></span>
</span>
<span class='small-button'>
<span id='show-emo'><a class='emo-button' href='javascript:void(0)' onclick='document.getElementById('emo-box').style.display='inline-block';document.getElementById('hide-emo').style.display='inline-block';document.getElementById('show-emo').style.display='none'' title='Show Emoticon'>Emoticon</a></span><span id='hide-emo'><a class='emo-button' href='javascript:void(0)' onclick='document.getElementById('emo-box').style.display='none';document.getElementById('hide-emo').style.display='none';document.getElementById('show-emo').style.display='inline-block'' title='Hide Emoticon'>Emoticons</a></span>
</span>
</p>
<div id='conversion-box'>
<textarea id='codes' placeholder='Write/paste code here then click 'Convert'' spellcheck='false'/>
<span class='button-group'>
<button id='cvrt' onclick='cdConvert();this.disabled = true;'>Convert</button>
<button onclick='cdClear();'>Clean</button>
</span>
<span class='checkbox'>
<input checked='' id='opt1' type='checkbox'/> <input id='opt2' type='checkbox'/> <input id='opt3' type='checkbox'/> <input checked='' id='opt4' type='checkbox'/> <input checked='' id='opt5' type='checkbox'/></span>
</div>
<div id='emo-box'>
<div class='comment_emo_list'/>
</div>
<data:blogTeamBlogMessage/>
<b:if cond='data:blog.pageType == "static_page"'>
<a expr:href='"http://www.blogger.com/comment-iframe.g?blogID=" + data:blog.blogId + "&amp;pageID=" + data:post.id' id='comment-editor-src' title='comment editor'/>
<iframe class='blogger-iframe-colorize blogger-comment-from-post' height='410' id='comment-editor' name='comment-editor'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<a expr:href='"http://www.blogger.com/comment-iframe.g?blogID=" + data:blog.blogId + "&amp;postID=" + data:post.id' id='comment-editor-src' title='comment editor'/>
<iframe class='blogger-iframe-colorize blogger-comment-from-post' height='410' id='comment-editor' name='comment-editor'/>
</b:if>
</div>
</b:if>
</div>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>', '<data:post.communityId/>');
</script>
</div>
</b:includable>
Finally, you are done, if you want to customize it further you can continue going with the tutorial, I will be explainning some things that you can do to expand functionality and add a message above (conversion and emoticons) buttons.
Customize Threaded Comment Modification
Assuming that you have seen the live demonstration of this modification, you shall see that there is a message above the comment box, which is in our case "
I will show you how to add your own using your blogger settings, you can use that one above if you want. Well, navigate to Dashboard > Settings > Post and Comments > Comment Form Message > Add then write your message in the box (please note that you have to put <br /> at the end of your message) and save your settings. Other things that you can change are options included in the main code:
Global setting
You can change settings here like the max threaded comments depth level, allowing images and YouTube videos to be posted or some auto replacing options.
Config.maxThreadDepth = 3; //Threaded comments depth level.
Display_Emo = true; //Show emoticons? type "false" to hide.
Replace_Youtube_Link = false;//Embed YouTube videos, type "false" to disable.
Replace_Image_Link = false; //Auto replace the image link, type "false" to disable.
Replace_Force_Tag = false; //Auto replace the virtual tag.
Replace_Image_Ext = ['JPG', 'GIF', 'PNG', 'BMP']; // Supported Images, only works when Replace_Image_Link = true.
Emoticons
You can change emoticons shortcut keys and you can add your own ones as well if you want. It's alreadty configured with a bunch of meaningful and quality smiley emoticons for you, but the options to add, remove or change are given to you.
Emo_List = [
':)' ,'http://image-link/smile.png',
'Your Shortcut Key' ,'http://your-image-link/smile.png',
];
Force Tag List (define all in lower case)
This option is about forcing HTML tags to be encoded to escape being read by browser as codes, so that your users can put them without having to use the encoder. You can customize all the tags that you expect your commenters to post on your comment section.
Force_Tag = [
'[pre]','<pre>',
'[/pre]','</pre>',
That's all folks, now I think that the readers of your blog will be much more happier to post on your comment section, you have provided them with plenty of features and a very elegant design.
What do you think about this modification? Let me know, share your thoughts with me, and if you face any problem never hesitate to post in my comment section below.
