Threaded Comment Hack yaitu kotak atau kolom komentar bertingkat dimana tingkat kedalamannya dapat diatur sesuai keinginan, Sedangkan Responsive artinya dapat menyesuaikan layar, jadi Threaded Comment Hack Responsive adalah Threaded Comment Hack yang dapat menyesuaikan keadaan lebar tingginya layar.
Threaded Comment Hack sesuai apa yang pernah saya baca untuk lokal dipopulerkan ole Blog DTE dan Kang Ismet.
Memang Threaded Comment Hack Responsive ini sudah banyak yang menggunakannya, namun saya belum menemukan toturialnya sepertinya masih digunakan buat pribadi tidak seperti toturial Threaded Comment Hack biasa sangat banyak ditemukan dibrowser, sehingga disini saya mencoba memodifikasi sendiri dan mungkin nanti ada yang lebih baik lagi.
Untuk Demo silakan beri komentar kemudian pada layar desktop ukurannya diperkecil atau Tekan (CTRL dan -), Avatar, tombol balas dan delete akan naik keatas sehingga pada layar mobile atau hanphone yang resolusi kecil masih banyak ruang buat berkomentar, dan Threaded Comment Hack Responsive ini juga telah dimodif dengan corak warna yang berbeda-beda.
Berikut cara membuat Threaded Comment Hack Responsive :
1. pertama-tama Masuk ke Blogger.com
2. Kedua, Template dan pilih Edit Template (Jangan Lupa Back Up dulu Templatenya)
3. Ketiga, Cari Kode berikut di bawah ini:
b:include data='post' name='threaded_comments'/>
4. Keempat, bila sudah ketemu ganti dengan :
<b:include data='post' name='comments'/>
5. Kelima, Kemudian cari kode dibawah:
<b:includable id='comments' var='post'>...</b:includable>
6. Keenam, Ganti semua kode tersebut dengan kode di bawah ini :
<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 0'>
0 Comments
</b:if>
<b:if cond='data:post.numComments == 1'>
1 Comments
</b:if>
<b:if cond='data:post.numComments > 1'>
<data:post.numComments/>
Comments
</b:if>
</h4>
<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>
 
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
<data:post.olderLinkText/>
</a>
 
<data:post.commentRangeText/>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
<data:post.newerLinkText/>
</a>
 
<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='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 cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
<data:label.name/>
</b:if>
</b:loop>
</b:if>
'>
</b:if>
<div class='comment-header'>
<div class='comment-avatar'>
<div class='avatar'>
<img class='rush-tooltip' expr:alt='data:comment.author' expr:src='data:comment.authorAvatarSrc' expr:title='data:comment.author'/>
</div>
<a class='comment_reply rush-tooltip' expr:href='"#r_"+data:comment.anchorName' expr:id='"r"+data:comment.anchorName' onclick='javascript:Display_Reply_Form(this)' title='Reply Comments'>Balas</a>
<a class='comment-delete rush-tooltip' expr:href='"http://www.blogger.com/delete-comment.g?blogID=" + data:blog.blogId + "&amp;postID=" + data:comment.id' expr:title='data:top.deleteCommentMsg' title='Delete Comments'>Hapus</a> </div>
<div class='clear'/>
</div>
<div class='comment_body'>
<div class='comment_name'>
<b:if cond='data:comment.authorUrl'>
<a class='rush-tooltip' 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>
<span class='comment_service'>
<span class='comment_date'>
<data:comment.timestamp/>
</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'/>
</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'>
<data:post.oldestLinkText/>
</a>
 
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
<data:post.olderLinkText/>
</a>
 
<data:post.commentRangeText/>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
<data:post.newerLinkText/>
</a>
 
<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' expr:title='data:postCommentMsg'><data:postCommentMsg/></a>
</b:if>
</b:if>
</div>
</b:if>
<div class='thanks'>Terima kasih telah berkomentar</div>
</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.2/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[
Config.maxThreadDepth = 5;
Display_Emo = true;
Replace_Youtube_Link = true;
Replace_Image_Link = true;
Replace_Force_Tag = true;
Replace_Image_Ext = ['JPG', 'GIF', 'PNG', 'BMP'];
Emo_List = [
':)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTYKmyB8B9ft67jmdkemvR-l8fDWU6wGWNxrm1mRj4t2t5mbq4FPy0Lxe0a1aa0kMbyYK0n-X8yX4twptx1T1ve5A9h9cnJjxNDehe5uARgob9hmsr_xcxHV_KbLcnAVpd6zVG9gyaQvk/',
':(' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZKhTwuI9qcAF2mzSHDL9pgWdUply4c0sdHZfO1o4FKnr1EWJy8_n_YVyptK0MKm1WJrI3FJOrezT8wFpDGTg4cEtmyGFKcvTKTVHrtLhFZ8Q5pYBlKsSOTp0qtB14UlY2_o-YIYjnlss/',
'=(' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6Uv74OfsP6tbrdKixeqsZgd1nDowcNhYaa62nnuygSljiu0fYi0aXdDvhl4vYlYs2kiiND-ev3RE8G__vZHov82MPwNG2Gdel7fIDanaaK-ak4ryOAmvBx5JCYS09TgT0P0BKPXSicnY/',
'^_^' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAOtKYkVCdEAYGxMhyphenhyphenifUypf06AEGfLpw_zbLJNWWl_f8JV8oP-51L__Sjh2cnY-BAEtNHeL4Jjn6rsRI6INB-mkx0ymmEUQ8tH2UuolhWY_IKDvlVDL54gK9da_Vuyl2Q1WzcjIWeIyE/',
':D' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGePRHEuripPAVo8CRBqBv9breR_pgmZEREzd_tKOYBROu4i-Etuo8_lqVO9TME-l0Dj-BSXfhWT8gc3kJHXo7587PLvcwFdRmaB_xsyOnMKidcDyjnHcc85fdce2D5udEivUw468Nqrs/',
'=D' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDzOfn33lsAoR1ribb40zcjmN1OHx-8cV2I2a645MlEOrgcExc5A6P4atafSGbQ8TUsLhKTARdkpZAD9FRsVkjc0HzkYLP0_feXN2R5FxxO6otQ2eATsl6xqVX5fIUkussrR5T0W5VSpA/',
'|o|' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6pmCFQBM4RIs2QECARPrKHJcxmw_vx1ayskdZi0nWr7vuXW8zLdbPgv_ys8tLd_pYXa1DL07YwDav3HguI5cleYCTF6bQ-w3QSyEtpS0qzVQM4GlHjZz-a-2bxrakrJw5jHEOSc-t-tQ/',
'@@,' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaDkNgZieb7KFqGUJgwifnzW21haa8ptZvnEzqJ197kNZvNJ3gIyC4nhqoGEj-LyLSJ62r-ppuFe-9aE_dOWLdEL5P7-jF0uh2Ow0wGnQs1nUgQpF4N1k7rXC8_aBNIMue2w1tVSrFXBg/',
' ;)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYRih-w0xctbd8H8KPR3yr9grQIm0YkKBFAwFine_MYBxeqaASRI2gVrpzNr0GERscWtQI-OmQvDLUOXMBuSI-Osltax72XbTq-8UTWdKCnXmOAwO3sPFhtVKPdG_2VoRO5aYCCRo89Y8/',
':-bd' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg26C1eiql03CezgAsU9PERyflElzS8AaBgz9nsjeS_fARgA-pQ7WIwAXhc2kIulfByhrZLoufuf2LH2DeUXAp0thU8XGOdYUlb7y1gG2FSAFWTO8ck9uoPaoz4Ax_eClDKbyfXskniYI4/',
':-d' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNQBKorOAjusqAaLyP4dS0MGhQIfAZQat4nkGdNcz-UL0xHpoYSU2aZxDgmn_BjHJfV97A37-oQGBWtG7Jx3eFi6p_WeYfPqgsdMyHiD1z1PT8ozHdTmFJ6t9gK1ZsGV3q_cdSwqVCMLU/',
':P' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuLayoAdhJYeQNtqUqb8XRZXXLBAUx69d6ofXS7qazxn3yfGhzg80P2y-nqNwIXVGeF0PBW5sD3T-ffWx3ULOYDl1U2Mjick-8IenSq-c5PlpQbM_l2rCQnSlEWyus5TJ3SE1FSR-RGu0/',
':a01:' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioNcaNrEnM44EM9H2chXiC91mTMJKoBEj8LJ5A19ScAtOKgeRG2Xjgrc5ooVfva-D8tsATiM9vDbUSSkRHg5l_Uu5CW5GctxI5CJ-NK4ybEVmZ2cuYBWAJsHwbs-sQwBPB3Gk9qejTbtw/',
':b02:' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwsstoSim4ouzS-GCUqPdLkuY9cVr5KzplOiQByqgE8_LVJQSzyExYJ7-zSNvV9981sPyt2tWwTcgk69eOnd7DRyjayxNXxnlw2VgGjPc1cWJrOIxb2nm8oaU5Cd_4pRUEeJ_XQGhbXuI/',
':c03:' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHvuprXf_uu7lLZNnZQN9soF8ICnHmyXmiFur-QCtXJJwVMIEWpDfsTnADCn7iEZUNNnJFgY_1Zk516AEGy3L5JcCQvbSvAItXAGKIoo9e0-_VfjBd-5AmaR_Y1qPWMfJPo73RsGFAutI/',
':d04:' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAe92Qg-vs9fVj3mMqrfr4IOjpjRG6jXn9WX6s2v0nVbGl-A4gLH37C4UzxbHJ4nfA1z3Dpo8PBZkiyO13rzYIoqlK8RNSIWS9CmH3XJx7OVkagH0rT50wPDWLB2LQ7n9eyx2Lz-b_nWY/',
':e05:' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzPrmBfIlSqjVqupEOeYxizhnda79jyGoP8veBzBbdw0K6tCk2fNbO4m89zV4Fem0nZ9Fpu9PZQJ7CB1Ymc7iX3pvXZ_ET_sgZy2lODN6QseMHl6kNWBP-5oFT5Vn6o3xuOZNobq4mivo/',
':f06:' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2dQ5-6rwbN2hJZbAB5o-56gRZmGDIwg5vndNYdS5p-whcLGYsbBi43DvAmrrnhy7k9XXLI2DfXOXrL6v3hHXPqrL4hHcXyFpOeCSE2T2hDHkJ32U5VCbAYC2V4pBBL9tw7vrTI40V-_I/',
':g07:' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6QPBHRTwjWUNlM5LF-TaxejOXr-BQdh11TZdHiQKNuHiJood8aoCVgPEYVwdEZHQxmPKGYp1zLHrm8PT389h58GW41feZAa3F2aeYLyKi0sYcuOxZitQoQXOS9U6nKtcwo_66QCmIHQs/',
':h08:' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt7Qo1ntwGia4VGqPP1RrnTlWrKD9moa4T_Te3qYbcU8aODCUVE3ROTKy0TDzFLxXLXu3xp5EN6R6l9zDbCP3kknFi1hMJF132_gmaoUCeYnbStqlR6eNw14rDF_7or-mZaHMoTM_wRTc/',
];
//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 q=\'.W\';3 1a=$(\'#N-Y\').B(\'y\');u 1w(H){3 1h=\' \\n\\r\\t\\f\\2p\\1S\\1T\\1U\\24\\25\\26\\27\\2e\\2h\\2k\\2m\\2n\\2u\\2y\\2z\\2A\\2F\\1L\\1N\\1O\\1P\\1Q\';G(3 i=0;i<H.5;i++){b(1h.g(H.1V(i))!=-1){H=H.d(0,i);11}}C H}$(\'#28 .1B p\').k(u(D,7){b(2r){3 m=\'1g://13.Z.X/1t?v=\';3 8=7.g(m);F(8!=-1){1H=7.d(8);K=1w(1H);3 1c=K.g(\'&\');3 T=\'\';b(1c==-1){T=K.d(m.5)}1e{T=K.d(m.5,1c)}3 1j=\'<1k I="1W" y="1g://13.Z.X/1X/\'+T+\'?1Y=1" 20="0" 21></1k>\';7=7.d(0,8)+1j+7.d(8+K.5);8=7.g(m);b(8==-1){m=\'22://13.Z.X/1t?v=\';8=7.g(m)}}}b(23){3 1d=\'\';3 x=7;G(3 i=0;i<1z.5;i++){3 m=\'.\'+1z[i];3 o=x.E();3 8=o.g(m);F(8!=-1){l=x.d(0,8+m.5);o=l.E();3 w=\'2j://\';3 z=o.g(w);3 L=\'\';F(z!=-1){L=w.R();l=l.d(z+w.5);o=l.E();z=o.g(w)}w=\'1K://\';o=l.E();z=o.g(w);F(z!=-1){L=w.R();l=l.d(z+w.5);o=l.E();z=o.g(w)}b(L==\'\'||l.5<6){11}l=L+l;1d+=x.d(0,8+m.5-l.5)+\'<S y="\'+l+\'" I="2s"/>\';x=x.d(8+m.5);o=x.E();8=o.g(m)}}7=1d+x}b(1m){3 5=A.5;b(5%2==1){5--}G(3 i=0;i<5;i+=2){3 V=\'<S y="\'+A[i+1]+\'" I="1x"/>\';8=7.g(A[i]);F(8!=-1){7=7.d(0,8)+V+7.d(8+A[i].5);8=7.g(A[i])}}}b(2G){3 5=U.5;b(5%2==1){5--}G(3 i=0;i<5;i+=2){F(1){3 x=7.R();8=x.g(U[i]);b(8!=-1){7=7.d(0,8)+U[i+1]+7.d(8+U[i].5)}1e{11}}}}C 7});$(\'.1M\').k(u(D,7){b(1m){3 5=A.5;b(5%2==1){5--}3 15=\'\';G(3 i=0;i<5;i+=2){3 1C=\'<1F>\'+A[i]+\'</1F>\';3 V=\'<S y="\'+A[i+1]+\'" I="1x"/>\';15+=\'<M I="1R">\'+V+1C+\'</M>\'}C 15}});$(\'.1f .1B p\').k(u(i,h){10=h.R();D=10.g(\'@<a 12="#c\');b(D!=-1){14=10.g(\'</a>\',D);b(14!=-1){h=h.d(0,D)+h.d(14+4)}}C h});u 1l(j){r=j.g(\'c\');b(r!=-1)j=j.d(r+1);C j}u 1n(j){j=\'&1Z=\'+j+\'#%1o\';1p=1a.1q(/#%1o/,j);C 1p}u 1r(){k=$(q).k();$(q).k(\'\');q=\'.W\';$(q).k(k);$(\'#N-Y\').B(\'y\',1a)}u 1s(e){j=$(e).B(\'16\');j=1l(j);k=$(q).k();b(q==\'.W\'){1u=\'<a 12="#1v" 29="1r()">\'+2a.2b+\'</a><a 2c="1v"/>\';$(q).k(1u)}1e{$(q).k(\'\')}q=\'#2d\'+j;$(q).k(k);$(\'#N-Y\').B(\'y\',1n(j))}17=2f.2g.12;18=\'#N-2i\';19=17.g(18);b(19!=-1){1y=17.d(19+18.5);1s(\'#2l\'+1y)}G(3 i=0;i<O.5;i++){b(\'1A\'2o O[i]){3 j=O[i].1A;3 1b=2q($(\'#c\'+j+\':P\').B(\'1D-1E\'));$(\'#c\'+j+\' .2t:P\').k(u(D,7){3 J=O[i].16;b(1b>=2v.2w){$(\'#c\'+J+\':P .2x\').1G()}3 Q=$(\'#c\'+J+\':P\').k();Q=\'<M I="1f" 16="c\'+J+\'" 1D-1E="\'+(1b+1)+\'">\'+Q+\'</M>\';$(\'#c\'+J).1G();C(7+Q)})}}3 1I=$("#2B");1I.2C(\'.2D S\').2E(u(){3 1J=$(1i).B(\'y\');$(1i).2H().B(\'y\',1J.1q(/\\/s[0-9]+(\\-c)?\\//,"/2I-c/"))});',62,169,'|||var||length||oldhtml|check_index|||if||substring|||indexOf|||par_id|html|img_src|search_key||upper_html||Cur_Cform_Hdr||||function||http_search|temp_html|src|find_http|Emo_List|attr|return|index|toUpperCase|while|for|str|class|child_id|yt_link|save_http|div|comment|Items|first|child_html|toLowerCase|img|yt_code|Force_Tag|img_html|comment_form|com|editor|youtube|temp|break|href|www|index_tail|newhtml|id|cur_url|search_formid|search_index|Cur_Cform_Url|par_level|yt_code_index|save_html|else|comment_wrap|http|whitespace|this|yt_video|iframe|Valid_Par_Id|Display_Emo|Cform_Ins_ParID|7B|n_cform_url|replace|Reset_Comment_Form|Display_Reply_Form|watch|reset_html|origin_cform|trim|comment_emo|ret_id|Replace_Image_Ext|parentId|comment_body|img_code|data|level|span|remove|ht|avatar|ava|HTTPS|u200a|comment_emo_list|u200b|u2028|u2029|u3000|item|x5d|x7c|x7d|charAt|comment_youtube|embed|autohide|parentID|frameborder|allowfullscreen|https|Replace_Image_Link|x3c|x3e|x0b|xa0|comment_block|onclick|Msgs|addComment|name|r_f_c|u2000|window|location|u2001|form_|HTTP|u2002|rc|u2003|u2004|in|x5b|parseInt|Replace_Youtube_Link|comment_img|comment_child|u2005|Config|maxThreadDepth|comment_reply|u2006|u2007|u2008|comments|find|comment_avatar|each|u2009|Replace_Force_Tag|show|s45'.split('|'),0,{}))
$(function(){if(window.location.hash){var x=window.location.href.split("#")[1];$('html,body').animate({scrollTop:$('#'+x).offset().top-70},5000)}});
$('#comments p, #comments dd').each(function(){$('b[rel^="h"]',this).next('br').remove();$('i[rel="pre"]').replaceWith(function(){return $('<pre><code>'+$(this).html()+'</code></pre>')});$('i[rel="image"]',this).replaceWith(function(){return $('<img class="center cm-prev" alt="preview" src="" />').attr('src',$(this).text())});$('b[rel="h3"]',this).replaceWith(function(){return $('<h3></h3>').append($(this).contents())});$('b[rel="quote"]',this).replaceWith(function(){return $('<blockquote></blockquote>').append($(this).contents())});$('b[rel="arabic"]').replaceWith(function()
{return $('<b class= \'arabic\'>'+$(this).html()+'</b>')});$('i[rel="code"]',
this).contents().unwrap().wrap('<code />');$('i[rel="linku"]',this).replaceWith(function(){return $('<a href="'+$(this).text()+'" rel="nofollow" target="_blank">[Link]</a>')})}); //]]>
</script>
</b:includable>
7. Ketujuh, masukan kode CSS, Copy kode berikut dan letakan tepat di atas ]]></b:skin> atau </style> :
#comments {line-height:1.4em;margin-top:10px;position:relative;background: #fff;}
#comments h3 {background-color :#36876F;color:#fff;font-weight:bold;text-transform:uppercase; margin : 0 0 15px 0;font-size:1.3em;padding: 1.2%;border-bottom: 3px solid #215B9F;}
#comments h3:before {content: "\f086"; font-family: FontAwesome; font-size : 22px;
font-style:normal;font-weight:normal; background:#08744F;padding: 4px 14px; margin : 0 10px 0 0;}
.comment-avatar {width:42px; height: 42px; background:#239615;padding: 5px; 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('http://goo.gl/Vnu1Nl') no-repeat;}
.comment_name a {padding-bottom : 10px;font-size:1.1em;text-decoration:none;font-weight:bold;}
.comment-admin .comment_name {padding-bottom: 10px; font-size: 1.1em;text-decoration: none;
font-weight:bold;}
.comment-admin .comment_date {font-weight : normal; font-size : 11px;}
.comment_name {font-family : "Oswald", Arial, Sans-serif; padding-bottom :10px;
font-size : 14px; font-weight : normal; position : relative;}
.comment_service {margin-top : 5px;}
.comment_date {color : #999; float : right; font-size : 11px; font-weight : normal;}
.comment_date a {color : #a9a9a9; float : right; font-size : 11px; font-weight : normal;}
.comment_date a:hover {color : #a9a9a9; text-decoration : none;}
.comment_body {margin-top: -72px; margin-left : 65px; background: #fff; border: #bdc3c7 solid 1px; padding:15px;color: #555;}
div.comment-inner.comment-admin {background: #2ecc71;border-bottom:3px solid #27ae60;}
.comment_body p {line-height: 1.5em;margin: 5px 0 0 0;color:#606;font-size:1em;
word-wrap:break-word; padding-bottom : 10px;}
.comment-inner {padding: 12px; margin : 5px 0 5px 0; background-color: #1abc9c;
border-bottom:3px solid #16a085;} .comment_child .comment_wrap {padding-left : 5%;}
.comment_reply{display:inline-block;margin-top:8px;margin-left: -5px; padding:1px 12px;
color:#fff !important ;text-align:center;background :#079531; font-size: 11px;}
.comment_reply:hover {text-decoration:none !important;background:#066020;}
.unneeded-paging-control{display:none;}
#comment-editor {width:100% !important;background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW13zTVLunOLt-hmU3NfsJn2WPkVMen_NH8_1-spil0lwdwvtI546grIqRyNt5nNATnjmtpvdhdFX-30OkMpN5LHTZHlciG8_U5fHR3Mvb2WCQ6zdvuX7Qq8UwagW3hhMDU4jNRGk-hqs/w43-h11-p/load6.gif') 50% 30% no-repeat #e1e3e6; margin-bottom:20px; position: relative;} .comment-form {max-width: 100% !important;}
.comment_form a {text-decoration:none;text-transform: uppercase;font-weight: bold;
font-family: "trebucet ms", Helvetica, Garuda, sans-serif;font-size:15px;}
.comment_form a:hover {text-decoration: underline;} .comment_reply_form {padding : 0 0 0 70px;} .comment_reply_form .comment-form {width: 99%;}
img.comment_emo {margin: 0; padding : 0; vertical-align:middle;}
.comment_emo_list .item {float:left;text-align:center;height:auto;width:10%; color:#999;}
.comment_emo_list span {display:block;font-weight:normal;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;} .comment-header {width:100%;}
#respond {overflow: hidden; padding-left:10px;clear: both;}
.avatar img {width:42px;height:42px;background: url(http://goo.gl/Vnu1Nl) no-repeat;}
.comment-delete{display:inline-block;margin-top:5px;margin-left:-5px;padding:1px 10px;
color:#FDE !important;text-align:center;text-decoration:none; background:#079521;font-size:11px;}
.comment-delete:hover {text-decoration : none !important;background:#066020;}
.deleted-comment {background : url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtbk5qNeQX1NuZZ35oEZ2DWyWKtYDr_y-SZwX5OwJUCSec66nWv90WxgcXUAV2ZpB1pkz2y0SNwxYWWeFSPdF9_2XIVsJPEOOeVlOEQQJ-4f2RP-FEP_L65RpAzeCD6a1S0LwmLU5182Q/') 2% 50% no-repeat #db6161;color: #efd4d4;line-height:22px;border-bottom:3px solid #c0392b;
padding: 12px 15px 12px 45px; margin: 5px 0;display: block;}
.comment-form p{background: #F6EAEA;padding: 10px;margin: 5px 0 5px 0;color: #7D6E6E;font-size: 13px;
line-height: 20px;position: relative;}
@media screen and (max-width:600px){
.comment_body {margin:0px !important;}
.comment-avatar {float:left; margin-bottom: 5px !important;}
.comment_reply {margin-top: -38px; margin-left:55px;float:left;max-width:100%;text-align:center;}
.comment-delete {margin-top: -15px !important;margin-left:55px;float:left;max-width:100%;text-align:center;}
Save Template,
Selamat Mencoba Threaded Comment Hack Responsive