After reading some comments from you on Customize threaded comment system and check by myself ,there's an error when applying CSS in this post: the reply button and load more button are not work .
Now in this post ,I will show you how to customizing theaded comment system like Simplex Bigblue template .

New threaded comment system use more javascript than the old comment form . It's mean if we look into the template code ,we couldn't know what HTML tags will be used in comment form ,therefore hard to write CSS .
To know what HTML tags has been generated by javascript ,you can wait for page fully loaded ,and then save that page to your computer .
Check the downloaded page ,we can see what HTML tags in comment .
All of these HTML tags are decorated by CSS attributes in default Blogger CSS file . You can't download/edit/modify this CSS file . So the solution here is to write new CSS in template file to overwrite the defaults .

Here is the HTML code of threaded comment that I dumped in my blog :
<div class="comments-content">
     <div id="comment-holder">
         <div kind="x" id="xxx">
             <div id="xxx">
                 <div u="x" t="x" kind="x" class="comment-thread" id="xxx">
                     <ol id="xxx">
                         <li kind="x" class="comment" id="xxx">
                             <div class="avatar-image-container">
                                 <img src="avatar">
                             </div>
                             <div class="comment-block" id="xxx">
                                 <div kind="x" class="comment-header" id="xxx">
                                     <cite class="user"><a href="xxxx" rel="nofollow">Comment name</a></cite>
                                     <span class="icon user"></span>
                                     <span class="datetime secondary-text"><a href="xxx" rel="nofollow">date and time</a></span>
                                 </div>
                                 <p class="comment-content" id="xxx">comment body</p>
                                 <span kind="x" class="comment-actions secondary-text" id="xxx">
                                     <a o="r" target="_self" href="javascript:;" kind="i">Reply</a>
                                     <span class="xxxxxx">
                                         <a href="xxx" target="_self" o="x">Delete</a>
                                     </span>
                                 </span>
                             </div>
                             <div class="comment-replies" id="xxx">
                                 <span kind="x" id="xxx">
                                     <div u="x" t="x" kind="x" class="comment-thread inline-thread" id="xxx">
                                         <span kind="x" class="thread-toggle thread-expanded" id="xxx">
                                             <span class="thread-arrow" id="xxx"></span>
                                             <span class="thread-count" id="xxx">
                                                 <span style="display: none;" id="xxx"></span>
                                                 <span style="display: none;" id="xxx"></span>
                                                 <a target="_self" href="javascript:;">Replies</a>
                                                 <div class="thread-dropContainer thread-expanded" id="xxx">
                                                     <span class="thread-drop"></span>
                                                 </div>
                                             </span>
                                         </span>
                                         <ol class="thread-chrome thread-expanded" id="xxx">
                                             <div>
                                                 <li kind="b" class="comment" id="xxx">
                                                     <div class="avatar-image-container">
                                                         <img src="avatar of people who reply comment above">
                                                     </div>
                                                     <div class="comment-block" id="xxx">
                                                         <div kind="m" class="comment-header" id="xxx">
                                                             <cite class="user blog-author"><a href="xxx" rel="nofollow">name of people who reply comment</a></cite>
                                                             <span class="icon user blog-author"></span>
                                                             <span class="datetime secondary-text"><a href="xxx" rel="nofollow">date and time reply comment</a></span>
                                                         </div>
                                                         <p class="comment-content" id="xxx">comment body</p>
                                                         <span kind="m" class="comment-actions secondary-text" id="xxx">
                                                             <span class="item-control blog-admin pid-868019743"><a href="xxx" target="_self" o="d">Delete</a></span>
                                                         </span>
                                                     </div>
                                                     <div class="comment-replies" id="xxx"></div>
                                                     <div class="comment-replybox-single" id="xxx"></div>
                                                 </li>
                                             </div>
                                             <div kind="ci" class="continue" id="xxx"><a target="_self" href="javascript:;">Reply</a></div>
                                         </ol>
                                         <div class="comment-replybox-thread" id="xxx"></div>
                                     </div>
                                 </span>
                             </div>
                             <div class="comment-replybox-single" id="xxx"></div>
                         </li>
                        
                        
                        
                     </ol>
                     <div kind="ci" class="continue" id="xxx" style="display: none;">
                         <a target="_self" href="javascript:;">Add comment</a>
                     </div>
                     <div class="comment-replybox-thread" id="xxx">
                         xxxxxxxxx
                     </div>
                     <div kind="rb" class="loadmore loaded" id="xxx"><a target="_self" href="javascript:;">Load more...</a></div>
                 </div>
             </div>
         </div>
     </div>
</div>

Please take a look at the code above . I censored unnecessary information in the code above . What we need to know is HTML tags and class attribute of these class .
Base on the HTML markup above ,we can write CSS code to decorate them as we want .

Here is the code that I applied in Simplex Bigblue template .You can consider it an example .
.comment {
    list-style-type: none;
    width: 100%;
}
.comment .avatar-image-container img {
    width: 35x;
    height:35px;   
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #DDDDDD;
    margin: 0;
    padding: 3px;
    vertical-align: middle;
}
.comment .avatar-image-container {
    float: left;
    max-height: 36px;
    overflow: visible;
    width: 36px;
}
.comment .comment-block {
    margin-left: 70px;
    position: relative;
    background: none repeat scroll 0 0 #F7F7F7;
    border: 1px solid #E4E4E4;
    border-radius: 4px 4px 4px 4px;
    overflow: hidden;
    padding: 15px 20px 5px;
}
.comment .comments-content .datetime {   
    font-size: 11px;
    font-style: italic;
    margin-left: 6px;
    float:right;
}
.comment .comments-content .datetime a{   
    color:#999;
}
.comment .comments-content .user {
    font-style: normal;
    font-weight: bold;
}
.comment .comments-content .user a {
    color:#333;
}
.comment .comment .comment-actions a {
    background: -moz-linear-gradient(center top , #FFFFFF 20%, #E5E5E5 100%) repeat scroll 0 0 transparent;
    border-color: #E4E4E4 #C4C4C4 #C4C4C4 #E4E4E4;
    border-radius: 2px 2px 2px 2px;
    border-right: 1px solid #C4C4C4;
    border-style: solid;
    border-width: 1px;
    color: #424242 !important;
    display: inline-block;
    margin: 5px;
    padding: 7px 10px;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 -1px 0 #FFFFFF;
    font: 11px/18px sans-serif;
    margin: 5px;
    padding: 1px 6px;
   
}
.comment .continue a {
    background: -moz-linear-gradient(center top , #FFFFFF 20%, #E5E5E5 100%) repeat scroll 0 0 transparent;
    border-color: #E4E4E4 #C4C4C4 #C4C4C4 #E4E4E4;
    border-radius: 2px 2px 2px 2px;
    border-right: 1px solid #C4C4C4;
    border-style: solid;
    border-width: 1px;
    color: #424242 !important;
    display: inline-block;
    margin: 5px;
    padding: 7px 10px;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 -1px 0 #FFFFFF;
    font: 11px/18px sans-serif;
    margin: 5px;
    padding: 1px 6px;
}
.comment .comments-content .loadmore.loaded {
    background: none repeat scroll 0 0 #4488DD !important;
    color: #FFFFFF;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 10px;
    text-align: center;
}

You can copy this CSS code if you want threaded comment like Simplex Bigblue template ,or write more CSS code if you want to make it as you want .
Hope this post helpful to you .


Share this post

Advertisement

17 comments

  1. I am very interested in this... Will take a closer look so i can apply to my blog.

    ReplyDelete
  2. Still not work in my blog bro :(

    www.trigonalworld.com

    ReplyDelete
    Replies
    1. You are using old code . Pls remove them and use the code in this post instead .

      Delete
  3. how to remove Disqus Comment systeam in my blog http://a2zstudent.blogspot.in/

    ReplyDelete
  4. Thank You for your nice info. All the info of your blog are really important for all of us. I am also blogger and its help me many time. :) Thanks. Will visit again.

    ReplyDelete
  5. How can I change the colour of the comments in my blog?

    http://eventheodd.blogspot.in/2012/07/smartphone-apps-to-improve-your.html

    Black coloured text is not visible.

    ReplyDelete
  6. Brother how to make the form comment not popup? I mean when i push reply so the form come directly under the comment is tutorial http://artistutorial.blogspot.com/2012/01/threaded-comments-for-blogger-comment.html

    example http://hompimpaalaihumgambreng.blogspot.com/2012/03/uncompressed-blogger-thread-comment.html

    ReplyDelete
    Replies
    1. Option for comment can be found in Dashboard -> Setting -> Post and comment . Choose 'Embeded' in Comment Location . So pop-up will not appear .
      For thread-comment ,you can search in my blog . There's a post on this topic

      Delete
  7. You have post this article here with lot of information that will help us a lot in the future. I have learned so many things from this post. I need your help I have a personal blog. I want to make my blog attractive but I don't know how can I do this.


    Here is the URL of my blog.

    http://watchlatesthollywoodmoviesonline.blogspot.in/

    ReplyDelete
  8. thanks! very nice threaded comment, i'm gonna use it on my blogspot blog.

    ReplyDelete

Here are some rules for commenting on Simplex Design blog :
1, Search first ,then ask question. You will get the answer faster
2, All comments except spams are welcome.
3, Please make all requests in English.
4, Do not use generic titles such as Admin or Mod. This confuses readers