Chèn Thread comment phân nhiều cấp vào Blogspot Ver 2
Phần comment phân cấp phiên bản đầu tiên có rất nhiều lỗi nghiêm trọng, vì vậy, mình quyết định không sử dụng bộ code đó nữa, mà mình muốn chia sẻ với các bạn bộ code mới hoàn thiện hơn với sự trợ giúp của jQuery.

Phiên bản này được thiết kế bởi Tiến Nguyên , namkna xin giới thiệu lại cho mọi người cùng được biết!.Thread comment jquery

☼ Những gì mới trong tiện ích Thread comment ves 2 này:

» Sử dụng file Jquery do vậy load mượt hơn (Bạn sẽ không cảm thấy chậm).
» Thêm scrip chèn ảnh, video, nhạc mà không cần sử dụng cá thẻ [img] hay [youtobe] hoặc [nct] mà chỉ cần dán trực tiếp link ảnh, link video từ youtube, link nhạc từ nhacucatui.
» Thêm scipt tạo khung cho code bạn chỉ càn dán đoạn code muốn đóng khung vào thẻ [pre]ư và [/pre]
» Giao diện đẹp, thích hợp với mọi blog tiếng việt và tiếng anh.
» Khả năng tuwyf biến cao, Bạn có thể thay đổi giao diện thông qua tùy biến code CSS. Trong bài này mình cung cấp 2 đoạn giao diện khác nhay cho bạn lựu chọn.
» Hiển thị tốt trên mọi trình duyệt.
» Không bị mã hóa bacode do vậy không lệ thuộc vào host của mình.
» Tích hợp phân trang cho bài viết có trên 200 comment.

☼ Cách tiến hành:

1- Đăng nhập vào Blog
2- Vào Mẫu (Template) => CHỉnh sửa HTML => Mở rộng tiện ích mẫu
3. Tìm đoạn code: 
<b:include data='post' name='threaded_comments'/>
- thay thế bằng đoạn code sau:
<b:include data='post' name='comments'/>
4. Thay thế toàn bộ đoạn code ở giữa <b:includable id='comments' var='post'> và </b:includable> thành
<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'>
               <data:comment.authorAvatarImage/>
              </div>
              <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>   
              </div>  
         
              <div class='comment_service'>
               <span class='comment_date'><abbr class='published' expr:title='data:post.timestampISO8601'><data:comment.timestamp/></abbr></span>
               <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> 
               <b:include data='comment' name='commentDeleteIcon'/> 
              </div>
              <div class='clear'/>
             </div> 
             <div class='comment_body'>
              <b:if cond='data:comment.isDeleted'>
               <span class='deleted-comment'><data:comment.body/></span>
              <b:else/>
               <p><data:comment.body/></p>
              </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 = 5;//Kedalaman threaded comment
        Display_Emo = true;//Tampilkan emoticon? ganti "false" apabila tidak ditampilkan
        Replace_Youtube_Link = true;//Menampilkan link Youtube, ganti"false" untuk me-nonaktifkan
        Replace_Image_Link = true;//Menampilkan gambar, ganti  "false" untuk me-nonaktifkan.
                                Replace_Force_Tag = true;//Mengganti tag otomatis, seperti: [pre] menjadi <pre>, dan [/pre] </pre>, apabila salah mengetik, maka tidak akan tampil
        Replace_Image_Ext = ['JPG', 'GIF', 'PNG', 'BMP'];//(support: jpg, gif, png, bmp),hanya bekerja apabila Replace_Image_Link=true
        
        //List Emoticon
        Emo_List = [
        ':)'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge1nuXS56VQINCHNMb2WVkRnhxnYEtr-X2FnDCeRoIepW7svRHd7m8WJBVajQ691H03Bj1sZC4tyHuh6WYvmBrGCoovsWnztNZfXYZuXV139XJOTdO4wl70MEUogcsvQLzH3MZ2x1t1oM/s1600/smile1.gif',
        ':('  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW10Jzym28VSE9i-iP3Hs4O-hEzAHkisvyhDL9HALJxZUOmIcHUiPmcJ13JT2ikxoKozU3aoHwDd3IxxnG1QsQhh3CT57s9QxPHzARiMRuobg5Tf_bcJfPVaYafvVD_4kH9swR_gJsB68/s1600/sad.gif',
        '=('  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglEYJpCBUHvG1ddFzkoFocmZrCc9JurqECLieHYAYESu8HgBFsQuQNNZ2mxbEJfkKRLApt73KnDl2_ZnWKGX07nPEu4IyleTMgY5fNNTgjm7buLk5zKIF2kEcECIQgV9WqbkwJWeWCoAg/s1600/sadanimated.gif',
        '^_^'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAGbofMrfIz_mjQrinIFmrswSoBb7s3OzJmggyFNAkjBnhx9qsSJjjtkAw4oRYqbl1hGyaSo9wXyD3DUJ5_lZT8MouV2Jc_ZSH2Oc4Dlb8U3iMXNith32HlM4bgw8KJX-FXaQSDUzmfJU/s1600/smile.gif',
        ':D'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9qhr70oHnBLdhqf4BXQYZyMMyaoHeuf1NDUCkZcNMtFXHDbzFMVtas_cYjvIrC25OZc37_LqeyrLv5KJJyWqvSBkLQyiLoGQhdv213lP54GNTHWV9-VuXVMWezgo7vKV5vCZW1Y7Wi30/s1600/icon_smile.gif',
        '=D'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWmIwj7ZiEYK5rDINjSg4GbMFlgNSMLifACzMj3NhrgACU_9sbQdfOd0vkjoX7qBr7SFm6OKQFk3GzVYYrf5lP4ixUFk2p240Xq0iYPNHZQA2M1gEizQY16aeiJpA26c357ZG_F4qrNso/s1600/hihi.gif',
        '|o|'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8Ot53PlJd36qBT_HrdkOVqr5niotUB9TfakTCE2E8J2-Mj0l1NC5SpelMY9nN4HSHWWJIzF_mdOHhjeQHcSwquP-GeYyk8vLHXMf2yA5W2tWsXh_UZU0jy-rNMHPpsC7ktNbHZDnnPM4/s1600/applause.gif',
        '@@,'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9TeYTJ1T4dz6MrzIStMJGje33sItIw0hQKBRJinQB12k540_7Pn5qen25-kYo9H7FOukjFBpfNyu7bFbkQVuYJwAM36cb8kh4KQM0v130FRNNhQS3_A0-Sq_v2zqVLvXagb2gOIRX-9g/s1600/rolleyes.gif',
        ';)'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIuRlXHlyOoUGTyZwKK2x4ngnt7KJAWzQvfmox-cgmgQmWReQRc538ocTG8gwiLC-jI4UUjK0s6CX_jSpBsZdIccgdrXY821ahVw85PVKyNLzJ69I_DRNVQHPlUDP_rQJ-yqpndvoEIAU/s1600/wink.gif',
        ':-bd'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijc45qejwLo5_zqtxE0SRnXa8ci1dpcU22um01syuwhGFjeU7Z3UbBnp3nI5NtuiNBqNOciz-WB3_JEFon2czDvftqB8-vHPInYxByxWoflyOXV5AzGf5fX2LJ9T1Ff-2hX6WQUitC1vY/s1600/thumb.gif',
        ':-d'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQzCzqxpRvoydE0sr5H5cdMBhks6ORyBj-83_Zg7pFzy3o83aJdgspiD6IJVCMZBhGpUuhK4QbR_AARhykgQzp7NkThWqrFSaMd76JouaWXMXi_bcbDk63Uff1KU35j3wH-qLbhQEvJWA/s1600/thumbsup.gif', 
                                                                 ':p'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCZdeLJTm1lfztdmVAf9gEGp2159xxROf9wrE7MjJPjcKAdHNLo5VA8zPhepyGqJPagMnWiYCjMdMscEHZwog1yP4OZstgJH0WSVQ4YH-rKJwx1hyGeDFLq5hUrGkkI7KVjPdr5SxEhkY/s1600/wee.gif',      
        ]; 
        
                                
                                //Mengganti tag, gunakan huruf kecil
                                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>
5. Chọn một trong các CSS style bên dưới qua ảnh minh họa mà bạn thích và Thêm đoạn code bên dưới vào trên code ]]></b:skin> :
Style 1: Thread comment mẹ cọn.
Ảnh minh họa
Code CSS 1.
.comment_wrap {
background: #FFF;
padding: 10px;
border: 1px solid #CCC;
-moz-box-shadow: inset 0 0 10px #CCC;
-webkit-box-shadow: inset 0 0 10px #CCC;
box-shadow: inset 0 0 10px #EEE;
margin: 10px 0 0 0;
}
#comments {
clear: both;
}
#comments h3{
font-size:18px;
margin-top:15px;
}
#comments .avatar-image-container {
float: left;
margin: 0 10px 0 0;
width: 50px;
height: 50px;
max-width:50px;
max-height:50px;
padding: 0 10px 0 0;
border-right: 1px solid #DDD;
}
#comments .avatar-image-container img {
width: 50px;
height: 50px;
max-width: 50px;
max-height: 50px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLDB5tmvu9AJtHufg58LYuHbYST0vpsDudydgP8oayN0f5EAzVGYalnF9sd3SWoYnX_zwWPpqz_fFh22bANJGmpkToE6dXfE8QM2M6L6cNqaJuINBmVBJHfdwCAfQ0qOxpX73JNTJBNjo/s1600/anonymous.jpg) no-repeat;
}
.comment_name{
font-weight: bold;
padding: 0;
font-size: 14px;
text-decoration: none;
}
.comment_name a {
font-weight: bold;
padding:0;
font-size: 14px;
text-decoration: none;
}
.comment_date {color: #BBB;}
.comment_body p {
line-height: 1.5em;
margin: 1em 0 0 0;
color: #666;
word-wrap:break-word;
}
.comment_inner {
word-wrap: break-word;
}
.comment_child .comment_wrap {padding-left: 10px;}
.comment_reply {
font-size: 10px;
font-weight:bold;
text-transform: uppercase;
margin-left:5px;
margin-right:5px;
}
.comment_admin .avatar-image-container {border-right: 3px solid #308D9B!important;}
.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_reply_form {
padding: 0 0 0 20px;
}
.comment_reply_form .comment-form {width: 99%;}
.comment_emo {
vertical-align: middle;
margin: -0.3em 0 0 0;
}
.comment_emo_list .item {
float: left;
width: 40px;
text-align: center;
height: 40px;
margin: 10px 10px 0 0;
}
.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_service{
margin-top:5px;
font-size:10px;
}
#respond {
overflow: hidden;
padding-left: 10px;
clear: both;
}
Style 2: Thread comment dạng thư mục.
Ảnh minh họa
Chèn Thread comment phân nhiều cấp vào Blogspot Ver 2
Code Css 2:
#comments h4 {
font-weight: normal;
text-transform: uppercase;
font-size: 18px;
display: block;
float: none;
padding: 0 8px;
margin: 0 0 0 0;
background-color: #0F83A0;
color: white;
font-weight: bold;
line-height: 28px;
height: 30px;
font-size: 110%;
}
.unneeded-paging-control {display: none;}
.comment_child .comment_wrap {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTbqMSbYpSe487cMvrhM8WPTi0XYtL-GHFexNiUPsrjwTuqTea-JZYCJ9aYas7Zz0bQCPq5nYIUzdBs8De5v1_YocYm4N9v78I7Bk0xcKiqhj35lp2r_iX9bhDPjNyNFdGf2AVd0qq4cfS/s1600/reply_bg.png) no-repeat;
padding: 0px 0px 0px 20px;
margin-left: 10px;
}
.comment_inner {
width: 100%;
zoom: 1;
display: inline-block;
outline: none;
overflow: hidden;
background: white;
box-shadow: 0 1px 3px 0 #B5B5B5;
-moz-box-shadow: 0 1px 3px 0 #b5b5b5;
-webkit-box-shadow: 0 1px 3px 0 #B5B5B5;
border: 1px solid #DDD;
border-bottom: 4px solid #0F83A0;
overflow: hidden;
position: relative;
margin: 10px 0px 10px 0px;
}
.comment_header {background: #fff;
border: 1px solid #ddd;
float: left;
padding: 10px;
width: 200px;
margin: 10px 20px 20px 10px;
line-height: 1.8;}
.comment_avatar img {
 border-width: 1px;
 -moz-border-radius: 2px;
 -webkit-border-radius: 2px;
 border-radius: 2px;
 -webkit-background-clip: padding-box;
}
.comment_name {
margin: -6px 0 0 42px!important;
margin: 2.1em 0 1em;
color: #525252;
font-weight: bold;
font-size: 13px;
}
.comment_name {
margin: 0 0 0 40px;
font-weight: bold;
line-height: 1;
font-size: 13px;
}
.comment_name a {
color: #525252;
text-decoration: none;
text-shadow: 0 0 1px #DDD;
}
.comment_name a:hover {color: #F90;}
.comment_service {
margin: 0 0 0 41px;
color: #666;
font-size: 13px;
}
.comment_reply {
clear: both;
float: right;
 background-color:#fff;
 border:1px solid #ddd;
 display:inline-block;
 margin: 10px -22px -22px 0;
 font-size:12px;
 font-weight:bold;
 padding:3px 11px;
 text-decoration:none;}
.comment_reply:hover {background-color:#5390AD;}
.comment_reply:active {
 position:relative;
 top:1px;
}
.comment_body p {
font-size: 12px;
margin: 10px 15px 10px 15px;
color: #666;
word-wrap: break-word;
}
.comment_avatar .avatar-image-container {
height: 36px!important;
width: 36px!important;
 border: 1px solid #ddd;
 -webkit-background-clip: padding-box;
}
.comment-form {max-width: 100%;!important;}
#comment-editor {width:101%!important}
.comment_admin {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2pBO1e9Clt0TOU3gT_vZtnaCsXBKJtcD7ZBUHY3OtoXUdQhh-JYblNHn9fKBR8fjwDFlNi_ZuDeDxYK7h3u4u3VNaeNPbhF7B294PlEek2tJXh3uR5HqWcvOxFc2LLZgygadSD4cuJ8Qa/s1600/admin.png) no-repeat right -1px;
box-shadow: 0 1px 3px 0 #B5B5B5;
-moz-box-shadow: 0 1px 3px 0 #b5b5b5;
-webkit-box-shadow: 0 1px 3px 0 #B5B5B5;
border: 1px solid #DDD;
border-bottom: 4px solid #0F83A0;
overflow: hidden;
position: relative;
}
.comment_form a {
text-decoration: none;
font-weight: bold;
font-size: 12px;
}
.comment_form a:hover {text-decoration: underline;}
.comment_reply_form {
padding: 0 0 0 20px;
border-left: 1px solid #ddd;
}
.comment_reply_form .comment-form {width: 100%;}
.comment_emo {
max-width: 1.5em;
max-height: 1.5em;
vertical-align: middle;
margin: -0.3em 0 0 0;
}
.comment_emo_list .item {
float: left;
padding: 10px 10px 0 10px;
text-align: center;
}
.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;
}
.comments .avatar-image-container img {
width:34px!important;
height:33px!important
}
.deleted-comment {
padding: 10px 10px 10px 10px;
display: block;
color: #CCC;
}
Style 3: Style Wb sub menu thread comment
6. Lưu mẫu lại là xong. Giờ quay lại tận hưởng thành quả của bạn thôi. :))