Recently blogger introduced their threaded commenting system for blogger blogs which is a great feature so far.By using threaded commenting system one can give reply to another's comment and make thread like structure of comments.But blogger threaded commenting system comes with very simple and boring design so in this post we will add threaded comments with awesome style.With using CSS Anup designed this awesome threaded commenting style.For adding this threaded system with awesome style you don't need to add any Scripts or images,It is designed with using pure CSS.



How To Add Threaded Comments With Awesome Style?

Here I am dividing this post in two part

  1. Enabling The Threaded Comments
  2. Applying The Styles To Threaded Comments

1. Enabling The Threaded Comments


(Note - Skip this step if you have already enabled the threaded comments)


  1. Go to Blogger Dashboard > Design > Edit HTML
  2. Download a copy of your template
  3. Tick the "Expand Widget Templates" check box.
  4. Now find for below code in your template

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

  6. Now replace the above code with below code (Note - If you found 2 codes lines of given spinet, then you have to replace both.)

  7. <b:if cond='data:post.showThreadedComments'>
    <b:include data='post' name='threaded_comments'/>
    <b:else/>
    <b:include data='post' name='comments'/>
    </b:if>

2. Applying CSS Styles


  1. Now find for

  2. ]]></b:skin>

  3. And add below code just above it.

  4. .comments {
        clear: both;
        margin-top: 10px;
        margin-bottom: 0px;
        line-height: 1em;
    }
    
    .comments .comments-content {
        font-size: 12px;
        margin-bottom: 16px;
        font-family: Verdana;
        font-weight: normal;
        text-align: left;
        line-height: 1.4em;
    }
    
    .comments .continue a, .comments .comment .comment-actions a {
        display: inline;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        padding: 2px 5px;
        text-decoration: none;
        text-shadow: 0 1px 1px rgba(0,0,0,.3);
        color: #FFF;
        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
        -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
        box-shadow: 0 1px 2px rgba(0,0,0,.2);
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        margin-right: 10px;
        border: 1px solid #3079ED;
        background: #0066FF;
        background: -webkit-gradient(linear, left top, left bottom, from(#0099FF), to(#009999));
        background: -moz-linear-gradient(top, #0099FF, #009999);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='
        #0099FF', endColorstr='#009999');
    }
    
    .comments .continue a:hover, .comments .comment .comment-actions a:hover {
        text-decoration: none;
        background: #0099FF;
        background: -webkit-gradient(linear, left top, left bottom, from(#009999), to(#0099FF));
        background: -moz-linear-gradient(top, #009999, #0099FF);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='
        #009999', endColorstr='#0099FF');
    }
    
    .comments .continue a:active, .comments .comment .comment-actions a:active {
        position: relative;
        top: 1px;
        background: -webkit-gradient(linear, left top, left bottom, from(#0066FF), to(#0099CC));
        background: -moz-linear-gradient(top, #0066FF, #0099CC);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='
        #0066FF', endColorstr='#0099CC');
    }
    
    .comments .comments-content .comment-thread ol {
        list-style-type: none;
        padding: 0;
        text-align: none;
    }
    
    .comments .comments-content .inline-thread {
        padding: 0.5em 1em 0 1em;
    }
    
    .comments .comments-content .comment-thread {
        margin: 8px 0px 0px 0px;
    }
    
    .comments .comments-content .comment-thread:empty {
        display: none;
    }
    
    .comments .comments-content .comment-replies {
        margin-top: 1em;
        margin-left: 40px;
        font-size: 12px;
    }
    
    .comments .comments-content .comment {
        padding-bottom: 8px;
        margin-bottom: 0px
    }
    
    .comments .comments-content .comment:first-child {
        padding-top: 16px;
    }
    
    .comments .comments-content .comment:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }
    
    .comments .comments-content .comment-body {
        position: relative;
    }
    
    .comments .comments-content .user {
        font-style: normal;
        font-weight: bold;
    }
    
    .comments .comments-content .user a {
        color: #444;
    }
    
    .comments .comments-content .user a:hover {
        text-decoration: none;
        color: #555;
    }
    
    .comments .comments-content .icon.blog-author {
        width: 18px;
        height: 18px;
        display: inline-block;
        margin: 0 0 -4px 6px;
    }
    
    .comments .comments-content .datetime {
        margin-left: 6px;
        color: #999;
        font-style: italic;
        font-size: 11px;
        float: right;
    }
    
    .comments .comments-content .comment-content {
        font-family: Arial, sans-serif;
        font-size: 12.5px;
        line-height: 19px;
    }
    
    .comments .comments-content .comment-content {
        font-family: Arial, sans-serif;
        font-size: 12.5px;
        line-height: 19px;
        text-align: none;
        margin: 15px 0 15px;
    }
    
    .comments .comments-content .owner-actions {
        position: absolute;
        right: 0;
        top: 0;
    }
    
    .comments .comments-replybox {
        border: none;
        height: 250px;
        width: 100%;
    }
    
    .comments .comment-replybox-single {
        margin-top: 5px;
        margin-left: 48px;
    }
    
    .comments .comment-replybox-thread {
        margin-top: 5px;
    }
    
    .comments .comments-content .loadmore a {
        display: block;
        padding: 10px 16px;
        text-align: center;
    }
    
    .comments .thread-toggle {
        cursor: pointer;
        display: inline-block;
    }
    
    .comments .comments-content .loadmore {
        cursor: pointer;
        max-height: 3em;
        margin-top: 3em;
    }
    
    .comments .comments-content .loadmore.loaded {
        max-height: 0px;
        opacity: 0;
        overflow: hidden;
    }
    
    .comments .thread-chrome.thread-collapsed {
        display: none;
    }
    
    .comments .thread-toggle {
        display: inline-block;
    }
    
    .comments .thread-toggle .thread-arrow {
        display: inline-block;
        height: 6px;
        width: 7px;
        overflow: visible;
        margin: 0.3em;
        padding-right: 4px;
    }
    
    .comments .thread-expanded .thread-arrow {
        background: url("
        data: image/png;
        base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
    }
    
    .comments .thread-collapsed .thread-arrow {
        background: url("
        data: image/png;
        base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent;
    }
    
    .comments .avatar-image-container {
        float: left;
        overflow: hidden;
    }
    
    .comments .avatar-image-container img {
        width: 36px;
    }
    
    .comments .comment-block {
        margin-left: 48px;
        position: relative;
        padding: 15px 20px 15px 20px;
        background: #F7F7F7;
        border: 1px solid #E4E4E4;
        overflow: hidden;
        border-radius: 4px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        border-image: initial;
    }
    Now save the template and your are done! You can also customize above CSS values as you wish.Also ask me for any kind help,I'll glad to help you..

Post a Comment

  1. Hi Rahul,
    This is an awesome threaded comment system for blogger :D I am also glad to see my profile pic..
    PS: I want to contact your for some purposes. can you mail me on (ammar@allbloggingtips.com

    ReplyDelete
  2. Hi rahul

    Nice . I Like it, But in IE 8 reply button not working... Please help

    ReplyDelete
    Replies
    1. There is not problem in threaded comments.Problem is in IE.

      Delete
    2. its now working see my blog www.hdwalle.com...can u fix its..??

      Delete
  3. NOT WORKING :( ON MY TEMpLATE

    ReplyDelete
    Replies
    1. Pls. activate threaded comments first then add above code.Also can you provide your blog URL?

      Delete
  4. This comment has been removed by the author.

    ReplyDelete
  5. hi rahul how to make thread commment like you. with word "AUTHOR"

    ReplyDelete
    Replies
    1. Add this :

      .comments .comments-content .icon.blog-author {
      position: absolute;
      top: 0px;
      right: 0px;
      margin: 0;
      background-image: url(https://lh5.googleusercontent.com/-cz1ogKtwNBc/T-xs3x0de-I/AAAAAAAABwI/KlCgXlV7uo0/s36/author.png);
      width: 36px;
      height: 36px;
      }

      Delete
  6. jUST Added thanks bro many usefull stuff i have found here ,first that newer and older links changing Now this ,i greatly thanks you buddy!!

    website,
    H4ck3r Cracks

    ReplyDelete
  7. Thanks Bro..!!
    But I have small problem how to decrease the width of reply box
    it was overriding my Right Side Bar
    Plzzzzzzzzz help me

    ReplyDelete
  8. Rahul. Thank you very much for this wonderful tutorial, I've been looking for something like this and found it on your awsome blog!

    I just have a doubt, the first code which is this:

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

    was found on my blog 6 times, should I replace each of them with the following code to make it work? :

    <b:if cond='data:post.showThreadedComments'>
    <b:include data='post' name='threaded_comments'/>
    <b:else/>
    <b:include data='post' name='comments'/>
    </b:if>

    Another thing. How can I highlight the author?
    Please respond Rahul. I will be waiting for your answer.

    I just found your blog. I will subscribe and follow all your fan pages. Thank you in advanced.

    ReplyDelete
  9. i love the style rahul ...can u come and visit my blog and can u give some suggestion...www.freefullversionsoftwaregames.blogspot.com

    ReplyDelete
  10. hi admin i add this widget. but my previous comment system also show. i want to show only this comment system. where i remove previous comment system please answer in here and my mail address: hadictg@gmail.com

    ReplyDelete
  11. beautiful threaded comments. it worked well in my blog :)

    carissa
    http://flightvintage.blogspot.com

    ReplyDelete
  12. This comment has been removed by the author.

    ReplyDelete
  13. I moved to default comment blogger system from Disqus comment. Disqus sucks. Thank you for the great tutorial. :)

    ReplyDelete

If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account).PLEASE DO NOT SPAM

 
Top