Techsperia Style Threaded Comments For Blogger

Blogger's default comment system works great! It has many advantages over Facebook comments or even Google+ comments. While I recommend you to stick to the default comment system of your blog, I also recommend you to change it's styling. Do you like the way I display my comments on Techsperia? I know you do! This tutorial will teach you how to implement the same on your blog as well!

Credits: This comment system was originally posted by spice up your blog, however, I did some modifications of my own to make it better!

Steps to implement

We are not actually changing the default comment system. We are simply adding some CSS code to display the comments in a better way. So stop bothering, it won't slow your page down!

1. Go to your blogger dashboard >> Template >> Edit HTML

2. Press CTRL+ F and search for the following piece of code:

 ]]></b:skin>

3. Paste the following code directly above/before  ]]></b:skin>

 #comments{overflow:hidden}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4,.comments .continue a{background:#5c5c5c}
#comments h4,.comments .user a,.comments .continue a{font-size:16px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #5c5c5c;border-right:20px solid transparent;width:0;height:0;line-height:0}
#comments .avatar-image-container img{border:0}
.comment-thread{color:#111}
.comment-thread a{color:#777}
.comment-thread ol{margin:0 0 20px}
.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#0084B4}
.comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px}
.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}
.comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}
.comments .comments-content .icon.blog-author{position:absolute;top:-14px;right:-25px;margin:0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPls3MJYD5Fpjh6t4TfL5AwozvdXOOl4Ig5mKBSYRzeiKLJye40kMMwRBqqgbtpkUC5jjneSajYpiN5vBqOp3cthvG9ljB3dFdftJHmLKH8oFw5zJrZOx-4oUl-3sUtrn081k5ajpa-Po/s25/pencil.png);width:40px;height:40px}
.comments .comments-content .inline-thread{padding:0 0 0 20px}
.comments .comments-content .comment-replies{margin-top:0}
.comments .comment-content{padding:5px 0;line-height:1.4em}
.comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent}
.comments .comment-thread.inline-thread .comment{width:auto}
.comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px}
.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}
.comments .comment-thread.inline-thread .comment-block{margin-left:48px}
.comments .comment-thread.inline-thread .user a{font-size:13px}
.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
.comments .continue{border-top:0;width:100%}
.comments .continue a{padding:10px 0;text-align:center}
.comment .continue{display:none}
#comment-editor{width:100%!important}
.comment-form{width:100%;max-width:100%}

3. Hit Save template and you're done! 

Some Pro Tips:

Feel free to edit the code as much as you want! In fact, I encourage you to do so because you should make these comments look like a part of YOUR blog.

• Replace the code highlighted in blue to change the background color of the place where the number of comments will be displayed.  By default, it's grey. Here's an example of how it looks when it's blue (#0084B4).

• To change the color of links in your comments, replace the code highlighted in pink with whatever color you want. The default color is blue (#0084B4).
• If you want to replace the author-pencil-image with something different, simply replace my image's link (highlighted in red) with yours.

Advantages Of This Comment Style:

• As I specified before, we are not changing the default comment system. We are simply styling it. Hence, there will be no effect whatsoever on your page's speed!
• This commenting style increases the readability of your blog since it displays the comments in "threads". In simple words, you can clearly see which comment is in response to which comment!
• If any admin of the blog posts a comment, a little pencil icon will be displayed signifying that he/she is the author!

• You get complete freedom! By editing the code (if you know a bit of CSS), you can modify even the smallest of things like the color of links or border around commenter's image!

I highly recommend that you stick to the default comment system of Blogger cause it's simple and awesome! I am going to write a post about why having the default comment system is much better than Facebook or Google+ or any other comment system. So stay tuned!