Bình luận phân cấp hack cho Blogger / Blogspot

Đối với một người dùng thông thường thì việc sử dụng Blogger / Blogspot thì mọi thứ mặc định là đã khá là đủ làm lòng những nhu cầu cơ bản rồi. Nhưng đối với một số người thích khám phá thích như mình thì luôn muốn thay đổi và tối ưu cho blog của mình trong hoành tá tràng và bá đạo hơn. Và đây là kết quả của một trong những điều đó bình luận phân cấp hack cho Blogger.

Đoạn mã bình luận phân cấp hack này nếu mình không lầm thì từ một tác giả người Indonesia viết ra, nó thay đổi rất nhiều so với đoạn mã mặc định của Blogger. Về những điều mà đoạn mã này mang lại cho blog của bạn thì nó:
  • Loại bỏ lỗi hCard trên richsnippet
  • Đạt chuẩn HTML5
  • Ảnh đại diện nhỏ hơn (load nhanh hơn)
  • Nhiều tính năng nhỏ khác
Ngoài ra cái đặc biệt nhất của nó là bạn có thể tự mình thay đổi có bao nhiêu cấp nhận xét cho blog của mình thay vì chỉ có 2 cấp như Blogger mặc định. Không dài dòng nữa sau đây mình xin hướng dẫn các bạn thêm thủ thuật bá đạo này vào blog của mình.

Bình luận phân cấp hack cho Blogger

Do thủ thuật này thực sự thay đổi khá nhiều so với cấu trúc mặc định của bạn nên mình khuyên các bạn nên backup lại blog của mình để phòng trừ trường hợp không mong muốn. Đầu tiên các bạn tìm và thay thế 2 đoạn mã sau
<b:include data='post' name='threaded_comments'/>

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

Hiện tại mình chỉ chia sẻ một giao diện cho hệ thống bình luận tại bài này, còn lại trong thời gian sắp tới mình sẽ tổng hợp và chia sẻ thêm nhiều nhau diện khác hấp dẫn nữa.

Giao diện đầu tiên


Tham khảo demo tại đây: http://kslsimplewhite.blogspot.com/2013/12/test2.html

Chèn đoạn css sau lên trên thẻ ]]></b:skin>
#comments {}
#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;
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(http://2.bp.blogspot.com/-fjaZBtfvzac/UN1mw2tUamI/AAAAAAAADkc/XdKqt8hWZ6w/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:#eee;
}
.comment_admin .comment_date  {
font-weight: normal;
font-size:11px;
}
.comment_name {
background:#eee;
padding:10px;
font-size:13px;
font-weight:bold;
position:relative;
}
.comment_service{
margin-top:5px
}
.comment_date {
color: #a9a9a9;
float:right;
font-size:11px;
font-weight:normal;
margin-top:-3px;
}
.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-left:66px;
margin-top: -72px;
background:#fcfcfc;
border:1px solid #d1d1d1;
padding:10px;
border-radius: 2px;
}
.comment_body p {
line-height: 1.5em;
margin: 5px 0 0 0;
color: #666;
border:1px solid #eee;
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;
width:30px;
margin-top:8px;
margin-left:-5px;
padding: 1px 11px;
color: #fff !important;
text-align: center;
text-decoration: none;
border-radius: 2px;
background: #bababa;
font: 11px/18px sans-serif;
transition: background-color 1s ease-out 0s;
}
.comment_reply:hover {
text-decoration: none !important;;
background: #056b95;
}
.unneeded-paging-control {display: none;}
.comment-form {max-width: 100%;!important;}
#comment-editor {width:103%!important;background:transparent url('data:image/gif;base64,R0lGODlhKwALAPAAAKrD2AAAACH5BAEKAAEAIf4VTWFkZSBieSBBamF4TG9hZC5pbmZvACH/C05FVFNDQVBFMi4wAwEAAAAsAAAAACsACwAAAjIMjhjLltnYg/PFChveVvPLheA2hlhZoWYnfd6avqcMZy1J14fKLvrEs/k+uCAgMkwVAAAh+QQBCgACACwAAAAAKwALAIFPg6+qw9gAAAAAAAACPRSOKMsSD2FjsZqEwax885hh3veMZJiYn8qhSkNKcBy4B2vNsa3pJA6yAWUUGm9Y8n2Oyk7T4posYlLHrwAAIfkEAQoAAgAsAAAAACsACwCBT4OvqsPYAAAAAAAAAj1UjijLAg9hY6maalvcb+IPBhO3eeF5jKTUoKi6AqYLwutMYzaJ58nO6flSmpisNcwwjEfK6fKZLGJSqK4AACH5BAEKAAIALAAAAAArAAsAgU+Dr6rD2AAAAAAAAAJAVI4oy5bZGJiUugcbfrH6uWVMqDSfRx5RGnQnxa6p+wKxNpu1nY/9suORZENd7eYrSnbIRVMQvGAizhAV+hIUAAA7') no-repeat 50% 30%}}
.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: #666;
padding: 10px;
margin: 5px 0 5px 0;
color: #eee;
font-size: 13px;
line-height: 20px;
width:97%;
border-radius:3px;
position:relative;
}
.comment-form p:after{
content:"";
width:0;
height:0;
position:absolute;
bottom:-16px;
left:15px;
border:8px solid transparent;
border-color:#666 transparent transparent;
}
.comment_reply_form {
padding: 0 0 0 70px;
}
.comment_reply_form .comment-form {width: 99%;}
.comment_emo_list{
display:none;
}
.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(http://3.bp.blogspot.com/-NONrBLhghFk/To0nNB1LmkI/AAAAAAAAAI4/CAuzDfYiCiU/s1600/comment-arrow.gif) no-repeat;
position: absolute;
margin-left: -19px;
}
.comment_header{width:50px}
#respond {
overflow: hidden;
padding-left: 10px;
clear: both;
}
.comment_avatar img{width:42px;height:42px;background:url(http://2.bp.blogspot.com/-fjaZBtfvzac/UN1mw2tUamI/AAAAAAAADkc/XdKqt8hWZ6w/s1600/anon.jpg) no-repeat}
.comment-delete img{float:right;margin-left:15px;margin-top:3px;margin-right:10px}
.comment_author_flag {display:none}
.comment_admin .comment_author_flag {display:inline;background:url(http://4.bp.blogspot.com/-lABM2Z7_HVs/Ui_XAxhHY6I/AAAAAAAAFXc/wbQNB2SkcIQ/s1600/author.png)no-repeat;font-size:0px;font-weight:normal;padding:2px 6px;right:-23px;margin-top:-23px;color:#fff;border-radius:4px;text-transform:uppercase;position:absolute;width:36px;height:36px;}
iframe{border:none;overflow:hidden}
Tiếp tục tìm đến đoạn mã sau
<b:includable id='comments' var='post'>
chèn lên trên nó
<b:includable id='threaded_comments_hack' var='post'>
<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 <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='data:comment.adminClass' expr:id='data:comment.anchorName' data-level='0'>                                                                                     
      <b:if cond='data:post.adminClass == data:comment.adminClass'>
       &lt;div class=&#39;comment_inner comment_admin&#39;&gt;
       <b:else/>
                            &lt;div class=&#39;comment_inner&#39;&gt;
      </b:if>
    
    <div class='comment_header'>
     <div class='comment_avatar_wrap'>
     <div class='comment_avatar'>
      <img alt='avatar' expr:src='data:comment.authorAvatarSrc' expr:title='data:comment.author'/>
              </div>
<a class='comment_reply' expr:href='&quot;#r_&quot;+data:comment.anchorName' expr:id='&quot;r&quot;+data:comment.anchorName' onclick='javascript:Display_Reply_Form(this)' title='Trả lời'>Trả lời</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' expr:title='data:comment.author' rel='nofollow' target='_blank'><data:comment.author/></a>
       <b:else/>
       <data:comment.author/>
      </b:if>
       <b:if cond='data:comment.author == data:post.author'>
         <span class='comment_author_flag'>Admin</span>
       </b:if>   
                  <span class='comment_service'>
      <a class='comment-delete' expr:href='&quot;http://www.blogger.com/delete-comment.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:comment.id' expr:title='data:top.deleteCommentMsg'>
<img alt='delete' src='http://2.bp.blogspot.com/-d-5BS0YCkho/UOKe2UIw0rI/AAAAAAAAC4w/md_iYNVHaHk/s1600/delete4.png' title='Xóa nhận xét'/>
</a>                
      <span class='comment_date'><a expr:href='data:comment.url' rel='nofollow' title='comment permalink'>
                  <data:comment.timestamp/>
        </a></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'/>
    <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'>   
      <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' expr:title='data:postCommentMsg'><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;//Số cấp nhận xét.
        Display_Emo = true;//Có hiện mặt cười không, sửa lại thành "false" nếu không muốn hiện.
        Replace_Youtube_Link = false;//Nhúng video YouTube, với "false" là không.
        Replace_Image_Link = false;//Tự động thay link ảnh,  với "false" là không.
        Replace_Force_Tag = false;//Tự động chuyển các thẻ: [pre] thành <pre>, và [/pre] thành </pre>, và nhiều thẻ khác nữa, bạn có thể thiết lập ở dưới.
        Replace_Image_Ext = ['JPG', 'GIF', 'PNG', 'BMP'];//(hỗ trợ: jpg, gif, png, bmp),cái này nếu muốn chạy thì thay Replace_Image_Link=true
      
        //Danh sách mặt cười
        Emo_List = [
        ':)'  ,'http://1.bp.blogspot.com/-2Z7Cwe04x-Q/UH9THzWWJII/AAAAAAAACtA/ChwawyzYsDI/s1600/smile1.gif',
        ':('  ,'http://4.bp.blogspot.com/-yXc7xHs5mXc/UKhVJLBfdaI/AAAAAAAADPY/LJKRsefyeao/s1600/sad.gif',
        '=('  ,'http://1.bp.blogspot.com/-7I8DdEs58z0/UKhVKHT1yUI/AAAAAAAADPg/Lyzv-E74EdM/s1600/sadanimated.gif',
        '^_^'  ,'http://1.bp.blogspot.com/-IoZJlpB0-dE/UKhVKnR0BDI/AAAAAAAADPo/Kz87N1Aj4X8/s1600/smile.gif',
        ':D'  ,'http://3.bp.blogspot.com/-WeTjMT8JDhg/UKhVHlZ88II/AAAAAAAADPI/b1gpiAvIkCc/s1600/icon_smile.gif',
        '=D'  ,'http://1.bp.blogspot.com/-ljeobbA3sn0/UKhVGtJsGRI/AAAAAAAADPA/8lyzE4JwrwQ/s1600/hihi.gif',
        '|o|'  ,'http://4.bp.blogspot.com/-ip66eq3uRI8/UKhVF-QK8lI/AAAAAAAADO4/P0G-1PcWpQs/s1600/applause.gif',
        '@@,'  ,'http://4.bp.blogspot.com/-w1VfvgO2-e8/UKhVIT7XLhI/AAAAAAAADPQ/cJ0KDjEsoj4/s1600/rolleyes.gif',
        ';)'  ,'http://3.bp.blogspot.com/-5zPfqshivtY/UKhVONWZnkI/AAAAAAAADQI/iCDxagcaj5s/s1600/wink.gif',
        ':-bd'  ,'http://4.bp.blogspot.com/-hPd-oj2Bzo4/UKhVLkmQjOI/AAAAAAAADPw/3O1iuAukZXg/s1600/thumb.gif',
        ':-d'  ,'http://2.bp.blogspot.com/-yElQmFAIiII/UKhVMcObcQI/AAAAAAAADP4/-qdEpW8zCmY/s1600/thumbsup.gif',
        ':p'  ,'http://2.bp.blogspot.com/-bs2e9gRj748/UKhVNKLs2YI/AAAAAAAADQA/mF7lDNOChac/s1600/wee.gif',     
        ];
      
                             
        //Danh sách các thẻ chuyển đổi, lưu ý nên viết bằng chữ thường
        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 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,{})) 
//]]>
</script>
</b:includable>
Ở đoạn mã này các bạn lưu ý toàn bộ những thứ mà mình đã chú thích ở trong đó để tùy chỉnh cho phù hợp với blog của các bạn nhé. Lưu lại template và tận hưởng.

Lời kết

Đây là một trong những thủ thuật có nhiều thay đổi nhất so với những gì mặc định có trong Blogger, ngoài việc đạt chuẩn HTML5, và có thể tùy tỉnh số cấp nhận xét tại blog thì rất nhiều tính năng hữu ích được tích hợp sẵn trong đó và dễ dàng hiểu để chỉnh sửa như chuyển đổi các loại thẻ, tự bắt và nhúng link youtube cũng như link ảnh với các định dạng được hỗ trợ. Với hệ thống bình luận này mình xin ràng nó đáp ứng được nhu cầu của tất cả mọi người dùng. Mọi thắc mắc về hệ thống bình luận này xin để lại nhận xét ở dưới.

37 bình luận

  1. avatar says

    lúc 11:42 6 tháng 7, 2014

    cái này mình phải xóa comment mac dinh trong blogspot chu ban

  2. avatar says

    lúc 12:13 6 tháng 7, 2014

    Không nhất thiết phải xóa đâu bạn ạ, đơn giản ở đây mình tạo một hàm includable chứa comment hack này, rồi thay thế mấy lời gọi hàm ở "comment mặc định" bằng lời gọi hàm "comment hack".

    Nếu bạn không biết includable là gì bạn có thể tham khảo tại blog mình.

  3. avatar says

    lúc 12:20 6 tháng 7, 2014

    để vậy sơ nó nặng blog thôi à

  4. avatar says

    lúc 12:28 6 tháng 7, 2014

    Không hề nặng bạn nhé, như lập trình bình thường thôi, một hàm chạy chỉ khi nào gọi nó thôi. Nếu bạn không yên tâm thì bạn có thể làm như sau
    Ngay từ đầu bài chỉ cần tìm
    <b:include data='post' name='threaded_comments'/>
    thay bằng
    <b:include data='post' name='comments'/>
    Tiếp tục thay vì tạo ra như mình hướng dẫn ở trên
    <b:includable id='threaded_comments_hack' var='post'>...</b:includable>
    bạn copy toàn bộ code ở trong đó thay vào
    <b:includable id='comments' var='post'>...</b:includable>
    như thế là đẹp đôi đường theo ý của bạn, mình thay thế toàn bộ code mặc định của Blogger.

  5. avatar says

    lúc 14:30 6 tháng 7, 2014

    đả làm như bạn nhưng vẫn bị lỗi:
    http://validator.w3.org/check?uri=http%3A%2F%2Ftestthemeblogger.blogspot.com%2F2014%2F07%2Finh-dang-cot-tab-numbering.html&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.3+http%3A%2F%2Fvalidator.w3.org%2Fservices

  6. avatar says

    lúc 14:59 6 tháng 7, 2014

    Bạn kiếm <a name='comments'> thay bằng <a id='comments'> nhé

  7. avatar says

    lúc 18:18 6 tháng 7, 2014

    Mình chuyển qua comment disqus rồi, đẳ fix các lỗi. Cám ơn bạn nhiều. site mình tuanphan.info rảnh qua nhà mình comment nhá.

  8. avatar says

    lúc 20:54 6 tháng 7, 2014

    Yeah, rất sẵn lòng. Mình cũng thích disqus lắm, lúc trước xài nhưng mà nói chung, nhiều người nhất là mấy bạn nữ không biết đăng nhập, toàn gửi tin nhắn qua mail cho mình hoài nên mình chuyển về xài comment mặc định :D

  9. avatar says

    lúc 19:40 2 tháng 8, 2014

    Blog mình khi áp dụng thì cái emo nó không hiện ở phần phân cấp thứ hai. Đây là demo bạn xem có thể khắc phục được không giúp tới với nhé:
    http://toihocenglish.blogspot.com/2014/07/nhung-nguoi-ban-cu.html

  10. avatar says

    lúc 21:54 2 tháng 8, 2014

    Hix nó hiện đủ mà bạn :D

  11. avatar says

    lúc 09:13 3 tháng 8, 2014

    Ví dụ bạn vào bấm trả lời ở comment cấp 2 chẳng hạn. Rồi bạn bấm vào biểu tượng emoticon để lựa chọn mặt cười thì nó không hoạt động( Không hiện ra code để mình lựa chọn ấy!) Ý mình là vậy.

  12. avatar says

    lúc 10:23 3 tháng 8, 2014

    Cũng lạ thật chỉ cần bấm reply ở bất cứ đâu là phần emo nó mất tác dụng. Hiện tại mình chưa biết nó xung đột với đoạn script nào chắc mình phải kiểm tra thêm.

    P/S: Cái này lúc sử dụng hệ thông mặc định nó bình thường hả bạn?

  13. avatar says

    lúc 14:14 3 tháng 8, 2014

    Ừm, khi ở comment mặc định thì nó hiện bình thường không vấn đề chỉ là khi áp dụng kiểu comment này thì mới bị.

    Thực ra giờ muốn áp dụng emo nào đó cho khung này cũng được chứ không nhất thiết phải là dạng emo mà tớ đang áp dụng. Khổ nỗi dù sử dụng loại nào nó cũng vậy! Giờ không biết phải làm sao!

  14. avatar says

    lúc 23:08 19 tháng 9, 2014

    bạn ơi cho mình hỏi khi dùng bài này và bài http://www.kslzone.net/2014/07/nhat-xet-blogger-facebook-google-plus.html thì chuyển qua tab comment facebook nó không hoạt động bạn kiểm tra dùm mình nhé

    >>http://renluyentuduy.blogspot.com/2014/07/10-cau-hoi-giao-tiep-trong-kinh-doanh.html

  15. avatar says

    lúc 15:20 20 tháng 9, 2014

    Bạn chèn đoạn này
    <div id="fb_comments" style="height:0;visibility: hidden;">
    <div class="fb-comments" expr:data-href='data:post.url' data-width="100%" data-numposts="5" data-colorscheme="light"></div>
    </div>
    trước thẻ đóng includable của
    <b:includable id='threaded_comments_hack' var='post'>
    rồi lưu lại nhé.

  16. avatar Nặc danh says

    lúc 20:46 25 tháng 12, 2014

    Anh có thể giúp em thread_comment được không ạ?

  17. avatar says

    lúc 08:13 26 tháng 12, 2014

    Em muốn giúp gì :D. Bữa qua ăn sinh nhật không lên blog luôn :)

  18. avatar Nặc danh says

    lúc 09:23 26 tháng 12, 2014

    Hi. Anh chỉ em cách tạo thread comment 2 cấp như của anh. Chứ Reply xuống dưới như anh đó a.

  19. avatar Nặc danh says

    lúc 09:24 26 tháng 12, 2014

    Em thử nhưng chữ Reply Vẫn ở dưới Avatar.

  20. avatar says

    lúc 14:54 26 tháng 12, 2014

    Việt em check mail vanviet098@gmail.com của em nhé, anh có gửi qua đó. Còn nếu mà chữ Reply không thì dễ lắm ^_^ em mang đoạn này
    <a class='comment_reply' expr:href='&quot;#r_&quot;+data:comment.anchorName' expr:id='&quot;r&quot;+data:comment.anchorName' onclick='javascript:Display_Reply_Form(this)' title='Trả lời'>Trả lời</a>
    xuống dưới
    <div class='comment_child'/>

    Muốn 1 cấp như anh thôi thì
    Config.maxThreadDepth = 0; nhé
    Va

  21. avatar Nặc danh says

    lúc 18:28 26 tháng 12, 2014

    Thật cảm ơn anh rất nhiều nhé. Blog của em học hỏi của anh rất nhiều, cảm ơn anh! :)

  22. avatar says

    lúc 23:27 12 tháng 1, 2015

    Bạn ơi, cho mình hỏi, cái thanh màu đen ngay trên khung comment là để emotion phải không bạn, vì mình thấy nó không có ý nghĩa gì hết mà emotion nó không có hiện ra, nếu hiện được chỉ giúp mình luôn nhé

  23. avatar says

    lúc 08:18 13 tháng 1, 2015

    Nó là " Thư thông báo mẫu nhận xét " trong "Cài đặt > Bài đăng nhận xét" nó là cái phần mô tả phía trên cái khung nhận xét đó bạn.

  24. avatar says

    lúc 08:26 13 tháng 1, 2015

    Còn nó không hiện thì chắc để mình check lại hoặc bạn có thể đổi trong css .comment_emo_list => display: none thành display:block trước nhé.

  25. avatar says

    lúc 00:43 24 tháng 1, 2015

    bạn ơi phát sinh lỗi này

    The widget with id "Blog1" cannot contain element: "#comment". A widget can only contain b:includable elements.
    giờ chỉnh kiểu gì vậy bạn

  26. avatar says

    lúc 13:48 24 tháng 1, 2015

    Mình cần thêm thông tin, bạn làm tới đâu thì gặp lỗi đó? Mình nghĩ chắc là bạn chèn nhầm phần css vào đâu đó thôi.

  27. avatar Nặc danh says

    lúc 21:03 24 tháng 1, 2015

    Em biết lỗi này là do chèn thẻ b:includable đó anh ạ, sửa threaded_comments_hack thành comments tìm hết đoạn "threaded_comments" thay thành "comments" nhé! ^^

  28. avatar Nặc danh says

    lúc 21:06 24 tháng 1, 2015

    Các hai để sửa là Bac Pham có thể làm bước 1 chuyển hết thành threaded_comments_hack như anh Lâm Kiều hướng dẫn :D

  29. avatar says

    lúc 07:24 25 tháng 1, 2015

    Cảm ơn em nhé, mà lạ thật sao nó báo cannot contain element: "#comment" nhỉ :D

  30. avatar says

    lúc 16:47 27 tháng 1, 2015

    fix được rồi thanks nhé

  31. avatar says

    lúc 02:19 30 tháng 1, 2015

    mình có 1 vấn đề thắc mắc bạn giải đáp giúp mình với, bình luận ở đây chắc bạn sẽ khó hiểu, nên mình cho vào ảnh, bạn xem ảnh rồi chỉ cho mình nha, thanks!

    đường link ảnh: http://likelikeliketiep.blogspot.com/2015/01/binh-luan.html

    bạn xem ảnh thì kích vào ảnh để xem hết ảnh nhá vì phần mình hỏi bị che mất

  32. avatar says

    lúc 02:29 30 tháng 1, 2015

    đường link ảnh này dễ nhìn hơn :D
    http://1.bp.blogspot.com/-MC830H9iulI/VMqGmUyV5hI/AAAAAAAAANw/mvau3tnrbJ0/s1600/Untitled.png

  33. avatar says

    lúc 20:13 30 tháng 1, 2015

    Trước mình cũng có ý định làm như thế, làm ra 1 cấp mà có tất cả nút trả lời mà bạn muốn, nhưng tới giờ vẫn chưa nghĩ ra cách nào để bình luận con lấy nút trả lời của thằng cha nó được =]]

  34. avatar Nặc danh says

    lúc 08:12 31 tháng 1, 2015

    Lala...Bac Pham chờ e chút. Anh Lâm Kiều em có thể! :D

  35. avatar says

    lúc 22:58 3 tháng 2, 2015

    hj chac ban se som tim ra :D

  36. avatar says

    lúc 08:09 30 tháng 3, 2015

    Không cóc chi :D

Mọi nhận xét trên blog KslZone.NET sẽ được kiểm duyệt trước khi được xuất bản trên blog. Lưu ý: Nếu bạn để lại backlink về website của bạn, miễn là kèm theo nhận xét hợp lý thì nhận xét đó vẫn sẽ được chấp nhận. Nếu bạn muốn hiện mã HTML thì bạn cần chuyển đổi trước bằng công cụ phía dưới.