Thư viện

Trải nghiệm

Thứ Sáu, tháng 6 14, 2013

Chèn Thread comment phân nhiều cấp cho Blogspot Ver 3

Thread comment có thể phân nhiều cấp tùy ý muốn sẽ giúp cho blog của bạn trở nên hấp dẫn hơn. Bài viết này namkna sẽ giới thiệu cho các bạn thêm một style mới được tùy biến giúp mẫu commnet của bạn cố thể phân nhiều cấp.

Chia sẻ:
Thread comment có thể phân nhiều cấp tùy ý muốn sẽ giúp cho blog của bạn trở nên hấp dẫn hơn. Bài viết này namkna sẽ giới thiệu cho các bạn thêm một style mới được tùy biến giúp mẫu commnet của bạn cố thể phân nhiều cấp. Về cơ bạn style này giống với style 2 mà mình đã giới thiệu trước đây. Các bạn có thể xem ảnh minh họa bên dưới (đẹp phải không)

Hãy truy cập link sau để test thử nha:

Bấm để xem Demo

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

Phiên bản này được namkna tùy biến thêm một số chức năng từ code cũ của kangismet. Một số chức năng mới bao gồm:
» Thêm phần viền và nền cho phần nội quy của khung comment.
» Sủ dụng bộ Ecomotion mới.
» 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.
»Tích hợp phân trang cho bài viết có trên 200 comment.

☼ Cách Chèn Thread comment nhiều cấp vào Blogspot Ver 3:

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'></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>
               <b:include data='comment' name='commentDeleteIcon'/> 
              </div>
              <div class='clear'/>
             </div> 
             <div class='comment_body'>
<span class='cm_arrow'></span>
              <b:if cond='data:comment.isDeleted'>
               <span class='deleted-comment'><data:comment.body/></span>
              <b:else/>
               <p><data:comment.body/></p>
              </b:if><a class='comment_reply' expr:href='&quot;#r_&quot;+data:comment.anchorName' expr:id='&quot;r&quot;+data:comment.anchorName' onclick='javascript:Display_Reply_Form(this)'>Reply</a>                                                        
             </div>                          
              <div class='clear'/>
            &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 = [
        ':))'  ,'http://2.bp.blogspot.com/_U0QaeycS3vw/TTXudYbX_ZI/AAAAAAAAAE0/b5kV-RL7vwg/haha.gif',
        ':(('  ,'http://1.bp.blogspot.com/_U0QaeycS3vw/TTXupiotYpI/AAAAAAAAAFg/9CubAStMFH8/too_sad.gif',
        '=D'  ,'http://1.bp.blogspot.com/_U0QaeycS3vw/TTXuWpEsR_I/AAAAAAAAAEk/Sk9k2jnuoBg/big_smile.gif',
        ':('  ,'http://1.bp.blogspot.com/_U0QaeycS3vw/TTXukyT1l7I/AAAAAAAAAFM/DaidYAxkiNE/sad.gif',
        ':).'  ,'http://4.bp.blogspot.com/_U0QaeycS3vw/TTXulAkWoKI/AAAAAAAAAFQ/dBLny2PpNZ8/sexy_girl.gif',
        'b-('  ,'http://2.bp.blogspot.com/_U0QaeycS3vw/TTXuWVpzsQI/AAAAAAAAAEc/qFPgHPVhHkU/beat_brick.gif',
        ':)'  ,'http://4.bp.blogspot.com/_U0QaeycS3vw/TTXulENdJ0I/AAAAAAAAAFU/5f5vHw6N44c/smile.gif',
        ':P'  ,'http://2.bp.blogspot.com/_U0QaeycS3vw/TTXupTbDhqI/AAAAAAAAAFY/t2FEzBP2o_8/still_dreaming.gif',
        ':-o'  ,'http://2.bp.blogspot.com/_U0QaeycS3vw/TTXueYItRjI/AAAAAAAAAFA/YwowCynCRzc/oh.gif',
        ':*'  ,'http://3.bp.blogspot.com/_U0QaeycS3vw/TTXupgwmyLI/AAAAAAAAAFc/jOuRJF9qUbU/sweet_kiss.gif',
        ':-s'  ,'http://3.bp.blogspot.com/_U0QaeycS3vw/TTXuk5-M_AI/AAAAAAAAAFI/BUtKFeXapyk/pudency.gif',
        '[-('  ,'http://4.bp.blogspot.com/_U0QaeycS3vw/TTXueJ3uwII/AAAAAAAAAE8/_pyiQFH9hi0/nosebleed.gif',
        '@-)'  ,'http://3.bp.blogspot.com/_U0QaeycS3vw/TTXukiq6NWI/AAAAAAAAAFE/cW28bc76C_k/ops.gif',
        '=d&gt;'  ,'http://3.bp.blogspot.com/_U0QaeycS3vw/TTXuWs6VdyI/AAAAAAAAAEg/z8NtmON52NY/beauty.gif',
        'b-)'  ,'http://1.bp.blogspot.com/_U0QaeycS3vw/TTXuW1baGrI/AAAAAAAAAEo/VbqO1JJKWC4/boss.gif',
        ':-?'  ,'http://1.bp.blogspot.com/_U0QaeycS3vw/TTXuddaxMVI/AAAAAAAAAEw/_aCzrN-ygWY/doubt.gif',
        ':-&gt;'  ,'http://3.bp.blogspot.com/_U0QaeycS3vw/TTXudk-h5SI/AAAAAAAAAE4/i_BBD1qO0zs/look_down.gif',
        'X-('  ,'https://lh3.googleusercontent.com/-fBRlYmjPLOg/T5KRehNSRgI/AAAAAAAADCo/FxXOJp_ptpA/angry.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>
» Tùy chỉnh:
  • Config.maxThreadDepth = 5; là số cấp comment sẽ hiển thị. mặc định mình để lad 5. bạn có thể thay thành số khác. Tuy nhiên không nên phân quá nhiều cấp nếu độ rộng blog của bạn khiêm tốn.
  • Display_Emo = true; Cài đặt hiện thị mặt cười emoticons. Nếu không muốn hiển thị hãy thay true thành false.
  • Replace_Youtube_Link = true; Cài đặt tự động chuyển link video từ trang youtobe thành trình phát video trên comment. Nếu không muốn hiển thị hãy thay true thành false.
  • Replace_Image_Link = true;Cài đặt tự động chuyển link hình ảnh từ thành hình ảnh trên comment. Nếu không muốn hiển thị hãy thay true thành false.
  • Replace_Force_Tag = true;Cài đặt đóng khung cho code trên comment. Nếu không muốn hiển thị hãy thay true thành false.
5. Thêm đoạn code bên dưới vào trên thẻ ]]></b:skin> :
#comments{background:#f2f2f2;float:left;width:100%;padding:20px 10px 0;font-size:13px;margin-top:-10px}
.comment-form p {background-image: url(http://1.bp.blogspot.com/-3UWB4yhuSFA/UbsdUdxBD-I/AAAAAAAAKRE/VmycOK9dj0Y/s1600/warning_namkna-blogspot-com.png);background-position: 12px 27px;background-repeat: no-repeat;background-color: #FFF799;border: #EE9D00 solid thin;padding: 1em;padding-left: 70px;color: #000;margin:30px 12px 20px 0}
#respond{margin-top:30px}
.emoticons a,.emoticons a:hover{margin-left:20px;font-size:28px;text-decoration:none}
.cm_arrow {background:url('http://2.bp.blogspot.com/-RsqJx5ABthA/UbsdC18mZ7I/AAAAAAAAKQ4/XQw1hrKEisM/s1600/comment-arrow_namkna.blogspot-com.gif') no-repeat;display:block;height:23px;margin-left:-25px;margin-top:0px;position:absolute;width:12px}
.comment_admin .comment_body {background: #fff url(http://3.bp.blogspot.com/-VD-qwqo_1iE/Ubsck0WmNSI/AAAAAAAAKQw/-RbHyrDQM4I/s1600/admin-icon_namkna-blogspot-com.png) top right no-repeat}
#comments h4 {font-size: 20px;color: #666;text-shadow: 0 0 1px #CCC;display: block;width: 100%;border-bottom: 1px dotted #CCC;padding: 20px 0 5px 0;margin: 0;}
.unneeded-paging-control {display: none;}
.comment_child .comment_wrap {padding: 0 0 0 20px;}
.comment_header {background:#f5f5f5;border:1px solid #ccc;box-shadow: 0 0px 10px #ccc;float: left;padding:5px 5px 5px 5px;
width: 115px;margin: 10px 15px 0 0;}
.comment_avatar img {margin: 0 15px 0 0;border-width: 1px;-moz-border-radius: 2px;-webkit-border-radius: 2px;border-radius: 2px;-webkit-background-clip: padding-box;}
.comment_body {margin: 10px 0px 0px 150px;line-height: 1.6;font-size: 13px;padding: 15px;background:#fff;position:relative;
text-decoration:none;color:#996633;border:1px solid #dadada;-webkit-border-radius:0 0.25em 0.25em 0;-moz-border-radius:0 0.25em 0.25em 0;border-radius:0 0.25em 0.25em 0;}
.comment_name {margin: 0 0 0 40px!important;font-family: Arial, Helvetica, Garuda, sans-serif; line-height: 1;
margin: 2.1em 0 1em;color: #525252;font-weight: bold; font-size: 15px}
.comment_name a {color: #525252;text-decoration: none;text-shadow: 0 0 1px #DDD;font-size: 12px;}
.comment_name a:hover {color: #F90;}
.comment_service {margin: 0 0 0 41px;color: #CCC;font-size: 10px;font-style: italic;}
.comment_body p {margin: 0;line-height: 1.6;font-size: 12px;padding: 0;text-decoration:none;color:#996633}
.comment_avatar .avatar-image-container {height: 36px!important;width: 36px!important;background:#e3e3e3; border: 1px solid #e3e3e3; -moz-border-radius: 2px;-webkit-border-radius: 2px;border-radius: 2px;-webkit-background-clip: padding-box;}
.comment-form {max-width: 100%;!important;}
#comment-editor {width:101%!important}
.comment_admin {}
.comment_form a {text-decoration: none;text-transform: uppercase;font-weight: bold;font-family: Arial, Helvetica, Garuda, sans-serif;font-size: 15px;color: #24458A;}
.comment_form a:hover {text-decoration: none;}
.comment_reply_form {padding: 0 0 0 20px;border-left: 1px solid #DDD;}
.comment_reply_form .comment-form {width: 99%;}
.comment_emo {max-width: 2.7em;max-height: 2.7em;vertical-align: middle;margin: -0.3em 0 0 0;}
.comment_emo_list .item {float: left;width: 8%;text-align: center;height: 8%;margin: 10px 3% 4% 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;}
.comments .avatar-image-container img {width:36px!important;height:36px!important}
.deleted-comment {text-decoration: line-through;font-style: italic;color: #999;}
#respond {overflow: hidden;padding-left: 10px;margin-top: 30px;clear: both;}
.comment_inner {margin: 0 0 5px 0;background:url(http://1.bp.blogspot.com/-EB5RIBefO1Q/UbscSfvx8-I/AAAAAAAAKQo/7z3JLLd_8a0/s1600/f-boxAbout-bg_namkna-blogspot-com.png) repeat-x top;padding: 5px 0 5px;}
.comment_reply {clear: both;height: 40px;filter: alpha(opacity=60);opacity: 0.6;background: url(http://1.bp.blogspot.com/-RC35lr23Z8o/Ubsb991-oBI/AAAAAAAAKQg/NgTXtXtspCk/s1600/reply_namkna-blogspot-com.png) no-repeat top left;padding-left: 16px;margin-top:20px;font-weight: normal;text-transform: uppercase;font-family: Arial, Helvetica, Garuda, sans-serif;font-size: 10px;color: #666;}
.comment_inner:hover &gt; .comment_reply {filter: alpha(opacity=100);opacity: 1;}
.comment_child .comment_wrap {background: url(http://1.bp.blogspot.com/-Vg4Rc43dUgA/Ubsbo4UtB8I/AAAAAAAAKQY/t-7gz2YaRSE/s1600/reply_bg_namkna-blogspot-com.png) no-repeat;padding: 0px 0 0 36px;}
Chúc thành công!

13 nhận xét:

  1. Comment thử có áp dụng trên blog này không?

    Trả lờiXóa
  2. Namkna ơi! mình đang xài kiểu comment này nhưng mình muốn bỏ các chức năng chèn Ecomotion; thêm scrip chèn ảnh, video, nhạc mà không cần sử dụng cá thẻ [img] hay [youtobe]; Thêm scipt tạo khung cho code. Như vậy thì mình phải bỏ những đoạn code nào vậy bạn:)

    Trả lờiXóa
    Trả lời
    1. bạn tìm đoạn:

      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


      sủa tất cả true thành false

      mình đã xcập nhật trong bài viết rùi nha.

      Xóa
  3. Mình cài comment phân cấp này vào blog thì nút Reply và cả chỗ để comment mới cũng không hoạt động, nhờ bạn xem giùm:
    http://www.goctienganh.net/2013/10/verbs-followed-by-ing-or-infinitive.html

    Trả lờiXóa
    Trả lời
    1. Bạn lưu ý cho mình bước 4 nha, Và cài thủ thuật này thì trước tiên bạn nên xóa bỏ thủ thuật cũ đi hoặc hoàn thiện nó ở bài viết này nha: Tạo Thread comment nhiều cấp Ves 4 cho Blogspot

      Xóa
  4. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  5. Anh Nam Ta?? Em làm theo hướng dẫn rồi, nhưng hok biết sao khi comment thì nó không hiện comment ra.
    http://kysupanda90.blogspot.com/2012/10/phan-mem-tinh-noi-luc-cho-cac-ban-ay-co.html?showComment=1397462173405#c8861451182006960675

    Trả lờiXóa
  6. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
  7. Anh ơi, sao em thử dán link youtube và NCT vào chẳng có tác dụng gì

    Trả lờiXóa
  8. Mình đã thử và đã thành công ^^ Cám ơn chủ nhà đã chia sẽ <3

    Trả lờiXóa
  9. Thêm comment Facebook vào Blogspot Blogger (Mới) 100% thành công: https://www.youtube.com/watch?v=vElOHRFK3Mk

    Trả lờiXóa