Style đẹp cho Threaded Comment đa cấp

Gần đây mình đổi style mới cho blog và thật sự mình rất ưng ý với style này bởi mình đã đầu tư rất nhiều thời gian và công sức cho nó. Nhưng hình như cũng có một số bạn cùng sở thích với mình thì phải, một số bạn đã gửi email cho mình với mong muốn chia sẻ template, một số bạn lại muốn mình chia sẻ phần threaded comment. Và hôm nay mình quyết định chia sẻ đến các bạn phần threaded comment cùng giao diện của nó, còn về template mình xin phép không share.

Hệ thống comment mình sẽ chia sẻ đến các bạn sau đây chính là VinaLuv Threaded Comment của Tien Nguyen, và mình đã chỉnh sửa style cho phù hợp với blog của mình

Lưu ý

Các bạn nên lưu lại template này trước khi thực hiện tránh trường hợp đáng tiếc xảy ra =))
If you don't understand Vietnamese, you  can use the google translation tool at the top right of the blog

Thực Hiện

Bước 1: Tìm <b:include data='post' name='threaded_comments'/> trong template và thay thế toàn bộ bằng

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

Bước 2: Thay thế toàn bộ code trong đoạn <b:includable id='comments' var='post'> và </b:includable> bằng đoạn code sau rồi save lại

<style type='text/css'>
#comments h4{text-indent:-999em;height:3px;background:#0186CB;margin-top:26px}
.unneeded-paging-control{display:none}
.comment_child .comment_wrap{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdXhV16b9_ILG3NUGq3SlBgd4dTqIyWmSuaKinAT1chLEdj-5PaAQUReduB0f9lNU6gPuIJ7CFSc149QjHGQHOkS6QMCp-0lpL4CrrDC5BMKLLCAZtsXXfOpLB6tTRdhWpsy0Kkpsy3oKI/s320/reply_bg.png) no-repeat;padding:0 0 0 20px;margin-left:10px}
.comment_inner{margin:10px 0 0 0;padding:1.26em;border:1px solid #3c3c3c;background-color:#333;-webkit-box-shadow:0 1px 2px black;-moz-box-shadow:0 1px 2px black;box-shadow:0 1px 2px black;overflow:hidden;position:relative;-webkit-transition:all 1s ease-out;-moz-transition:all 1s ease-out;-ms-transition:all 1s ease-out;-o-transition:all 1s ease-out;transition:all 1s ease-out}
.comment_header{border:1px solid #555;background-color:#444;padding:.5em .8em}
.comment_name{font-weight:bold;font-style:normal;float:left}
.comment_name a{color:#fff;text-decoration:none;text-shadow:0 0 1px #DDD}
.comment_name a:hover{color:#F90}
.comment_service{font-size:84%;font-style:italic;line-height:1.8;color:#888;float:right}
.comment_reply a{color:#fff!important;}
.comment_reply{display:block;width:auto;margin:0 0 1px 3px;padding:2px 7px 3px;text-transform:none;color:#fff!important;background-color:#527915;background-image:-webkit-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.2));background-image:-moz-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.2));background-image:-ms-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.2));background-image:-o-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.2));background-image:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.2));font:inherit;font-size:80%;line-height:normal;-webkit-box-shadow:0 2px 2px black;-moz-box-shadow:0 2px 2px black;box-shadow:0 2px 2px black;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;-webkit-transition:all .16s ease-in-out;-moz-transition:all .16s ease-in-out;-ms-transition:all .16s ease-in-out;-o-transition:all .16s ease-in-out;transition:all .16s ease-in-out}
.comment_reply:hover{color:white!important;margin:0 0 1px -3px!important;padding:2px 10px 3px 7px!important;outline:none!important;text-decoration:none!important}
.comment_reply:active{position:relative;top:1px}
.comment_body p{font-size:12px;margin:10px 15px;color:#666;word-wrap:break-word}
.comment_avatar img{border-width:1px;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;-webkit-background-clip:padding-box}
.comment_avatar .avatar-image-container{margin:0 0 3px;border:1px solid #3c3c3c;padding:4px;width:45px;height:45px;max-width:100%;max-height:100%;float:none;-webkit-box-shadow:0 1px 2px black;-moz-box-shadow:0 1px 2px black;box-shadow:0 1px 2px black;background-color:#666;-webkit-background-clip:content-box;-moz-background-clip:content-box;background-clip:content-box;-webkit-transition:all .5s ease-out;-moz-transition:all .5s ease-out;-ms-transition:all .5s ease-out;-o-transition:all .5s ease-out;transition:all .5s ease-out}
.comment-form{max-width:100%!important}
#comment-editor{width:101%!important}
.cm_wrap #comment-form{margin:4px 0 0;border:1px solid #3c3c3c;-webkit-box-shadow:0 1px 2px black;-moz-box-shadow:0 1px 2px black;box-shadow:0 1px 2px black}
.comment_form a{text-decoration:none;font-weight:bold;font-size:12px}
.comment_form a:hover{text-decoration:none}
.comment_reply_form{padding:0 0 0 20px}
.comment_reply_form .comment-form{margin:4px 0 0;padding:2%;border:1px solid #3c3c3c;-webkit-box-shadow:0 1px 2px black;-moz-box-shadow:0 1px 2px black;box-shadow:0 1px 2px black}
.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:45px!important;height:45px!important;max-width:45px!important}
.deleted-comment{padding:10px;display:block;color:#CCC}
.cm_head{width:58px;float:left}
.para{border:1px solid #555;background-color:#444;padding:.5em .8em;margin-top:3px}
.comment_admin{border:3px solid transparent;border-color:transparent #900 #900 transparent}
.fbcm{width:100%;overflow-x:hidden;max-height:500px}
.emo{height:25px}
#comment-holder pre,#comment-holder i[rel=&quot;pre&quot;]{display:block;font:normal 12px Monaco,&quot;Courier New&quot;,Courier,monospace !important;padding:0.5em 0.5em 0.5em 1em;background-color:#002b36;border-left:4px solid #268bd2;position:relative;overflow:auto;white-space:pre;word-wrap:normal !important}
#comment-holder blockquote,#comment-holder b[rel=&quot;quote&quot;]{display:block;font-weight:normal;position:relative;background-color:#5D73B5;color:white;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;text-shadow:0 1px 0 rgba(0,0,0,0.2);margin:.75em 0;padding:15px 20px}
#comments blockquote:before,#comments b[rel=&quot;quote&quot;]:before{content:&quot;&quot;;width:0;height:0;position:absolute;bottom:100%;right:15px;border-color:transparent transparent #5D73B5;border-style:solid;border-width:7px}
.comments .note,em[rel=&quot;note&quot;]{display:block;padding:5px 10px;border:1px solid black;background-color:#222;background-image:-webkit-linear-gradient(#333,#222);background-image:-moz-linear-gradient(#333,#222);background-image:-ms-linear-gradient(#333,#222);background-image:-o-linear-gradient(#333,#222);background-image:linear-gradient(#333,#222);-webkit-box-shadow:0 0 0 1px #555;-moz-box-shadow:0 0 0 1px #555;box-shadow:0 0 0 1px #555;color:#ccc;font:normal normal 11px/normal Tahoma,Verdana,Arial,Sans-Serif;text-shadow:0 1px 0 black}
.comments a.allow,i[rel=&quot;anchor&quot;]{font-size:97%;color:#5687B8}
</style>
  <div class='comments' id='comments'>
 

        <a name='comments'/>
        <b:if cond='data:post.allowComments'>
        
          
          
         <b:if cond='data:post.numComments != 0'>
          <h4>
           <b:if cond='data:post.numComments == 1'>
            1 <data:commentLabel/>:
           <b:else/>
            <data:post.numComments/> <data:commentLabelPlural/>
           </b:if>
          </h4>
         </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'>

<div id='comment-holder'>
          <b:loop values='data:post.comments' var='comment'>
           <div class='comment_wrap' expr:auclass='data:comment.adminClass' expr:id='data:comment.anchorName' level='0'>
<div class='cm_head'>
              <div class='comment_avatar'>
               <data:comment.authorAvatarImage/>
              </div>
              <div class='comment_reply'>
               <a 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>
            <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_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'><data:comment.timestamp/></span>
               <b:include data='comment' name='commentDeleteIcon'/> 
              </div>
              <div class='clear'/>
             </div> 
      
               <div class='para visitor-comment' itemprop='text'><data:comment.body/></div>
              
            &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>

             </div>
  </b:loop>  </div>             
         </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'><data:postCommentMsg/></a>
           </b:if>
          </b:if>
         </div>
        </b:if>
       </div>
       
       <!--b:include data='post' name='threaded_comment_js'/-->
       <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[
       /*
       ***************************************************************
       Project name: VinaLuv - multi-threaded comment design
       Author name: Tien Nguyen Van
       Site name: http://www.bloggeritems.com
       Lisence: Creative Commons
       Version 1.2
       ***************************************************************
       */
      //Global setting
        Config.maxThreadDepth = 5;//How threaded level that you want
        Display_Emo = true;//Display emoticon or not? set "false" to no display
        Replace_Youtube_Link = true;//Auto replace youtube link to iframe embedded, choose "false" to disable
        Replace_Image_Link = true;//Auto replace an image link  choose "false" to disable.
        Replace_Image_Ext = ['JPG', 'GIF', 'PNG', 'BMP'];//(support: jpg, gif, png, bmp),only effect when Replace_Image_Link=true
        
        //Config emoticons declare
        Emo_List = [
       
        ];
        
           //Don't modify this , we use this to get feed source
var Cur_Cform_Hdr = '.comment_form';
var Cur_Cform_Url = $('#comment-editor').attr('src');

function trim(str) {
    var whitespace = ' \n\r\t\f\x5b\x5d\x7c\x7d\x3c\x3e\x0b\xa0\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u200b\u2028\u2029\u3000';
    for (var i = 0; i < str.length; i++) {
        if (whitespace.indexOf(str.charAt(i)) != -1) {
            str = str.substring(0, i);
            break
        }
    }
    return str
}
$('#comment_block .comment_body p').html(function (index, oldhtml) {
    if (Replace_Youtube_Link) {
        var search_key = 'http://www.youtube.com/watch?v=';
        var check_index = oldhtml.indexOf(search_key);
        while (check_index != -1) {
            ht = oldhtml.substring(check_index);
            yt_link = trim(ht);
            var yt_code_index = yt_link.indexOf('&');
            var yt_code = '';
            if (yt_code_index == -1) {
                yt_code = yt_link.substring(search_key.length)
            } else {
                yt_code = yt_link.substring(search_key.length, yt_code_index)
            }
            var yt_video = '<iframe class="comment_youtube" src="http://www.youtube.com/embed/' + yt_code + '?autohide=1" frameborder="0" allowfullscreen></iframe>';
            oldhtml = oldhtml.substring(0, check_index) + yt_video + oldhtml.substring(check_index + yt_link.length);
            check_index = oldhtml.indexOf(search_key);
            if (check_index == -1) {
                search_key = 'https://www.youtube.com/watch?v=';
                check_index = oldhtml.indexOf(search_key)
            }
        }
    }
    if (Replace_Image_Link) {
        var save_html = '';
        var temp_html = oldhtml;
        for (var i = 0; i < Replace_Image_Ext.length; i++) {
            var search_key = '.' + Replace_Image_Ext[i];
            var upper_html = temp_html.toUpperCase();
            var check_index = upper_html.indexOf(search_key);
            while (check_index != -1) {
                img_src = temp_html.substring(0, check_index + search_key.length);
                upper_html = img_src.toUpperCase();
                var http_search = 'HTTP://';
                var find_http = upper_html.indexOf(http_search);
                var save_http = '';
                while (find_http != -1) {
                    save_http = http_search.toLowerCase();
                    img_src = img_src.substring(find_http + http_search.length);
                    upper_html = img_src.toUpperCase();
                    find_http = upper_html.indexOf(http_search)
                }
                http_search = 'HTTPS://';
                upper_html = img_src.toUpperCase();
                find_http = upper_html.indexOf(http_search);
                while (find_http != -1) {
                    save_http = http_search.toLowerCase();
                    img_src = img_src.substring(find_http + http_search.length);
                    upper_html = img_src.toUpperCase();
                    find_http = upper_html.indexOf(http_search)
                }
                if (save_http == '' || img_src.length < 6) {
                    break
                }
                img_src = save_http + img_src;
                save_html += temp_html.substring(0, check_index + search_key.length - img_src.length) + '<img src="' + img_src + '" class="comment_img"/>';
                temp_html = temp_html.substring(check_index + search_key.length);
                upper_html = temp_html.toUpperCase();
                check_index = upper_html.indexOf(search_key)
            }
        }
        oldhtml = save_html + temp_html
    }
    if (Display_Emo) {
        var length = Emo_List.length;
        if (length % 2 == 1) {
            length--
        }
        for (var i = 0; i < length; i += 2) {
            var img_html = '<img src="' + Emo_List[i + 1] + '" class="comment_emo"/>';
            check_index = oldhtml.indexOf(Emo_List[i]);
            while (check_index != -1) {
                oldhtml = oldhtml.substring(0, check_index) + img_html + oldhtml.substring(check_index + Emo_List[i].length);
                check_index = oldhtml.indexOf(Emo_List[i])
            }
        }
    }
    if (Replace_Force_Tag) {
        var length = Force_Tag.length;
        if (length % 2 == 1) {
            length--
        }
        for (var i = 0; i < length; i += 2) {
            while (1) {
                var temp_html = oldhtml.toLowerCase();
                check_index = temp_html.indexOf(Force_Tag[i]);
                if (check_index != -1) {
                    oldhtml = oldhtml.substring(0, check_index) + Force_Tag[i + 1] + oldhtml.substring(check_index + Force_Tag[i].length)
                } else {
                    break
                }
            }
        }
    }
    return oldhtml
});
$('.comment_emo_list').html(function (index, oldhtml) {
    if (Display_Emo) {
        var length = Emo_List.length;
        if (length % 2 == 1) {
            length--
        }
        var newhtml = '';
        for (var i = 0; i < length; i += 2) {
            var img_code = '<span>' + Emo_List[i] + '</span>';
            var img_html = '<img src="' + Emo_List[i + 1] + '" class="comment_emo"/>';
            newhtml += '<div class="item">' + img_html + img_code + '</div>'
        }
        return newhtml
    }
});
$('.comment_wrap .comment_body p').html(function (i, h) {
    temp = h.toLowerCase();
    index = temp.indexOf('@<a href="#c');
    if (index != -1) {
        index_tail = temp.indexOf('</a>', index);
        if (index_tail != -1) {
            h = h.substring(0, index) + h.substring(index_tail + 4)
        }
    }
    return h
});

function Valid_Par_Id(par_id) {
    r = par_id.indexOf('c');
    if (r != -1) par_id = par_id.substring(r + 1);
    return par_id
}function Cform_Ins_ParID(par_id) {
    par_id = '&parentID=' + par_id + '#%7B';
    n_cform_url = Cur_Cform_Url.replace(/#%7B/, par_id);
    return n_cform_url
}function Reset_Comment_Form() {
    html = $(Cur_Cform_Hdr).html();
    $(Cur_Cform_Hdr).html('');
    Cur_Cform_Hdr = '.comment_form';
    $(Cur_Cform_Hdr).html(html);
    $('#comment-editor').attr('src', Cur_Cform_Url)
}function Display_Reply_Form(e) {
    par_id = $(e).attr('id');
    par_id = Valid_Par_Id(par_id);
    html = $(Cur_Cform_Hdr).html();
    if (Cur_Cform_Hdr == '.comment_form') {
        reset_html = '<a href="#origin_cform" onclick="Reset_Comment_Form()">' + Msgs.addComment + '</a><a name="origin_cform"/>';
        $(Cur_Cform_Hdr).html(reset_html)
    } else {
        $(Cur_Cform_Hdr).html('')
    }
    Cur_Cform_Hdr = '#r_f_c' + par_id;
    $(Cur_Cform_Hdr).html(html);
    $('#comment-editor').attr('src', Cform_Ins_ParID(par_id))
}
cur_url = window.location.href;
search_formid = '#comment-form_';
search_index = cur_url.indexOf(search_formid);
if (search_index != -1) {
    ret_id = cur_url.substring(search_index + search_formid.length);
    Display_Reply_Form('#rc' + ret_id)
}
for (var i = 0; i < Items.length; i++) {
    if ('parentId' in Items[i]) {
        var par_id = Items[i].parentId;
        var par_level = parseInt($('#c' + par_id + ':first').attr('level'));
        $('#c' + par_id + ' .comment_child:first').html(function (index, oldhtml) {
            var child_id = Items[i].id;
            if (par_level >= Config.maxThreadDepth) {
                $('#c' + child_id + ':first .comment_reply').remove()
            }
            var child_html = $('#c' + child_id + ':first').html();
            child_html = '<div class="comment_wrap" id="c' + child_id + '" level="' + (par_level + 1) + '">' + child_html + '</div>';
            $('#c' + child_id).remove();
            return (oldhtml + child_html)
        })
    }
}
        
        
       //]]>
         </script>

Chúc các bạn thành công!