Threaded Comments For Blogger With Awesome Style

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



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



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



<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



]]></b:skin>



2. And add below code just above it.



.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..